2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。 先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。 ウェブ制作の面で嬉しいことは、多くのCSSやJavaScriptの機能が使えるようになったことで
ロゴ画像のようにさまざまなサイズ、さまざまな形の画像を美しく揃えて配置するスタイルシートのテクニックを紹介します。 CSSのテクニックだけでなく、デザイン上の注意点も解説されており、実装時の参考になります。 Aligning Logo Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ロゴを配置する時のデザイン上の注意点 ロゴを配置するグリッドの実装 CSSブレンドモードを使用してホワイトの背景を削除する ロゴの最後の行の中央揃え 実装時の注意点 終わりに はじめに フロントエンドのデベロッパーとして、複数のロゴを配置したことがあるでしょう。この実装は最初は簡単に思えるかもしれませんが、ロゴを揃えたり、中央配置にする時に悩ますかもしれません。さらに、ロゴにはさ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。 フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。 A Clever Sticky Footer Technique by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテンツが十分な量でなくてもフッタを一番下に配置する方法 はじめに 「スティッキーフッタ」というと、ページをスクロールした時にぴたっと固定表示されるposition: sticky;を思い浮かべる人が多いと思います。 しかし、それはここで話すこととはすこし異なります。 「ス
DeepL を使って英語の PDF ファイルをレイアウトを保ったまま翻訳するツールを作りました✨→「あなたが神か」「これは凄い」
佐藤 竜馬 / Ryoma Sato @joisino_ DeepL を使って英語の PDF ファイルをレイアウトを保ったまま翻訳するツールを作りました✨論文読みが快適になります。ぜひご活用ください！ readable.joisino.net pic.twitter.com/6T5Hn0n7Al 2022-08-16 17:41:27
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
Paul Boag氏はユーザー体験デザイナー、サービスデザインコンサルタント、およびデジタルトランスフォーメーションのエキスパートです。非営利団体や企業向けに、デジタル体験の改善を目指す支援をしています。 あなたのWebサイトは、訪れるユーザーにあれこれ考えさせすぎてはいないですか？ ユーザーに大きな認知負荷をかけていて、それによってユーザーがあなたのWebサイトから離脱していっている、ということはありませんか？ もしそうならば、これは修正すべき問題で、実際に修正が可能です。 認知的な負荷による影響 この問題はWebデザイナーである私たちと明らかに密接に関連しています。ユーザーが１つのことに集中しすぎて、他の要素に気が付かなかった場合、Webサイトでの重要なCTA（コールトゥアクション）だって気づかれない可能性があるということです。そう、ものごとをクリーンかつシンプルに整理したいというデザ
報道番組のデザインに注目！ ニュース画面のテロップと「テレ朝UD」｜Fontworks | フォントワークス公式note
皆さん、「テレ朝UD」はご存知でしょうか？ テレ朝UDは、テレビ朝日の長年の経験に基づくテレビテロップの知見と強いこだわりを、フォントワークスのフォント制作の技術で実現したオリジナルフォント。2022年10月から以下の報道番組のテロップに使用されています。 2022年10月からテロップに「テレ朝UD」を使用している報道番組テレ朝UDの開発背景や、書体の特徴については、フォントワークスのコーポレートサイト「もじがたり」で紹介されていますので、ぜひそちらもチェックしてみてください。 そしてもじがたりの取材のため、テレビ朝日 コーポレートデザインセンターにお話を聞きに行くと耳に挟んだ編集部。これはじっとしていられません。「何か面白い話がうかがえそう！」と取材に同行させてもらいました。 テレビの現場の方にお話を聞けるなら、やはりデザインについて勉強させていただきたい！ 「ニュースの画面ってどんなふ
この記事はBASEアドベントカレンダー2023 7日目の記事です ! (12/8追記) 「基盤」という誤った表記を「基板」に変更しました。 まえがき唐突ですが、インターネットの世界に生きる私のような人間にとって、現代社会のあらゆる自己表現はテキストを介して行われる、といった面があります。 テキストを書かなければ人間関係も仕事も始まりません。 そしてそのテキストをひねり出すためになにが必要なのか。それはキーボードなのです。 古来よりキーボードというハードウェアにまつわる話題は様々ありましたが、近年そのなかでもメカニカルキーボードというカテゴリが大変な賑わいを魅せています。 自分もそんなメカニカルキーボードの世界に魅せられてジャンキーになってしまった人間の一人です。 しかし、キーボード界隈はさまざまな用語が飛び交っている割に、網羅的な情報が少なくとっつきにくい部分があるのもまた事実。 そこで、
3月末にリニューアルされた滋賀県のホームページ（HP）で不具合が多数発生した問題で、HPの設計（情報設計）に根本的な欠陥のある疑いがあることが、複数の専門家の指摘で分かった。県は緊急対策チームを設け「当初の不具合は改善できた」と説明するが、専門家は「このまま改善を進めても、問題は解消されないのでは」と疑問を呈している。 県広報課などによると、リニューアルはHPを整理し、スマートフォンなどでも見やすくしようと、2017年10月から検討を開始。費用は前のHPを作成した業者が提出した参考見積もりを基に、1000万円を18年度当初予算に計上した。提案内容も評価する「公募型プロポーザル方式」に応募した2社のうち、同県米原市の業者と昨年6月、約976万円で契約。この業者は、徳島県板野町の業者に再委託していた。 その際、HPを運用管理するシステム「CMS」を変更。約3万8000あったページを約2万200
モダンCSSでよく使用されるレイアウトを実装するまとめ
ヘッダ・フッタ・コンテンツ・サイドバー、フルページのレイアウト、最下部のフッタ、中央配置、カードなど、一般的なWebサイトやスマホアプリのUIをモダンCSSで実装する方法を紹介します。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。これからのプロジェクトに役立つCSSのテクニックを解説します。 Layout patterns 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSで実装するレイアウト アスペクト比が維持される画像カード 最大値と最小値を決め、伸縮するカード コンテナに合わせて最適化されるカード スペースに合わせて伸縮するパンケーキ 聖杯レイアウト ラインナップ 積み重なるパンケーキ RAM (Repeat, Auto, Minmax) メディアクエリなしのサイドバー これからの
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ヘッダの構造を確認 Flexboxの動作 ヘッダの実装バリエーション Flexboxでヘッダを構築するための便利なテクニック Flexboxで実装したヘッダのテンプレート 終わりに はじめに 私が初めてHTMLとCSSの基礎を学んだとき、Webサイトのヘッダを実装することは非常に難しい作業の1つでした。2014年頃のこ
CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。 ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあります。CSSにおけるレイアウトアルゴリズムについて解説します。 CSSの初学者をはじめ、長く携わっている人にも、気づきや学びがあると思います。 Understanding Layout Algorithms by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるレイアウトのアルゴリズム レイアウトアルゴリズムの確認 インライン要素の不思議なスペース 終わりに はじめに 数年
CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方
Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（margin: auto;）の仕組み、CSS Flexboxとオートマージンの効果的な使い方を紹介します。 Flexbox: Aligning with Auto Margins by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxにおけるオートマージンの役割 マージンについて理解する オートマージンが常に優先される オートマージンの効果的な使い方 F
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
2024.03.15 福岡フロントエンド勉強会 #1
レスポンシブの確認が簡単に！ iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター
iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChromeの機能拡張を紹介します。 デベロッパーツールのデバイスモード（command+shift+M）で各デバイスの表示を確認できますが、モバイルシミュレーターはさらに多くのデバイス、スクリーンショット・動画撮影など機能も充実しています。また、モバイルシミュレーターでデベロッパーツールを使用することも可能です。 無料で、多くのデバイスをサポートしているのがいいですね。 WinでもMacでも、ツールバーと右クリックから1クリックで簡単に起動できます！ Mobile FIRST レスポンシブの確認を簡単にできます。 スクロール・スワイプなどの操作をはじめ、リンクをクリックしてのページ移動もできます。
sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block;を加えると思います。 しかし、ブロック要素のwidthにfit-content値を使用すると、ブロック要素のまま（displayの値を変更せずに）コンテンツのサイズに合わせることができます。 「古い方法」「より良い方法」としたのは、上記画像の直訳です。古いからダメということではなく、より良い方法が使えるようになり、ケースバイケースで使用するのがお勧めです。 古い方法
object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック prefers-color-scheme media query prefers-reduced-motion media query text-emphasisプロパティ text-stroke, text-fill font-variation-settingsプロパティ will-changeプロパティ CSS Grid Layout (level 1) IEでCSS Gridを使用する時の既知の問題 IE 11ではプレフィックス「-ms-」が必要。 異なるプロパティ名（grid-template-columnsと-ms-grid-columns）が存在する。 レイアウトにgrid-rowsが必要。 Chrome, Firefoxとは、グリッドの数え方が異なる。 参考: IEで
データ視覚化やダッシュボードデザインは文字通り「視覚化」「デザイン」というくらいですので、目に見えているところだけを語られがちです。しかし、実は最も重要なのは徹底したオーディエンス（ユーザー）主義の意識、そして質の高い問いの設定です。なぜなら、オーディエンスは、つまらないと感じたり、わからないと感じるとすぐに離脱するからです。これはとても単純で当たり前とも言えるのですが、データ視覚化に夢中になっていると忘れがちなポイントです。 下図は、ダッシュボードに表れるものとその根底に潜む要素を模したものです。データ視覚化の深層部分はこのような氷山で説明できるのではと考えています。 上側半分はよく語られがちですが、下側は見過ごされがちです。ですので、本記事では、上側から下側まで一気通貫のチェックリストを紹介します。弊社では、プロジェクトの開始時から最後まで考えていることです。これらの要素は相互に影響し
先日ローンチされたばかり、500種類以上のランディングページのデザインをまとめたLandingsを紹介します。 ランディングページのデザインは、テーマやカラーでフィルタリングができ、アイデアを膨らませるのに役立つと思います。 Landings Landingsは今月の初めにローンチされたばかりのランディングページのまとめサイトです。現在のところ、500種類以上のランディングページのデザインがまとめられており、これからも定期的に追加していくとのことです。 Landings Landingsの利用は簡単で、登録など面倒なことは一切不要。 ページは無限スクロールに対応しているので、そのままスクロールしてもよし、上部でテーマやカラーでフィルタリングすることもできます。 フィルタリングを見てましょう、まずはライトテーマ。 各サムネイルをクリックすると、ページ全体のキャプチャ画像とランディングページの
ユーザー体験的なものをストーリーで整理し次にUIを作成するとき、閲覧・参照系より先に新規作成のUIから考える、というケースをときどき見かけます。 これ、すごい違和感あります。 ストーリーにおいてユーザーはまず新規作成するので、そのまま新規作成から着手してしまう、といったところでしょうか。 その場合、新規作成の目当てたるオブジェクトの姿が曖昧になりがちです。 そうすると、新規作成画面にしか存在しない特殊なレイアウトやコンポーネントや、特に意図がない冗長なモーダルができあがることが多いと感じています。 目当てが定まっていないうちから、それをどう作るか、どう編集するかを考えるのって難しくないですか？ 考える順番閲覧・参照系のUIを先に作ることで、それが新規作成や編集の目当てとなり、効率よく良いデザインしやすいと感じています。 例えば、私の場合、以下のように考えを進めることが多いです。 まずは「R
記事のテキストが多いサイトで見かけるレイアウト、記事は中央に固定幅、画像は幅いっぱいに表示するフルブリードレイアウトをシンプルなHTMLとCSSで実装するテクニックを紹介します。 記事の固定幅は自由自在、画像の幅いっぱいも最大値を制限するなども簡単にでき、いろいろな応用も効く実装テクニックです。 Full-Bleed Layout Using CSS Grid by Josh Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのレイアウトにおける問題 解決策 CSS Grid 子カラムの割り当て方 子をフルブリードにする まとめ はじめに 以前、誰もが実装しようと努力したゴールドスタンダードのレイアウトがありましたが、そのレイアウトを正しく実装するのは非常に困難でした。 そのレイアウトとは、聖杯レイア
imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im
CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout
CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。 Relearn CSS layout Relearn CSS layoutは、インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）などの著者Heydon Pickering氏（@heydonworks）とAndy Bell氏（@andybelldesign）のプロジェクトです。
CSSの難しさが分かるようになった人にお勧めの解説書、さまざまなレイアウトを実装する再利用性を向上させるCSSの設計方法 -Every Layout
CSSって面白いと思い始めた人、CSSの難しさが分かるようになった人、そしてCSSが大好物な人にお勧めの解説書を紹介します。 本書は、CSSの経験を積んでいるデベロッパー向けの解説書です。レスポンシブデザインを実現するレイアウトについて実装だけでなく、設計・管理・考え方について詳しく解説されています。 本書の元になっているのは、Relearn CSS layoutです。公開されたのは2019年ですが、現在でも人気が高いサイトで、さまざまなレイアウトを実装するCSSの設計方法について解説されています。その日本語版ともいえるのが本書です。 本書は来週発売！ 一足先に中身を紹介します。
これでもうモックアップ素材に困らない！スマホ、タブレット、デスクトップほとんどすべてのデバイスが揃ってる -Devices
スマホ、スマートウォッチ、タブレット、コンピュータ、ディスプレイなど、ほとんどすべてのデバイスが網羅されたモックアップ素材を紹介します。 iPhone 11 Pro, Google Pixel 3などの最新機種をはじめ、古い機種のモックアップ素材も揃っています。
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化します。そして、コンテナクエリは親要素のコンテナにもとづいてレイアウトを最適化します。コンテナクエリとは何か、デザイナーのワークフローにどのような変化をもたらすかを紹介します。 今まではビューポート（メディアクエリ）で変化するコンポーネントと影響を受けないコンポーネントの2種類でしたが、これからは親コンテナ（コンテナクエリ）で変化するコンポーネントも必要になります。 CSS Container Queries For Designers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブデザインの現状 コンテナクエリとは コンテナクエリを念頭に置いたデザイン デベロッパーとのコミュニケーション方法 レスポ
デザイナーじゃなくても！見やすいスライド資料のための5つのコツ【Before／Afterあり】｜spicagraph
見やすいスライド資料は事前準備と5つのコツさえ押さえればOKクライアントさんに向けてのプレゼンテーションや、社内共有向けの資料、セミナーでの登壇資料などで用いられる「スライド資料」。いざ作ってみると、「なんだか読みにくいな」「色やレイアウトがまとまらない」と感じ、苦手意識を持っている方は多いかもしれません。 でも、デザイナーじゃなくても！デザインツールを使わなくても！いくつかのコツを押さえるだけで見やすいスライド資料は作れます。 この記事では、見やすいスライド資料をデザインするコツを5つの章に分けてご紹介していきます。 「レイアウト」「カラー」など、気になるところから読んでみていただいても大丈夫です。 スライド資料の作成だけでなく、バナーやチラシなど、いろんなデザインにも役立つコツをイラスト付きでわかりやすく説明しているので、今作っているデザインに悩んでいる、デザイン勉強中、という方もぜひ
だれもがスマホからウェブサイトを閲覧するようにになったいま、あらゆる端末からでも見やすいサイトづくりが当たり前になっています。 この時に必要になるのが、レスポンシブWebサイトの制作です。 しかし、デスクトップやタブレット、スマホ用のレイアウトを個別に調整するとなると、「Web制作に時間がかかってしまう」と悩んでしまうひとも多いかもしれません。 あらかじめデザインやレイアウトが施されたテンプレートを利用することで、Webサイト制作を効率的に進めることができます。 今回は、商用利用できて無料ダウンロードできるHTML・Figmaテンプレートを公開しているTemplates Jungleをご紹介します。 ライセンスについて 素材を公開しているTemplates Jungleでは、HTMLとFigma用でライセンスが異なるため、注意が必要です。 HTMLテンプレートは、フッターに表示してあるクレ
2023年もCSSとUIの進化がすごいです！ 先日開催されたGoogle I/O 2023から、各ブラウザにサポートされたモダンCSSの新機能をはじめ、まもなくサポートされる機能まで、CSSの新しい機能を紹介します。 コンテナクエリ、スタイルクエリ、ダイナミックビューポート単位、カスケードレイヤー、ネスト、三角関数、広色域のカラースペースなど、これからのWebサイトやスマホアプリのUI制作に役立ちます。 What's new in CSS and UI: I/O 2023 Edition by Una Kravets, Bramus, Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに モダンCSSの新しいレスポンシブ モダンCSSの基礎機能の強化 カスタマイズ可能なコンポーネント CSSによるインタラクション 終わり
はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchrome 拡張機能がたくさんあります。 普段、フロントエンド開発時に私が使っている拡張機能を紹介したいと思います。 UI Build Assistant アイコンは IT 大学と面白いですが、こちらの拡張機能を使えば、ワンクリックで背景と線に色付けをしてくれて、レイアウトが見やすくなります。こちらの拡張機能を使うとマージンの調整等が簡単にできるようになりとても便利です。 また、作成者のしまぶーさんの Youtube 動画は、フロントエンド学習にとても有益なのでよく拝見させていただいてます。 OFF ON Responsive Viewer 次に紹介するのは、Responsive Viewer です
minmax()はCSSの関数で、要素サイズの最小値と最大値を定義することができます。カードを配置するグリッド、記事を中央配置で画像を幅いっぱいにするフルブリードなど、ページのレイアウトやUIコンポーネントの実装に非常に便利です。 CSS Gridにおけるminmax()関数の実用的で、便利な使い方を紹介します。 A Deep Dive Into CSS Grid minmax() by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Gridにおけるminmax()関数 minmax()のバリデーション minmax()をシンプルなグリッドに使用する auto-fitとauto-fillの相違点 minmax()の便利な使い方 考えなしに、auto-fitを使うことの弊害 終わりに
最近のWebページやアプリに適した、ラッパーの実装テクニックを紹介します。 ラッパーとはコンテンツを読みやすい幅に包むもので、CSSでのラッパーの実装、マージンやパディングの追加、中央揃え、ラッパーのバリエーション、FlexboxやCSS Gridとの組み合わせ方など、レイアウトの実装テクニックが満載です。 Styling Layout Wrappers In CSS by Ahmad Shadeed はじめに ラッパーとは ページにラッパーが必要な理由 CSSでのラッパーの実装 ラッパーのdisplayのタイプ ラッパー間のマージンの追加 全画面セクション内のラッパー ヒーローセクションにラッパーが必要ですか？ ラッパーを中央揃えにするか、左揃えにするか ラッパーのバリエーションに対するCSS変数の使用 display: contents;を使用する 流動的な背景に固定コンテンツを配置
Webサイトを訪れたユーザーが、もっとも重要視するのはUIデザインです。 ユーザーが直感的に操作でき、使いやすく、美しくデザインされたWebサイトは、長期的な成功につながります。 しかし、どんなUIデザインを作成したらよいか分からない、という声もよく聞きます。 そこで今回は、コピペで利用できるUIデザインライブラリ UIverse をご紹介します。 1200を超えるUI要素が公開されており、HTML/CSSをコピペするだけで、だれでも手軽に利用できます。 これらを押さえて、あなたのWebサイトをユーザーにとって魅力的で、使いやすくしてみましょう。 UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse UIverseではあらゆるプロジェクトに対応できる、HTML/CSSで作成されたオープンソースのUI要素を作成、共有できるウェブサイトです。 すべてのコードはM
amo on Twitter: "アイドルの写真集でこのレイアウトする奴ブックデザイナーの適正1ミリもねーから今すぐに廃業しろ！ https://t.co/ktTY5THQwJ"
アイドルの写真集でこのレイアウトする奴ブックデザイナーの適正1ミリもねーから今すぐに廃業しろ！ https://t.co/ktTY5THQwJ
Flexboxで実装する定番レイアウトのコードのまとめ
Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使用できます。 Evergreen CSS Flex Layouts With Live Demos by Miroslav Nikolov 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Flexboxで実装するスマホに対応したカードのレイアウト 2. Flexboxで実装する高さが等しい複数のカード 3. Flexboxで実装したカードの高さをコンテンツベースにする 4. Flexboxで実装するコンテン
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
スマホやWebページでよく見かけるUIコンポーネントのデザインと実装コードの無料ライブラリ -Eva Design System
Webサイト・スマホアプリ用のさまざまなUIコンポーネントのデザイン素材とそれを実装するコード、480醜類のSVGアイコンなどがすべてセットになったWebコンポーネントライブラリを紹介します。 UIコンポーネントを使用したReact NativeアプリやAngular UIライブラリもあり、オープンソースでさまざまなプロジェクトに利用できます。
CSS Gridを使用して、Webページでよく使用されるレイアウトやコンポーネントの実装で起きる問題を解決する実装テクニックを紹介します。 Modern CSS grid solutions to common layout problems by Kevin Pennekamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 動的な中央揃えのレイアウト レスポンシブ対応のマルチコラムのグリッドシステム 2方向のカードレイアウト まとめ はじめに レイアウトと構成は、CSSにおいて最も難しいポイントに一つです。特にレスポンシブを考慮する場合は、なおさらです。最近では、メディアクエリを使用しない実装が増えています。これはさまざまなブレイクポイントを使用することで、CSSの保守性が低くなるからです。 しかし、CSS Gri
最近のWeb制作に役立つ、CSSの便利ツール総まとめ
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 - ICS MEDIA
CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック
より良いタイポグラフィのための知られざるCSS
認知負荷の増加がWebサイトに与える悪影響
現代メカニカルキーボード用語の基礎知識｜simezi9
滋賀県HPの不具合 複数の専門家が設計上の欠陥指摘（毎日新聞） - Yahoo!ニュース
CSS Flexboxでヘッダを実装する最近のテクニックのまとめ
Web制作者はしっかりと理解しておきたい！ CSSにおけるレイアウトアルゴリズムを解説
CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法
IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ
データ視覚化/ダッシュボードデザインを成功させるための95のチェックリスト
Web制作者はブックマークしておくと便利！ ランディングページ500種類以上のデザインのまとめ -Landings
UIは閲覧画面からつくろう。｜Shino | Software Designer
シンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック
CSSコンテナクエリの登場で、デザインのやり方も考え方も大きく変わる
商用OKの無料HTMLテンプレート120個以上をダウンロードできる Templates Jungle
これでよく分かる！ 2023年、モダンCSSとUIの新しい機能のまとめ
フロントエンドエンジニアにおすすめchrome拡張機能 - Qiita
しっかり理解しておくと便利なCSSのテクニック、minmax()関数の使い方
CSS 最近のWebページやアプリのレイアウトに適した、ラッパーの実装テクニックを徹底解説
UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse
現場で使えるFlexboxレイアウト12選 | BUILD Journal
Webページでよく使用されるレイアウトに役立つCSS Gridの実装テクニックのまとめ