サイト制作関連はてブサイト制作に関連するはてブ記事をタグで抽出しただけ

レスポンシブ

2022年のモダンCSS ~TechFeed Conference 2022講演より | gihyo.jp

本記事は、2022年5月に開催されたTechFeed Conference 2022のセッション書き起こし記事「2022年のモダンCSS(鹿野 壮⁠)⁠ — TechFeed Conference 2 …続きを読む

2022/8/30 14:38

  • Pocket

レスポンシブの実装が今までと変わる! CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説

CSSの新機能コンテナクエリ(@container)と:has()疑似クラスが、いよいよChrome 105(8月末、来週リリース予定)でサポートされます。 コンテナクエリとは今までのメディアクエリが …続きを読む

2022/8/25 09:42

  • Pocket

レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法 | セカヤサブログ

皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらなず仕方なくブレイクポイントを追加して対応したことはありませんか?僕はあります。気をつけないとすぐ要素がはみ出したり重なったりします …続きを読む

2022/8/17 20:07

  • Pocket

非推奨のmarqueeタグのような動作をモダンなCSSで再現

Result ジオシティーズ時代のWebサイトの象徴のような存在だったmarqueeタグは現在は非推奨ですが、そもそも使い方の問題という印象ではあります。 そこでモダンなCSSでレスポンシブにも対応し …続きを読む

2022/8/12 14:00

  • Pocket

レスポンシブの確認が簡単に! iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター

iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChro …続きを読む

2022/8/4 09:37

  • Pocket

モバイル幅で作成されたWebサイトの特徴と作例

2022年7月20日 CSS, Webデザイン, スマートフォン モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デス …続きを読む

2022/7/20 08:44

  • Pocket

picture要素で使うsourceタグにもwidthとheight属性を書くといいらしい

突然ですが、picture要素を使ってアスペクト比が違う画像を読み込む場合でも、imgとsourceにwidthとheightを記述すれば、レイアウトシフトが起こらなくなるって知ってました? < …続きを読む

2022/7/18 18:36

  • Pocket

CSSの実装はコンテナクエリで大きく変わる! コンテナクエリをデベロッパーツールで検証およびデバッグする方法

Webのレスポンシブは、メディアクエリによるページベースだけでなく、コンテナクエリによる親コンテナベースの実装ができるようになります。 このCSSの新機能コンテナクエリによりコンポーネントを複数のコン …続きを読む

2022/7/15 09:42

  • Pocket

ウソみたいに簡単! Tailwind CSSのみを使用してMasonryレイアウトを実装する方法

Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なる画像・カードを配置する時によく使用されるテクニックです …続きを読む

2022/7/6 09:56

  • Pocket

これは朗報! CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります

これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子(>=, <=)を使用できるようになります! 幅が400px以上の場合、@media (min-width: 4 …続きを読む

2022/6/20 09:37

  • Pocket

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか? ほかにもメディアクエリを定義する時、マージンを定義する時、widthやhei …続きを読む

2022/6/7 09:49

  • Pocket

CSSでfont-sizeをレスポンシブ対応にする最新テクニック! clamp()関数で定義する便利ツール -Min-Max Calculator

Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば …続きを読む

2022/5/31 09:44

  • Pocket

Min-Max-Value Interpolation

This is a tool that calculates the clamp formula needed to interpolate between a minimum value and a …続きを読む

2022/5/27 13:10

  • Pocket

CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる

CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引 …続きを読む

2022/4/12 09:47

  • Pocket

これまでとは異なるCSSフレームワークが登場! 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props

これまでとは異なるCSSフレームワークが登場しました! Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数(カスタムプロパティ)で記述されています。レスポンシブ対応で一 …続きを読む

2022/4/5 10:03

  • Pocket

HTMLはシンプルなまま、Webサイトの見栄えをよくするclassレスの超軽量CSSフレームワーク -Almond.css

HTMLはシンプルなままで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 ポートフォリオやブログなどをさくっと作成したい時に便利です。少し手を加えて、 …続きを読む

2022/3/9 09:59

  • Pocket

CSSで区切り線を実装するのは、flexboxが簡単で便利! レスポンシブ対応の区切り線を実装するテクニック

要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか? flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて …続きを読む

2022/3/8 09:57

  • Pocket

【意外と教わらない】Webデザイナーなら知っておくべき画面サイズのお話。 | 株式会社LIG

こんにちは。デザイナーのまいまいです🦀 みなさん、駆け出しのWebデザイナーのころってどんなことを学びましたか? デザインツールの使い方、フォント、レイアウト、配色、コーディング、etc……。 いろん …続きを読む

2022/2/25 08:43

  • Pocket

pictureタグとsrcset属性の違い。超わかりやすく

例えば、スマホ端末に対して1920×1080の画像を表示するのはムダです。 もっと小さいサイズでいいですからね。 逆にデスクトップPCだと画面が大きいので、1920×1080の画像を表示しても良いです …続きを読む

2022/2/23 15:38

  • Pocket

「未満」を表現!メディアクエリの「not」キーワード | 株式会社LIG

こんにちは。エンジニアのつっちーです。 以前に、「メディアクエリの書き方に注意しないと、ウインドウ幅と表示倍率によっては、スタイルの適用されない状態が発生してしまう」という内容の記事を書きました。 今 …続きを読む

2022/2/15 09:23

  • Pocket