[B! レイアウト] oidyjfのブックマーク

oidyjf id:oidyjf

レイアウトに関するoidyjfのブックマーク (4)

2/3 floatを使わずにCSSのtable-cellを使う段組の作り方 [ホームページ作成] All About
floatを使わずにdisplayプロパティで段組を簡単に作成する方法 displayプロパティには「table」や「table-cell」という値を指定することができます。この2つの指定を使えば、表を作成する感覚で、簡単に段組(マルチカラム)レイアウトを作成できます。ここでは下図のような、よくある3段組を作成することを例にして説明します。以下の手順で記述してみて下さい。 1. HTMLを記述する(外側ブロック＋各段のブロックを必要なだけ列挙) 2. 段組構成に見せるCSSを記述 2B. 「段組の周囲」や「各段の間」に隙間を空ける 3. 狭い画面では段組を自動解除したい場合の記述最低限必要な記述は1と2のみです。それ以降は必要に応じて追記すれば良いオプションです。 1. HTMLを記述する(外側ブロック＋各段のブロックを必要なだけ列挙) まずはHTMLを書きます。ここでは、段を構成する
oidyjf 2018/03/18
レイアウト
リンク
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。【アップ
oidyjf 2015/04/24
レイアウト
リンク
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日で
oidyjf 2014/10/03
CSS

レイアウト
リンク
[CSS]6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす
スタイルシートで実装する6つの代表的なCSSレイアウト方法、それぞれ実例を見ながら、その長所と短所を紹介します。 Pros And Cons Of 6 CSS Layout Patterns: Part 1 Pros And Cons Of 6 CSS Layout Patterns: Part 2 [ad#ad-2] 下記は各ポイントを意訳したものです。 Fixed-Widthレイアウト Fluid/Liquidレイアウト Elasticレイアウト Hybridレイアウト Responsiveレイアウト Fluid/Elastic Gridsレイアウト Fixed-Widthレイアウト Firxed-Widthは、幅の全体を絶対値（px）で指定するスタティックなレイアウトです。このレイアウトを使用する場合には、ユーザーのために最適な幅を調査し、設定する必要があります。典型的な例では大き
oidyjf 2014/10/03
CSS

レイアウト
リンク
1