CSS Gridはレスポンシブ対応のよく使うレイアウトにも便利！効果的に使用するポイントのまとめ | コリス

2018/02/08 81 users コリス サポートブラウザ CSS Grid レイアウト 能力

CSS Gridは今までに出来なかったレイアウトを実装するだけでなく、既存レイアウトをより簡単に実装する能力も備えています。サポートブラウザも十分になり、そろそろ既存レイアウトの実装方法を見直すタイミングかもしれません。 CSS Gridを使用して、3カラムや画像ギャラリーやカード型など、レスポンシブ対応のレイアウトを実装するテクニックを紹介します。 Common Responsive Layou... 続きを読む

CSS Gridで、Webページでよく使うレイアウトを実装したシンプルなHTML/CSSのテンプレートのまとめ | コリス

2017/11/26 81 users コリス Flexbox 全幅 ヘッダ グリッド

CSS Gridを使って、ヘッダ・フッタ付きの2カラム、3カラム、カード型といったレイアウトをはじめ、テキストはグリッドに揃えて画像は全幅で表示など、Webページでよく使うレイアウトを実装するシンプルなテンプレートを紹介します。 来年からは、CSS Gridで実装するのが主流になりそうですね。 CSS Grid Starter Layouts CSS GridとFlexbox、それぞれどう使いこな... 続きを読む

[CSS]アイテム数が不明でもカラム数に合わせてぴったりに配置するスタイルシート | コリス

2013/11/11 269 users コリス TETRIS CSS カラム数 倍数

下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。 もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。 Tetris & The Power Of CSS 基本となるHTMLは、リストでアイテムを配置します。 HTML ア... 続きを読む

３カラムになったGoogle+をGoogle Reader代わりの情報ハブとして使ってみる | Lifehacking.jp

2013/05/24 150 users Lifehacking.jp 情報ハブ Google+

Google I/O で全面的にアップデートがあった Google+ ですが、Pinterest を彷彿とさせる最大３カラムのレイアウト、チャットと統合されたハングアウト、そして自動的に写真を GIF アニメやパノラマにする機能など、情報やコンテンツを消費する場所として地味に便利になりつつあります。 「FacebookやTwitterほど友人やフォローしたい人がいない」という理由で敬遠されがちなG... 続きを読む

Macのメールアプリに期待の新星！「Airmail」がなかなか良い感じ！ | 男子ハック

2013/02/15 132 users メールアプリ airmail 新星 JUNP_N Gmail

@JUNP_Nです。Mac用メールアプリはあまり多くの選択肢はありませんでしたが、今回紹介する「Airmail」は良い感じで使いやすそうです！ 3カラムで見やすい！ラベル一覧も使いやすい！複数アカウント対応！ Airmail MacのメールアプリはSpparowを愛用してきましたが、ちょっとラベルが使いにくいなーとか色々と不満がありました。 AirmailはGmailのラベル一覧へのアクセスも簡単... 続きを読む

レスポンシブWebデザインで3カラムと2カラムを切り替えるためのCSS: 小粋空間

2012/10/24 60 users Media Queries メインコンテンツ 小粋空間 左右

レスポンシブWebデザインで、Media Queriesを使って3カラムと2カラムを切り替えるためのCSSの設定について紹介します。 １．やりたいこと まず、次のような3カラムレイアウトがあるとします。一番左がメインコンテンツで、その右側にサイドバーが2列並んだものです。 あるいは、左右にサイドバーがあるオーソドックスな3カラムレイアウト。 これらの3カラムレイアウトをデバイス幅によって2カラムレ... 続きを読む

一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ - jsdo.it - Share JavaScript, HTML5 and CSS

2011/07/21 2061 users display 一夜漬け Box jsdo.it なか

jsdo.itに投稿されたCSS3のコードのなかから、実用的なものからネタ系のものまで厳選して集めました。 Tweet jsdo.itに投稿された800以上のコードのなかから、実用的なものからネタ系のものまで厳選して集めました。 これだけ見ておけばCSS3で何ができるのか、何を勉強したらいいのかがだいたいわかる！（はず） display:boxを使ったレイアウト CSS3の数行で作る簡単な3カラム... 続きを読む

[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス

2008/10/30 509 users div コリス カラム クロスブラウザ対応 CSS

Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷で... 続きを読む

コーディングをさっと済ませるためのCSSテンプレート集 | CREAMU

2008/08/22 657 users リキッド キャプチャ CREAMU 2カラム コーディング

コーディングはさっと済ませたい。 そんなあなたにおすすめなのが、『Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time』。コーディングをさっと済ませるためのCSSテンプレート集だ。 以下にいくつかご紹介。 ↑のキャプチャはDynamic Drive。2カラムや3カラム、固定幅、リキッド... 続きを読む

ユーザーが2～3カラムや800pxか1000pxか等を動的に変更できるすごいJavaScript*ホームページを作る人のネタ帳

2008/03/26 454 users ネタ帳 ユーザー ホームページ

これは面白すごい。 なかなかさわり心地の良い動き。 しかも無料でダウンロードまでできるし、使えるし、なんともありがたい一品に、思わず勢いで記事にしてしまいました。 まずは以下のサンプルを触ってみると感動しますよ！（たぶん） サンプルデモは以下に 動的なhtmlショーケース 対応しているブラウザの幅も広いです。 # nternet Explorer 6, 7 # Firefox 1.5 + # Op... 続きを読む

mixiをXHTML CSSで組みなおす

2006/05/15 143 users mixi XHTML CSS 余白 ヘッダー 見栄え

授業内で、既存サイトをXHTML+CSSで組み直す練習をするのですが、生徒が提出したのが「mixi」を書き直したもので、とてもよく出来てました。 mixiはテーブルレイアウトで組まれていて、基本は3カラムだけど、もとがテーブルなだけあって、ヘッダーのメニューが少し複雑だったり、セクションごとのビジュアル的なデザインや、細かい文字の余白のとり方が難しい。 現在のCSSは「どんな見栄えも出来てしまう」... 続きを読む

スタイルシートによる崩れない　2カラム　3カラム・レイアウト

2005/09/21 872 users レイアウト 2カラム スタイルシート モジラ float

ネットサーフィンをしていると、floatを使って段組しいていて、レイアウトが崩れているサイトを時々見かけます。 ほとんどの場合が、左のみwidthを指定しているが、右に指定していない場合です。これはWINのIEでのみ段組されて表示されますが、モジラ等では、右部分は下に回りこんで表示されます。　ということで、ここでは上下にヘッダーとフッターを置いたサンプルを使いながら、メイン表示部分を左右2段にスタ... 続きを読む

スタイルシートによる崩れない　2カラム　3カラム・レイアウト

2005/09/18 1365 users レイアウト 2カラム スタイルシート モジラ float

ネットサーフィンをしていると、floatを使って段組しいていて、レイアウトが崩れているサイトを時々見かけます。 ほとんどの場合が、左のみwidthを指定しているが、右に指定していない場合です。これはWINのIEでのみ段組されて表示されますが、モジラ等では、右部分は下に回りこんで表示されます。　ということで、ここでは上下にヘッダーとフッターを置いたサンプルを使いながら、メイン表示部分を左右2段にスタ... 続きを読む