Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニック | コリス

2020/12/01 21 users コリス ブッダ レスポンシブ グリッド CSS Grid

Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニックを紹介します。 ヘッダ・コンテンツ・フッタを積み重ねたもの、12カラムのグリッド、メディアクエリなしのレスポンシブなど、実際によく使用されるレイアウトばかりです。 CSS Gridを使用すると、今まで少し複雑だったレ... 続きを読む

Bootstrap 4に備えよう！グリッドと基本エレメントを忠実に再現したデザイン用の素材 -GhostlyPixels | コリス

2015/08/28 58 users Photoshop PSD素材 コリス Bootstrap

先週リリースされた「Bootstrap 4 alpha」で採用されている12カラムのグリッドと基本エレメントを忠実に再現したPhotoshopのPSD素材を紹介します。 Bootstrap 4のはまだ見たことないので、世...記事の続きを読む 続きを読む

レスポンシブ対応の柔軟なグリッドを簡単に利用できる便利なフレームワークのまとめ | コリス

2014/03/18 94 users コリス スクリーン ユニット フレームワーク グリッド

レスポンシブ対応の柔軟なグリッドが使えるだけのごくシンプルなものから、実用的なさまざまなユニットまで用意された高機能なものまで、便利なスタイルシートベースのフレームワークを紹介します。 まずは、シンプルなグリッドだけのものから。 Aeon LESS対応、1KBのコードでレスポンシブ対応の12カラムのグリッドをつくります。 Ivory 320pxから1,200pxまでのスクリーンを想定したグリッドを... 続きを読む

[CSS]スマートフォンからデスクトップまで、Responsive Web Design用のCSSのフレームワーク -MQFramework | コリス

2011/11/09 91 users コリス タイポグラフィ font-face グリッド CSS

MQFrameworkの特徴 スクリーンサイズ 5つの異なるスクリーンサイズに対応。 320px, 480px, 768px, 960px, 1140px グリッド グリッドは12カラムをベースにし、さまざまなレイアウトに対応。 タイポグラフィ @font-faceを使ったタイポグラフィ。 使い方が簡単 スマートフォンからデスクトップまで対応したResponsive Web Designのサイトを... 続きを読む

[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム | コリス

2009/02/19 235 users グリッドシステム コリス マージン グリッド CSS

全幅970px（960+10px）の6カラムと12カラムのグリッドをベースにし、汎用的に展開できるように設計されたグリッドシステム「The Golden Grid」を紹介します。 The Golden Grid ベースとなる6カラムと12カラムのグリッドは、下記のようになっています。 6カラムの構成 1カラム：150px、マージン：10px 150*6+10*7=970px 12カラムの構成 1カ... 続きを読む