Rails7時代のJS/CSSバンドルの新常識 – <hazm.jp />
Rails7では、jsをバンドルせずにimportmapでjsを直接読み込む方式がデフォルトとなりました。しかしwebpack等でのバンドル方式の選択肢を完全に失ったわけではありません。特定のターゲット（ES5など）にトランスパイルすることができます。レガシーブラウザをサポートする要件下ではバンドル方式を選択することもあるでしょう。そこで来たるRails7時代に、我々アプリケーションエンジニアにとってどのような手段があるのか、Railsの基礎知識をアップデートしていくのがこの記事の目的になります。早速始めましょう！ JSの読み込ませ方 かつてのRailsではSprocketsでバンドルして単一のjsファイルとして配信する方法が常識でした。Sprocketsはトランスパイルはしないものの、minifyする仕組みを持っていました。 Rails7からは、importmapまたはwebpack/e
エンジニア向けチートシート集 - Qiita
はじめに 今回はエンジニア向けのチートシート集のまとめを紹介していきます。 チートシートを利用することで 作業効率が上がる 概要が掴みやすい 学習にもなる といった恩恵が得られます。 ただし前提として毎回コードを書くたびに「チートシート集でカンニングすればええや」と思うのではなく「最初はチートシートでカンニングしつつ徐々に体で覚えていく」ことを意識して使うことが大切です。 最終的にはチートシートは見ずに「自分の使える技術」として定着させるための道具だと思って使ってください。 この記事の対象者 エンジニア初心者~中級者 作業効率を上げたい人 コードを書くテクニックを知りたい人 VsCodeチートシート はじめに紹介するのはエンジニアなら必ず使うであろうVsCodeのショートカットチートシートです。 VsCodeのショートカットは大幅に作業効率を上げてくれます。そのため早い内からショートカット
Tailwind CSS v2.2 - Tailwind CSS
Well I can’t say we were really planning on it but over the last few weeks we’ve been having a ton of fun dumping new and exciting features into Tailwind and now feels like the right time to cut a release, so here it is — Tailwind CSS v2.2! We’ve built-in a new high-performance CLI tool, added ::before and ::after support, introduced new peer-* variants for sibling styling, added variants for styl
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
Web 関連仕様 日本語訳
このページは、 Web プラットフォーム関連の様々な仕様の日本語訳の一覧と， それらの日本語訳に共通な事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、 日本語訳は公式なものではありません。 誤訳が無いことは保証されません。 ［ 当の仕様の策定者たちが想定している／当の仕様に期待されている ］意味論を完全かつ正確に反映することは保証されません。 翻訳なので、 語彙レベルで原文と正確に一致する意味を表すことは決してありません。 日本語は自然言語なので、 誰がいつどこで読んでも同じ解釈になることは保証されません。 ）（ 実際に誤訳が見つかることも時折あります。 それらについては見つかり次第修正され， 加えて用語の対訳や言い回しなども時折修正されるので、 これらの翻訳が「完成」する日は永遠に来ません。 逆に原文仕様が誤っていることもあり、
Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css
現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Reseter.css -GitHub Reseter.cssの特徴 Reseter.cssの使い方 Reseter.cssの中身 Reseter.cssの特徴 Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。 Reseter.css バグやブラウザの不整合
Google Chromeでもfont-sizeを10px以下で表示させるCSS - 株式会社アップシェア ブログ
【2021年7月更新】 Webサイト制作で極小フォントサイズを使用したいときに厄介なのが Google Chrome。 Chromeは可読性を維持するため、10px以下のフォントサイズを指定したテキストも10pxで表示される仕様になっています。 ブラウザごとの表示の違い まずは Firefox、Chrome、IE、Safari での表示の違いをご覧ください。 Firefox Google Chrome Internet Explorer Safari 頑なにフォントサイズ10px以下で表示させようとしないGoogle Chrome。 font-size が効かないとなると、諦めて10pxにするか画像を作るか…といった妥協策が思い付きますが、CSSだけで思い通りのフォントサイズに表示させる方法がありました。 transformプロパティでブロックごと縮小する [html] <span cla
iframe要素のスマホ対応 – CSSとJavaScriptそれぞれのレスポンシブ対応方法
「CSS」でiframe要素をレスポンシブ対応させるまずは、CSSでiframe要素をレスポンシブ対応させる方法を説明します。CSSオンリーでもレスポンシブ対応させることができます。以下のYouTubeの動画はiframe要素となっています。これから説明するCSSでレスポンシブ対応させています。 Design for a Mobile MindHTML – iframe要素をラップするHTMLの方では、レスポンシブ対応させたいiframe要素をdiv要素などでラップします。それぞれにclass属性などで名前をつけます。iframe要素はできたらサイズの指定をしておきます。 <div class="iframe-wrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/xqviGwyy7y0?r
アイフレームをスマホ対応させる方法 | コトダマウェブ
ここではiframeのレスポンシブ対応の方法についてお話していきます。iframeは、GoogleマップやYoutubeの埋め込み用のコードを使う場合でも対応が必要になります。レスポンシブは理解するのが難しい部分がありますが、とりあえずコードだけでもコピペしてお使いください。 とりあえずやり方だけ知りたい方へ 結論だけ知りたい方のためにはじめにコードだけお伝えしておきます。 HTML <div class="iframe-wrap"> <iframe src="アイフレームを表示させたいURL" frameborder="0"></iframe> </div> iframeをdivでラップしてdiv要素に適当なclass名を入れます。 スタイルシート .iframe-wrap { position: relative; width: 100%; padding: calc(アイフレームの高
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> あああああああああああ
Sass(SCSS)のmixin, extendなどまとめ - Qiita
Sass(SCSS)のややこしそうな機能まとめ。 変数 共通な色や数値などを定義しておける。 他に、文字列や真偽なども定義可能。
background-imageの取り扱い一覧 - Qiita
HTML、CSSでdivを作成して、そのdivの背景にimageを入れたいときってありますよね。 でも、ぴったりサイズの画像だったら良いんですが、、、 大体の場合は全くぴったりじゃなくて、表示させてい部分そこじゃないよ！ アップ過ぎるよ！ ズームインしすぎだよ！って時の方が多いですよね。。 例えば、この画像。 pixabay 小さいdivの背景にしてしまうと、、、 こんな感じになっちゃったり、、 いや、もふもふ度はわかるけども、、 そんな時にどうやったら、上手に背景画像として表示できるのかをまとめました。 background-repeat まず画像をリピートしたい時。もしくは、したくない時。 したくない時は
現代開発者のためのCSS基礎技術 - Qiita
ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)
positionを使って要素を配置する際、その要素を中央に配置したいといったことはよくあると思います。その場合どうすしたらいいのか悩まれた経験はありませんか？ 今回は、positionで、要素の幅が確定していなくても上下中央、左右中央、上下左右中央に配置できるcssの設定方法をご紹介します。 positionとtranslateを使って要素を中央に配置する方法 具体例と解説 それでは、具体例を示しながら実際の設置方法を解説していきたいと思います。 例は、画像の上にテキストを配置するケースで、テキストの配置位置は、上下左右中央になるようにする場合です。 完成イメージは下記図になります。（わかりづらいかもしれませんが、水色部分が画像[img]だと仮定してください） 図 それでは、具体的にソースを示してから解説していきたいと思います。 まずは、htmlとcssをご確認ください。 html
JavaScript とは - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
html+cssを挫折した全ての人のための基礎実習 先生：田中 晶子
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/390/room ーーーーーーーーーーーーーーーーーーーーーーーRead less
フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説！ | Tech Blog
この記事ではブラウザの仕組みを図解を用いてわかりやすくご説明します。 最近のブラウザは優秀なので、ブラウザの仕組みを理解していなくても、パフォーマンスの問題が発生することは少ないかもしれません。 しかし、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合、パフォーマンスの問題はとてもシビアです。 ブラウザの仕組みを知ることで、ブラウザのパフォーマンスを最大限に引き出す実装を行うことができます。 画面がなめらかに表示されないのはなぜ？スクロールをしていてカクつく。またはアニメーションがカクカクしている時というのはブラウザがどういう状態なのでしょうか？ まずは、この状態を定量的に説明するためFPS（フレームレート）から説明します。 FPSとはFrame Per Secondの略で1秒ごとの画面(フレーム)の切り替わる回数を表しています。 ブラウザでサイトを見た際には最高で6
未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita
エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
display: flex : フレックス・ボックス・レイアウト - CSSプロパティ - Web開発 - fromkato.com