2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HE …続きを読む
2023/1/25 09:42
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HE …続きを読む
2023/1/25 09:42
PC、タブレット、スマートフォンなど現代ではさまざまな種類のデバイスを通してWebサイトを閲覧します。多種多様な見方が存在するからこそ近年レスポンシブデザインがより重要視されています。そこで今回はレス …続きを読む
2022/10/14 15:28
CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシン …続きを読む
2022/10/13 09:53
コンテナクエリは今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できます。レイアウトやコンポーネントをはじめ、レスポンシブ対応のフォントサイズにも大活躍 …続きを読む
2022/10/6 09:48
Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChrome 108で実装されます! CSSの新機能で、Chromeが一番最 …続きを読む
2022/10/4 09:38
本記事は、2022年5月に開催されたTechFeed Conference 2022のセッション書き起こし記事「2022年のモダンCSS(鹿野 壮) — TechFeed Conference 2 …続きを読む
2022/8/30 14:38
CSSの新機能コンテナクエリ(@container)と:has()疑似クラスが、いよいよChrome 105(8月末、来週リリース予定)でサポートされます。 コンテナクエリとは今までのメディアクエリが …続きを読む
2022/8/25 09:42
皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらず仕方なくブレイクポイントを追加して対応したことはありませんか?僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよ …続きを読む
2022/8/17 20:07
Result ジオシティーズ時代のWebサイトの象徴のような存在だったmarqueeタグは現在は非推奨ですが、そもそも使い方の問題という印象ではあります。 そこでモダンなCSSでレスポンシブにも対応し …続きを読む
2022/8/12 14:00
iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChro …続きを読む
2022/8/4 09:37
2022年7月20日 CSS, Webデザイン, スマートフォン モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デス …続きを読む
2022/7/20 08:44
突然ですが、picture要素を使ってアスペクト比が違う画像を読み込む場合でも、imgとsourceにwidthとheightを記述すれば、レイアウトシフトが起こらなくなるって知ってました? < …続きを読む
2022/7/18 18:36
Webのレスポンシブは、メディアクエリによるページベースだけでなく、コンテナクエリによる親コンテナベースの実装ができるようになります。 このCSSの新機能コンテナクエリによりコンポーネントを複数のコン …続きを読む
2022/7/15 09:42
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです …続きを読む
2022/7/6 09:56
これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子(>=, <=)を使用できるようになります! 幅が400px以上の場合、@media (min-width: 4 …続きを読む
2022/6/20 09:37
CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか? ほかにもメディアクエリを定義する時、マージンを定義する時、widthやhei …続きを読む
2022/6/7 09:49
Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば …続きを読む
2022/5/31 09:44
This is a tool that calculates the clamp formula needed to interpolate between a minimum value and a …続きを読む
2022/5/27 13:10
CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引 …続きを読む
2022/4/12 09:47
これまでとは異なるCSSフレームワークが登場しました! Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数(カスタムプロパティ)で記述されています。レスポンシブ対応で一 …続きを読む
2022/4/5 10:03