CSS Gridでレスポンシブ対応の代表的な5つのレイアウトを実装するテクニック
Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニックを紹介します。 ヘッダ・コンテンツ・フッタを積み重ねたもの、12カラムのグリッド、メディアクエリなしのレスポンシブなど、実際によく使用されるレイアウトばかりです。 CSS Gridを使用すると、今まで少し複雑だったレイアウトもシンプルなコードで簡単に実装できます。 Master CSS Grid by Building 5 Layouts in 17 Minutes by Thu Nghiem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 基本的なレイアウト「パンケーキ スタック」 2. 基本的なレイアウト「12カラムのグリッドレイアウト」 3. grid-template-areasがある場合とない場合のレ
【CSS】画像に色を重ね合わせてテキスト部分を切り抜く汎用的な方法は？
例えば、サイトのヘッダー画像やギャラリー形式のアーカイブページなどでは、画像の上にサイトタイトルや投稿タイトルとなる文字列を重ねて表示するデザインを施す場合、画像とテキストが同化して見難くならないよう、テキストが白文字ならば画像はbrightnessで明るさを落としたり、白文字が映えるような背景カラーのレイヤー要素を画像にオーバーレイさせるなどの工夫をする場合があります。 今回のケースでは、テキストを色で塗りつぶすのではなく、CSSのみで色を重ね合わせた画像の上に表示されているテキスト(文字列)の形状部分だけ色を切り抜いたようなデザインでテキストを表示する方法をいくつか試してみました。 細かい想定としては、WordPressのテーマオプションとしてサイトのキーカラーを決め、指定したヘッダー画像や個々のアイキャッチ画像にキーカラーを合成させ、その上に表示するタイトルなどのテキスト部分のシェイ
「建築情報学」生・誕・祭！第1回：「建築情報学(会)」には何ができるのか
「建築情報学」生・誕・祭！ 第1回：「建築情報学(会)」には何ができるのか 2020/11/30にオンライン開催された「建築情報学」生・誕・祭！第1回に関連するTwitterまとめです。 テーマは「建築情報学(会)」には何ができるのかと題して建築情報学会設立理事と、ゲストに落合 陽一 さん、 三宅 陽一郎さんをお迎えして2時間に渡り建築情報学の可能性についてお送りしました。 リンク 「建築情報学」生・誕・祭!!! －学会設立＋書籍出版記念イベントウィーク 「建築情報学」生・誕・祭!!! －学会設立＋書籍出版記念イベントウィーク｜EventRegist（イベントレジスト） 『建築情報学』 生・誕・祭!!! 建築情報学 － 学会設立+書籍出版記念イベントウィーク 2017年11月より「建築情報学会」キックオフ公開企画会議を開催してから、2020年6月よりYouTubeでの「建築情報学会チャンネ
【暫定】コーダー歴3年で辿り着いた保守しやすいコーディング手法
未経験からコーダーとして仕事をし始めて2年が経過しました。 最初の頃はとにかくスピードややりやすさ、デザインの再現などを重視し、保守性は特に考えていませんでしたが、ページが多くなってきたり自分以外の人と一緒にコーディングする機会が増えるにつれ、当初とはまるで違う意識で書くようになった気がします。 自分のコーディング手法もまだまだ発展途上だとは思いますが、自分なりに保守しやすいであろうコーディング手法が確立されつつあるので、コーディングルールも兼ねて記事に残しておこうと思いました。 デザインが再現できればOKというコーディングから一歩進んだコーディングを目指す方の参考になれたら嬉しいです。 この記事の前提 コーディングに付随するいろんな用語が出てくるかと思いますが、詳しくは説明していません...。なので、今コーディングを勉強中であったり仕事でコーディングしたことない人にとっては、理解しづらい
ついに出た！2021年注目のWebデザイン人気トレンド9個まとめ
この記事では、これから2021年に注目したいWebデザインの人気トレンド9個をピックアップしています。 2021年のウェブデザインの傾向としては、どれも共通のテーマがあるように見えます。ハイテクなファンタジー感を目指すのではなく、よりリアルさを求めた新しいジャンルに世界中のウェブデザイナーが注目し始めています。 2021年のWebデザインは、これまでにないほどデジタルと日常を融合する方向に向かっており、普段の生活においてWebサイトが不可欠になってきていることを、反映しているのかもしれません。 よりクリエイティブなデザインを表現できるテクニックを、たくさんのデザイン事例と一緒にご紹介です。 コンテンツ目次 1. パララックス・アニメーション 2. ニューモーフィズム 3. アブストラクト・アート 4. 目にやさしい配色 5. 原因のためのウェブサイト 6. スクロール遷移 7. プロダクト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
