全幅970px（960+10px）の6カラムと12カラムのグリッドをベースにし、汎用的に展開できるように設計されたグリッドシステム「The Golden Grid」を紹介します。 The Golden Grid ベースとなる6カラムと12カラムのグリッドは、下記のようになっています。 6カラムの構成 1カラム：150px、マージン：10px 150*6+10*7=970px 12カラムの構成 1カラム：70px、マージン：10px 70*12+10*13=970px
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
Navigation Design Showcase Navigation Design Showcaseは現在49個登録されており、Elements of Designには他にもウェブサイトでよく使うエレメントのデザインが収集されています。 コメントの入力欄のデザイン集 コメントのデザイン集 カレンダーのデザイン集 打ち出しエリアのデザイン集 コード表示のデザイン集 動画プレイヤーのデザイン集 フッタのデザイン集 アイコンのデザイン集 画像のキャプションのデザイン集 ログインフォームのデザイン集 ナビゲーションのデザイン集 価格表のデザイン集 登録フォームのデザイン集 引用箇所のデザイン集 検索フォームのデザイン集 見出しのデザイン集
日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipの“BE SUPER”なストーリーをシェアしています。
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
いつ見てもこのサイトだけは、狂気の沙汰じゃない情報提供ブログだと思う。 ここで最近紹介されたのが Best of May/June 2007 という記事。 ほんといつもここのまとめは尋常じゃないですね。 というわけで今回はこの記事のWEB制作に使えそうな14個のリンクを抜粋して紹介。 紹介する量は元記事の5分の1にも満たないですから、英語力のある方はぜひとも参考するべきページの一つですよ。 （といっても私自身が英語苦手なので偉そうなことは一切言えません） 詳細は以下に。 色イメージなど プロの画家からの色のインスピレーション すばらしい芸術家から一握りの芸術を選び抜いた。 無料画像検索エンジンPicFindr 無料画像をガンガン検索します。 使い方は前回書いておりますので参考に。 ツール Internet Explorerの開発者のツールバー1.0 マイクロソフトはインターネットエクスプロ
ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装：CSS3< 角丸の実装：古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威：Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
