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

レスポンシブ

これは便利なVS Codeの機能拡張! CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズが簡単にできる -Clamp It!

CSSの実装に便利なVS Code用の機能拡張がリリースされました! レスポンシブ対応のフォントサイズをCSSで定義するときに、面倒なclamp()関数の定義を簡単にできるClamp It!を紹介しま …続きを読む

2024/10/24 09:39

  • Pocket

display:contents;って何?どんな時に使うと便利なの? - Qiita

先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな …続きを読む

2024/8/29 18:30

  • Pocket

標準化されたCSSのzoomプロパティ

標準化されなかったzoom CSSのzoomプロパティをご存知でしょうか? 有名(だった)なIE向けのハックとして *zoom: 1; などを記述したことがある人、または見たことがある人もいるかと思い …続きを読む

2024/8/24 00:36

  • Pocket

Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック

Webサイトのエクスペリエンスを改善するCSSの便利なテクニックを紹介します。 基本的には一行のCSSですが、より良くするためにCSSを追加して複数行のものもあります。 CSS One-Liners …続きを読む

2024/7/25 09:59

  • Pocket

要素の幅でレスポンシブ対応を行える! コンテナークエリーの使い方 - ICS MEDIA

コンテナークエリー(@container)は、CSSの新しいアットルールです。従来のメディアクエリー(@media)とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポー …続きを読む

2024/6/21 22:53

  • Pocket

これは簡単で便利! レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity

フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義 …続きを読む

2024/6/13 09:38

  • Pocket

CSSのメディアクエリでcalc()が使用できるの知ってた?

CSSのメディアクエリでcalc()が使用できるのを知ってましたか? これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。 …続きを読む

2024/6/12 09:48

  • Pocket

シンプルなHTMLで、レスポンシブとライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリ -matcha.css

シンプルなHTMLを使用して、レスポンシブ対応、ライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリを紹介します。 シンプルなWebページやポートフォリオ、プロトタイ …続きを読む

2024/6/11 10:01

  • Pocket

これだけは知っておきたい最新モダンCSSの書き方(2024年夏版)

このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しい …続きを読む

2024/5/22 15:24

  • Pocket

CSSはどんどん進化している! マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning

ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトで …続きを読む

2024/5/22 09:43

  • Pocket

Figma初心者でも大丈夫! レスポンシブWebデザインをFigmaで作るための3つのポイント

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 …続きを読む

2024/4/16 08:39

  • Pocket

知っておくと便利なCSSの単位: コンテナクエリに基づく相対単位(cqw, cqh, cqi, cqb, cqmin, cqmaxなど)の便利な使い方を解説

CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。CSSはそれら以外にもたくさんの単位が使用できます。 第3弾となる今回はコンテナクエリに基づく単位(cqw, cqh, cqi, …続きを読む

2024/4/4 09:39

  • Pocket

そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています

2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似 …続きを読む

2024/4/2 09:59

  • Pocket

CSSでスタイルクエリ(@container style())を使えるようになると、実装がいろいろ便利になる

コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、メディアクエリに代わり、コンテナクエリを使用する機会も増えてきたと思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるもの …続きを読む

2024/3/19 09:56

  • Pocket

Web制作者は要チェック! Chrome 122で新しく追加された3つのCSSの機能

Chrome 122に追加された、CSSの新しい機能3つを紹介します。 今回のアップデートは新しいプロパティを使えるようになったではなく、既存のものの仕様が変更されたという感じです。ここで紹介する機能 …続きを読む

2024/2/27 09:52

  • Pocket

最近のCSSは進化が早い! モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ

最近のCSSは進化が早く、またブラウザはエバーグリーン(自動で最新版にアップデートするブラウザ)になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をは …続きを読む

2024/1/24 09:57

  • Pocket

生成AI で思い通りのサイトを出力しよう - Qiita

こんにちは。日頃は blockchain の記事ばかり書いていますが、たまには生成 AI についても書きたいと思います。テーマは生成 AI で出来るだけ思い通りにサイトの生成を行います。 前提 今回は …続きを読む

2024/1/5 23:41

  • Pocket

レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります

朗報です! 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcs …続きを読む

2023/12/5 09:45

  • Pocket

グリッドシステムのフレームワークを作ってみた

はじめに この記事では私が普段使っている、グリッドシステムを使ったレスポンシブなデザインカンプのフレームワークを紹介します。主にデザイナー初心者や1~2年程の経験者向けの内容です。 フレームワークを作 …続きを読む

2023/11/30 16:50

  • Pocket

Responsive Samples by unshift

「固定値型」では、フォントサイズが固定値となるため、ヘッダーのコンテンツ幅によっては入り切らない場合があるため、ビューポートの幅が1280px未満の場合はSNSリンクを非表示にしている。 「相対値型」 …続きを読む

2023/10/29 14:56

  • Pocket