Rails7時代のJS/CSSバンドルの新常識 – <hazm.jp />
Rails7では、jsをバンドルせずにimportmapでjsを直接読み込む方式がデフォルトとなりました。しかしwebpack等でのバンドル方式の選択肢を完全に失ったわけではありません。特定のターゲット（ES5など）にトランスパイルすることができます。レガシーブラウザをサポートする要件下ではバンドル方式を選択することもあるでしょう。そこで来たるRails7時代に、我々アプリケーションエンジニアにとってどのような手段があるのか、Railsの基礎知識をアップデートしていくのがこの記事の目的になります。早速始めましょう！ JSの読み込ませ方 かつてのRailsではSprocketsでバンドルして単一のjsファイルとして配信する方法が常識でした。Sprocketsはトランスパイルはしないものの、minifyする仕組みを持っていました。 Rails7からは、importmapまたはwebpack/e
CSSによる文字の折り返し制限・改行の禁則処理の指定方法まとめ | WEMO
中途半端な位置で改行してほしくない！ という場合の対処法。 ポイントとなるCSSは以下の２つ。 word-break: keep-all; line-break: strict; word-breakプロパティについて normal 英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。 break-all 言語に関係なく表示範囲に合わせて改行されます。このため単語の途中で改行されることもあります。 keep-all 言語に関係なく単語の途中では改行せず、単語の切れ目で改行されます。 line-breakについて normal 標準の禁則処理をします。 strict 厳密な禁則処理をします。 ※ strictを指定すると、日本語の「ー」や「っ」でもちゃんと単語の一部として認識されま
HTMLとCSSのコピペでできるモーダルウィンドウのデザイン3種
モーダルの中身 ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ HTML <center> <a href="#modal-01" class="modal-button"> モーダルを表示 </a> </center> <div class="modal-wrapper" id="modal-01"> <a href="#!" class="modal-overlay"></a> <div class="modal-window"> <div class="modal-content"> <p class="modal_title">モーダルの中身</p> <p> あああああああああああ
現代開発者のためのCSS基礎技術 - Qiita
ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
html+cssを挫折した全ての人のための基礎実習 先生：田中 晶子
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/390/room ーーーーーーーーーーーーーーーーーーーーーーー
コーディング作業は無しで、デスクトップ・スマホ向けのテンプレートをすぐに構築できる次世代ツール -GrapesJS | コリス
HTMLやCSSのコーディング作業は無しで、デスクトップ・スマホ向けのさまざまな種類のテンプレートをすぐ簡単に構築できるフレームワークを紹介します。 ランディングページはもちろんのこと、CMSにも使用できるように設計されており、オープンソースとして利用できます。 普通のページビルダーのように見えますが、実際にはより多くの機能を備えています。 CMSもサポート テンプレートを簡単に作成できる Webサイト、スマホアプリ、HTMLメールなど、HTMLベースのテンプレートを素早く簡単に作成できます。 レスポンシブ対応 レイアウトのベースはFlexboxで、デスクトップ、タブレット、スマホに完全対応。 CMSをサポート 動的テンプレートの作成をスピードアップするためにCMS内部で使用できるように設計されています。 HTML, CSSのコーディング作業は無し コーディング作業は一切無しで、テンプレー
2018年の最先端フロントエンドエンジニアになろう - Qiita
フロントエンドエンジニア / バックエンドエンジニア / DevOpsエンジニア@poly_soft この画像を見てティン！と来たので訳してみました。 以下はModern Frontend Developer in 2018の日本語訳です。 Modern Frontend Developer in 2018 この記事を始める前に、まず私のことと、このロードマップについてお伝えします。 私は過去5年間フルスタックエンジニアとして働いていて、そして現在はtajawalで、様々な役割を持つリードエンジニアとして働いています。 単に趣味だからというだけではなく、他の開発者の技術力を保つためにトレンドについていくことも私の責任のひとつです。 初心者が(そして経験者が)トレンドに付いていこうとして混乱する様を私はよく見かけます。 私は2017年、多くの友人に、キャリアを積むために何を学ぶべきかについて
ノンデザイナーでもイケてるLPを作成する方法 - Qiita
はじめに イケてるは誇張かもしれませんが社内にデザイナーがいなく、 エンジニアにランディングページを作ってと振られたときのケースを想定して ノンデザイナーでも体系的にCSSコーディングすることでそれっぽいランディングページを作成できることを目的としてます。 デザインは一朝一夕でできるものではなく、ブランディングに関わる部分の画像に関しては、商材の撮影やPhotoShopやIllustratorで専用のアイコンやロゴ画像を別途制作する必要があります。 本格的に作成する場合はやはり本職のデザイナーさんに依頼した方が良いでしょう。 （それっぽいといったのは今回はそれらのブランディングに関わる画像の作成を省いて、素材画像やCSSでごまかしているからです。） 今回はCSS Designerという仮想CSSエディターの商材を想定してランディングページを作成しました。 作ったページ全体のサンプルはこちら
フロントエンド全然わからないマンが、ちょっとでも見た目のいいWebサービスを作ろうとしてやったこと - Qiita
はじめに サーバーサイドプログラミングを勉強していると、自分でWebサービスを作りたいという気持ちがわいてくるものです（私はそうでした）。しかし、ここで大きな問題が立ちはだかります。どんなにすごい機能をつけても、いい感じのデザインのWebサービスでないとそもそも使ってもらえないのです。 試しに、QiitaのトップページのCSSを無効にしてみました。使える機能は変わらないはずなのに、全く使う気が起きなくなりますね。 しかしそうは言っても、フロントエンドの経験がほとんどないとどうすれば見た目をいい感じにできるかがわかりません。今回は、ちょっとでも見た目のいいWebサービスを作るために、そんな状況の私がやってみたことをまとめました。 (この記事は、あくまで私が試行錯誤した結果をまとめたものであり、その結果出来上がったサービスの見た目の良さを保証するものではありません) 書いている人のプロフィール
新しいRailsフロントエンド開発（2）コンポーネントベースでアプリを書く（翻訳）｜TechRacho by BPS株式会社
新しいRailsフロントエンド開発（1）Asset PipelineからWebpackへ（翻訳） 新しいRailsフロントエンド開発（2）コンポーネントベースでアプリを書く（翻訳） 新しいRailsフロントエンド開発（3）Webpackの詳細、ActionCableの実装とHerokuへのデプロイ（翻訳） 概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Evil Front Part 2: Modern Front-end in Rails 原文公開日: 2017/12/12 著者: Andy Barnov、Alexey Plutalov サイト: Evil Martians 前書き 本記事は、フロントエンドのフレームワークに依存しないRailsプレゼンテーションロジックを現代的かつモジュール単位かつコンポーネントベースで扱う方法を独断に基いて解説するガイドです。3部構成のチュ
Rubyの高速フォーマッタ－"Rufo"を使ってみる【18/09/30更新】 - Qiita
普段はVisualStudioCodeでRailsのコードを書いているのですが、Rubyのフォーマッターがほしいと常々思っていました。 そこで、週間Railsウォッチで紹介されていたRufoというRubyフォーマッターを使ってみたところ、非常に使いやすく、自分の使い方にもマッチしていたので紹介します。 変更点 2018/09/30 Setting.mdに合わせて設定の内容を更新しました。 設定できる項目が減り、いずれ設定をする必要がなくなるようです。 細かく設定したい人にはうれしくない話かもしれませんが、フォーマットは統一できればさほど問題ないので、細かく設定できて差分が生じるより良い話かと思います。 フォーマッターに求めること 自分がフォーマッターに求めることは主に以下の4つです。 保存時に自動でフォーマットがかかること フォーマット設定が容易で、共有できること ストレスなく使えること
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
