Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 …続きを読む
2024/4/16 08:39
サイト制作関連はてブサイト制作に関連するはてブ記事をタグで抽出しただけ
レスポンシブ
知っておくと便利なCSSの単位: コンテナクエリに基づく相対単位（cqw, cqh, cqi, cqb, cqmin, cqmaxなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。CSSはそれら以外にもたくさんの単位が使用できます。 第3弾となる今回はコンテナクエリに基づく単位（cqw, cqh, cqi, …続きを読む
2024/4/4 09:39
そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似 …続きを読む
2024/4/2 09:59
CSSでスタイルクエリ（@container style()）を使えるようになると、実装がいろいろ便利になる
コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、メディアクエリに代わり、コンテナクエリを使用する機会も増えてきたと思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるもの …続きを読む
2024/3/19 09:56
Web制作者は要チェック！ Chrome 122で新しく追加された3つのCSSの機能
Chrome 122に追加された、CSSの新しい機能3つを紹介します。 今回のアップデートは新しいプロパティを使えるようになったではなく、既存のものの仕様が変更されたという感じです。ここで紹介する機能 …続きを読む
2024/2/27 09:52
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をは …続きを読む
2024/1/24 09:57
生成AI で思い通りのサイトを出力しよう - Qiita
こんにちは。日頃は blockchain の記事ばかり書いていますが、たまには生成 AI についても書きたいと思います。テーマは生成 AI で出来るだけ思い通りにサイトの生成を行います。 前提 今回は …続きを読む
2024/1/5 23:41
レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcs …続きを読む
2023/12/5 09:45
グリッドシステムのフレームワークを作ってみた
はじめに この記事では私が普段使っている、グリッドシステムを使ったレスポンシブなデザインカンプのフレームワークを紹介します。主にデザイナー初心者や1~2年程の経験者向けの内容です。 フレームワークを作 …続きを読む
2023/11/30 16:50
Responsive Samples by unshift
「固定値型」では、フォントサイズが固定値となるため、ヘッダーのコンテンツ幅によっては入り切らない場合があるため、ビューポートの幅が1280px未満の場合はSNSリンクを非表示にしている。 「相対値型」 …続きを読む
2023/10/29 14:56
【CSS】レスポンシブなfont-size指定テクニック4選 - Qiita
はじめに レスポンシブサイト構築の際に、何かと悩む（ちょっと煩わしい）のがfont-sizeの指定方法なのではないでしょうか？ 今回はそんな煩わしさがすこしでも減るように、レスポンシブデザインのための …続きを読む
2023/9/28 21:27
【第5弾】少しのコードで実装可能な10のCSS小技集
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテ …続きを読む
2023/9/7 09:50
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定でき …続きを読む
2023/7/24 09:57
フロントエンドエンジニアにおすすめchrome拡張機能 - Qiita
はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchro …続きを読む
2023/7/21 11:06
これは便利すぎる！ Webページを1クリックで編集可能なFigma用に変換できるプラグイン「html.to.design」が神アップデートされました
WebページのURLを入力し、1クリックするだけで、そのページの編集可能なFigmaファイルに変換できる無料プラグインを紹介します。 去年紹介しましたが、先日ver.2にアップデートされました！ 一括 …続きを読む
2023/6/19 09:39
これでよく分かる！ 2023年、モダンCSSとUIの新しい機能のまとめ
2023年もCSSとUIの進化がすごいです！ 先日開催されたGoogle I/O 2023から、各ブラウザにサポートされたモダンCSSの新機能をはじめ、まもなくサポートされる機能まで、CSSの新しい機 …続きを読む
2023/5/25 09:37
プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS
ポートフォリオやブログ、テキストサイトやシンプルなショップなど、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワークを紹介します。 HTMLもシンプルでプレーンなため、実装は簡単で …続きを読む
2023/5/16 09:46
【HTML】pictureタグで画像をレスポンシブに切り替える方法を解説 | ZeroPlus Media
この記事では、「pictureタグを使ってレスポンシブに画像を切り替える方法」について解説します。 レスポンシブデザインのWebサイトでは、モバイルサイズ時とPCサイズ時で、別々の画像を表示したいとき …続きを読む
2023/5/4 10:38
Web制作者は知っておくと便利！ ブラウザにすでにサポートされているCSSの新機能を使ったテクニックのまとめ
CSSのコンテナクエリ（@container）、カスケードレイヤー（@layer）、スクロールスナップ（scroll-snap）、アスペクト比（aspect-ratio）、論理プロパティ（inset- …続きを読む
2023/4/6 09:47
ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ
筆者が CSS を学び始めたとき、media query で画面サイズに応じてスタイルを変える方法が大変ニガテでした😭 min？ max？ 未満のときはどうするの？ and で繋げなきゃいけないの？ …続きを読む
2023/3/28 16:12