レスポンシブなサイトで高さが可変のブロック要素の一覧をレイアウトする際にてこずったので、課題になったこととその解決方をメモしておきます。ニュースサイトなどに良くあるサムネイル画像とタイトルのブロック要素の一覧で、画面サイズに合わせてカラム数が変わる以下のようなレイアウトです。ちなみに、Flexboxを使わないやり方です。nth-child()とclearを使った方法、inline-blockを使った方法、さらに、flexboxを使った方法の3つをまとめてみました。 レイアウトの条件 レイアウトの条件を整理しておきます。 表示件数が変わる 表示件数が変わる場合でも同じHTMLとCSSでレイアウトする ブロックによって高さが異なる 画面サイズに合わせてカラム数を変える 上の条件だとli要素をfloatしてメディア・クエリで画面ごとに幅を指定すれば簡単にできそうです。ところが、ブロックの高さが変
スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多様化しています。 スマホ、タブレット、デスクトップ、ワイドスクリーンの異なるスクリーンサイズのレスポンシブ用に、CSSで使いやすいブレイクポイントを的確に定義する方法を紹介します。 The 100% correct way to do CSS breakpoints 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ブレイクポイントで混乱する原因 Tips 1: ブレイクポイントを的確に取得する Tips 2: ブレイクポイントの範囲に分かりやすい名前をつける Tips 3: ブレイクポイントを定義するコード ブレ
![[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/5176fdd76b36b4905191eb2722927a3501f2878d/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017021910.png)
先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (
![[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/fb1be3512a3aeabea077fd7fe6b2e35582a341bd/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072201.png)
CSSだけでレスポンシブで画像ナビゲーションをテキストに切り替える グローバルナビゲーションはPCだと画像で作る場合が多いですが、スマホだとCSS3がフルに使えたりフォントが綺麗だったりするので、画像ではなくテキストで表示したいことがあります。 そこでレスポンシブで画像をテキストを切り替える方法をご紹介します。 投稿日2012年11月09日 更新日2012年11月09日 html & css 画像をリストで配置した他にaタグにdata属性でaltと同じテキストを記述してます。 html <nav> <ul> <li><a href="#" data-label="ホーム"><img src="img/nav01.png" alt="ホーム" width="108" height="58" /></a></li> <li><a href="#" data-label="サービス案内"><im
そのままサイト制作に使ってももちろん便利、自分用のテンプレートを作るための勉強にも役立つCSSベースのフロントエンド用フレームワークを紹介します。 一部のフレームワークで古いIE用にmodernizr.jsやrespond.jsなどを使用しています。 Kube Kube -GitHub レスポンシブ対応、プロ仕様のシンプルでミニマルなフレームワーク。 ファイルサイズ 15.6KB 対応ブラウザ Chrome, Safari, Firefox, Opera, IE8+, and スマフォ用ブラウザ ライセンス 個人・商用ともに無料利用可 Base Base -GitHub レスポンシブ対応、ベーシックなUIエレメントやグリッド揃ったフレームワーク。LESS, Sassだけでなく、.htaccessを含むサイト制作用のフォルダやグリッドのPSDもセットになっています。 ファイルサイズ 3KB(
CSS for clean and fast web apps. Soooo Fast!Performance is our #1 goal. Every component we design is benchmarked for performance. You can see our results. Components GaloreWe have the building blocks to get you up and running fast. Our growing set of components were born from CSS. ThemeableIs that even a word? It should be! We love our theme, but we don’t want to hit your brand over the head with
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
