たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 - PhotoshopVIP

2020/08/18 445 users center PhotoshopVIP CSS スタイリング

モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。 この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。 上下中央揃え: place-items: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここ... 続きを読む

最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ | コリス

2018/01/26 310 users Flexbox コリス CSS 挫折 主流

CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。 最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、CSSレイアウトを考慮したよりモダンな方法を紹介します。 CSS Alignment Cheatsheet 記事: ... 続きを読む

CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA

2016/08/22 945 users float Flexbox ICS MEDIA CSS 主流

ICS MEDIA Web制作 2016/08/22 CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 « Prev ボックス要素の横並びをCSSで行う場合、これまでは float プロパティを使うのが主流でした。しかし、 CSS3の新機能「Flexbox」を使うと float よりも簡潔なコードで、ボックスの豊富なレイアウトが可能です 。本記事では... 続きを読む

あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | デザイン | POSTD

2016/08/05 579 users POSTD display プロパ inline Flex

CSSプロパティの1つであるdisplayはCSSレイアウトに用いるプロパティの中でも極めて重要なものです。block、inline、none、さらにtableやinline-blockは今ではかなり一般的になってきました。一方新たに登場したflexやgridはレイアウト用に作られたものです。これらについて紹介します。CSSプロパティの1つである display は、CSSレイアウトに用いるプロパ... 続きを読む

Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用 | Webクリエイターボックス

2015/08/18 274 users Flexbox WebKit ベンダープレフィックス 応用

以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要で... 続きを読む

これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス

2015/02/24 1232 users Fle Flexbox ブラウザー 前々 モダンブラウザー

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFle... 続きを読む

様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 | DesignDevelop

2011/10/29 1005 users DesignDevelop 随分 クリエイティブ レイアウト

様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイト... 続きを読む

CSSレイアウトの肝！ 表示・配置のプロパティ、14選 - ＠IT

2010/11/25 428 users プロパティ 配置 relative fixed static

positionプロパティ positionプロパティは、ボックスを画面上にどういった方法でレイアウトしていくかを設定するプロパティです。 値には、絶対配置の「absolute」、相対配置の「relative」、特に配置方法を指定しない「static」、スクロールしても位置が固定される「fixed」があります。 詳しくはコチラ　position ボックスのレイアウト方法を指定するpositionプ... 続きを読む

ブラウザだけでCSSレイアウトに対応したページをさくさく作ることができる『Drawter』 | 100SHIKI.COM

2008/11/27 424 users 必須 DOM要素 CSS 100SHIKI com

ブラウザだけでCSSレイアウトに対応したページをさくさく作ることができる『Drawter』 November 27, 2008 9:33 AM written by webmaster CSSとHTMLの知識は必須だが、慣れている人には超絶便利そうなツールのご紹介。 Drawterはブラウザ上でDOM要素を配置、さまざまなカスタマイズを施したあとにコードを生成してくれるツールだ。 つまるところ、C... 続きを読む

わりとシンプルで使いやすそうなCSSレイアウトのコード12選 | IDEA*IDEA

2008/06/26 253 users Gen Taguchi 起点 IDEA 個々 エントリー

わりとシンプルで使いやすそうなCSSレイアウトのコード12選 June 27, 2008 6:00 AM written by Gen Taguchi こうしたサイトはたくさんありますが、わりと使いやすそうだったのでメモ的にエントリー。よくあるCSSレイアウトのコード集です。 ↑ こんな感じで12種類用意されています。 こうしたコードは必要最小限のサンプルがあればいいですよね。ここを起点にして個々... 続きを読む

CSSのレイアウト作成に役立つ便利なリソースいろいろ - GIGAZINE

2007/12/18 723 users GIGAZINE カスケーディング リソース CSS 通り

最近のページやサイト作成に欠かすことのできない「CSS（カスケーディング・スタイル・シート）」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup... 続きを読む

IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 | POP*POP

2007/04/09 457 users POP CSS Layouts リソース IE7 放題

IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 April 9, 2007 10:12 AM written by 100SHIKI Apprentice II よくあるリソースではありますが、IE7にも対応したCSSレイアウトのご紹介。SEO的にも配慮されたコードなのだとか。 詳しい使い方は以下のとおり。 また、せっかくなのでこうしたレイアウト系サイトに... 続きを読む

CSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::

2007/01/22 848 users Listen STOPN 処方箋 To the

HTML,CSS,CSSハック,SEO,Web広告,Webトレンド等の話題を扱うkennsuのblogです。日常の話題はこちらへ「kennsuの行動記録」 Home｜ About｜ Archive｜ RSS feed 私事で大変恐縮ですが、今月（1月）の20日をもっていままで勤めていた会社を退職いたしました。 今までは「ちょっと見てください」や「うまくいかないんで助けてください～」と一声かけてくれ... 続きを読む

フリーで使えるCSSレイアウトのテンプレート配布サイト:phpspot開発日誌

2007/01/15 187 users phpspot開発日誌 テンプレート配布サイト CSS

intensivstation :: CSS Templates :: Templates フリーで使えるCSSレイアウトのテンプレート配布サイト。 次のようにサムネイル付きでCSSのテンプレートがダウンロードできます。 同じようなサイトはいくつかありますが、ボックスの中央寄せなど、他のCSSテンプレート配布サイトにないレイアウトなんかもあってなかなか使えます。 関連エントリ CSSレイアウトのサ... 続きを読む

WYSIWYGでCSSレイアウトを超簡単に作れる『CSS Grid Builder』 | p o p * p o p

2006/12/15 328 users WYSIWYG Apprentice December ブラ

WYSIWYGでCSSレイアウトを超簡単に作れる『CSS Grid Builder』 December 15, 2006 9:25 AM written by 100SHIKI Apprentice なにかと便利なYahoo!のUIライブラリーに「Grids CSS」なるものがあります。自分でつくると面倒なCSSのレイアウトをテンプレートで提供してくれるものです。 この「Grids CSS」、ブラ... 続きを読む

毎日考ブログ -Web屋のウェブログ- | Web標準に進路を取れ 第5回「テーブルレイアウトは罪なのか」

2006/07/05 178 users ウェブログ 進路 セル テーブルレイアウト レイアウト

テーブルレイアウトとはテーブルタグを、左のようにセルを切ってレイアウトするもの。そもそもはテーブルタグは表に使われるものであって、レイアウト目的で使うべきではないという意見はごもっともなものの、きっちり幅指定や余白指定ができてブラウザ依存しにくいことから、企業サイトはもとよりいろいろなサイトに使われておりました。いや、今でも立派に使われています。 対してCSSレイアウトは、上と同じレイアウトをHT... 続きを読む

CSSレイアウトのサンプル集:phpspot開発日誌

2006/04/17 124 users phpspot開発日誌 サンプル集

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques l... 続きを読む

CSSレイアウトの定石　WinIE6バグ回避法

2006/03/21 974 users 定石 CSS パク レイアウト HTML

てんぽ : CSSレイアウトの定石　WinIE6バグ回避法 CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-s... 続きを読む