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... 続きを読む

Facebookの新ニュースフィードに企業ユーザーが備えるべきこと - ITmedia ニュース

2013/03/08 17 users ズボン Facebook ニュースフィード 刷新 デザイン刷新

メインのニュースフィードのスペースが広くなり、Facebook広告やスポンサー記事が表示されるスペースは相対的に目立たなくなるので、企業ユーザーは今後、「投稿の宣伝」を活用した方がよさそうだ。 米Facebookは3月7日（現地時間）、ニュースフィードの刷新を発表した。 今回のデザイン刷新では、従来の3カラムの中央のメインカラムのスペースが広くなり、相対的に右側の「Facebook広告」や「スポン... 続きを読む

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カラムレ... 続きを読む

広告の配置が参考になるブログメディアまとめ | ihayato.news

2012/08/05 20 users ihayato.news GIGAZINE 配置 参考 広告

昨日、時間があったので広告のデザインを変更してみました。今月のデータがどう変わるか楽しみです。 本気でブログメディアで飯を食っている先達たちのサイトは、見ているだけで参考になります。というわけでまとめてみました。 GIGAZINE 歴史の長いメディア。3カラムで、広告は両サイドに集中しています。ここまで来ると少しうるさいのが気になりますね。広告の数は1画面12個。 らばQ 3カラムのブログメディア... 続きを読む

一夜漬けで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カラム... 続きを読む

Googleリーダーの表示を縦置き3カラムにするSafari・Google Chrome拡張『3 Column Reader』 | Macの手書き説明書

2011/07/20 35 users Mac Googleリーダー 手書き説明書 Reader 表示

SafariとGoogle ChromeでGoogleリーダーの見た目を3カラムに変更する拡張です。 かなりネイディブアプリっぽくなりますし、アイテムリストが表示される縦幅が広くなりますので一度に視認できる記事タイトルの数が増えます。 Reederに似ていますね。 ちなみに日本版のGoogleリーダーのアドレスhttp://www.google.co.jp/reader/view/にアクセスしても... 続きを読む

ブログをリデザインしました。ついでにデザインについても考えてみた。 : Web Design KOJIKA17

2011/03/28 25 users Web Design KOJIKA17 デザイン ブログ

今回、色々突き詰めて考えながら、ブログのデザインを新しく設計し直しました。リニューアルしたポイントをまとめてみます。リニューアル前のデザインよくある感じのデザインです。ポイントは以下の通り。2カラム赤、白、黒が基本色1カラムにした理由。ブログサイトでよく見かけるレイアウトは2カラムや3カラムのレイアウトが非常に多いように思えます。 また私自信も2カラム、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段にスタ... 続きを読む