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

レスポンシブ

要素の幅でレスポンシブ対応を行える! コンテナークエリーの使い方 - 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

【CSS】レスポンシブなfont-size指定テクニック4選 - Qiita

はじめに レスポンシブサイト構築の際に、何かと悩む(ちょっと煩わしい)のがfont-sizeの指定方法なのではないでしょうか? 今回はそんな煩わしさがすこしでも減るように、レスポンシブデザインのための …続きを読む

2023/9/28 21:27

  • Pocket

【第5弾】少しのコードで実装可能な10のCSS小技集

2023年9月7日 CSS CSS小技集シリーズの第5弾!「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています!初心者さんからベテ …続きを読む

2023/9/7 09:50

  • Pocket

CSSでfont-sizeをレスポンシブ対応にする最新テクニック! clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator

レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定でき …続きを読む

2023/7/24 09:57

  • Pocket

フロントエンドエンジニアにおすすめchrome拡張機能 - Qiita

はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchro …続きを読む

2023/7/21 11:06

  • Pocket