グリッドベースのサイトを作りたいなら『Tiny Fluid Grid』が便利 | 100SHIKIちと技術的なツールだが、メモ的にエントリー。 用途にもよるだろうが格子状のラインに沿って要素を配置したサイトを作りたいならグリッドベースのデザインが便利だ。 そう考えるとTiny Fluid Gridは知っておいてもいいだろう。 このサイトでは作りたいグリッドのサイズを指定するだけで必要なCSSファイルをダウンロードすることができる。 あとはこれをベースにサイトをデザインしていけばいいだけだ。 最近のサイト作りはスピード勝負のようなところもある。こうしたツールをうまく使いこなしたいですね。
かっちりとしたグリッドCSSが手に入る『the-golden-grid』 – creamu
グリッドレイアウトを簡単に実装したい。 そんなときにおすすめなのが、『the-golden-grid』。かっちりとしたグリッドCSSが手に入るページだ。 このGoogle Codeのページでは、↑のようなグリッドデザインを作るためのCSSが紹介されている。 動作確認も以下のブラウザで行っているとのことで安心だろう。 IE 6/7, Firefox 3, Opera 9.62, Safari 3.2.1 (Win), Chrome 1.0 ライセンスはGNU General Public License v2となっている。 かっちりとしたグリッドCSSが手に入るページ、チェックして参考にしてみてはいかがだろうか。 the-golden-grid 昨日はちょっとしたイベントへ。楽しかったよ。あとでエントリー書こうかな。
CSS-Based Tables: Modern Solutions | Smashing Magazine
Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This article was written back in 2008 when the concept of responsive web design hasn’t been created just yet. You may want to check
CSSレイアウトテクニック"偽装絶対指定" - A List Apart | エンタープライズ | マイコミジャーナル
A List Apart - Faux Absolute Positioning CSSでポジションを指定する方法は大きくわけてfloatを使う方法と絶対位置で指定する2つの方法がある。多くのサイトではヘッダとフッタを伴うカラムレイアウトを採用していることが多い。絶対位置指定では縦方向にコンテンツが成長するタイプのレイアウトでフッタの位置を指定できないという問題がある。このためfloatレイアウトを使うわけだが、こちらでは予期しないコンテンツの内容変更によって予定していたポジションからずれてしまうことがある。とくにIEではwidthの挙動に問題があるため制御するのがきわめて難しいという状況だ。 Eric Sol氏はこうした現状に対して新しい指定手法を考案したとし"Faux Absolute Positioning"としてA List Apartにおいて紹介している。同氏はより自由にドラッグ
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
100%ピュアCSSのレイアウトサンプルが見られる『750 pixel Pure CSS Layouts』 – creamu
CSSのサンプルから簡単にサイトが作りたい。 そんなあなたにおすすめなのが、『750 pixel Pure CSS Layouts』。100%ピュアCSSのレイアウトサンプルが見られるサイトだ。 このサイトでは、750px、900px、および100%（ブラウザいっぱい）のサイズのCSSレイアウトがたくさん紹介されている。 サイドバーも左だけのもの、右だけのものや、3カラム、4カラムなどがあってとても参考になる。 CSSはリンク先のソースを見ればOKだ。 100%ピュアCSSのレイアウトサンプルが見られるサイト、チェックしてぜひ使ってみてはいかがだろうか。 いろいろとインテリアショップを見に行って部屋のレイアウトを変えてみた。すごくよくなって気持ちいい☆
MTで実践 - CSSのモジュール化による管理方法と遊び方 - 3ping.org
1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。 Movable Type テンプレート mt.vicuna Movable Typeのデフォルトソースを1から書き直し、シンプルで軽量、XHTML1.0 Strict DTD準拠です。基本的には1つのテンプレートソースに対して好みのスキンをあてこむ形で色々なデザインのウェブログが作れるようになっています。ごちゃ
DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌
Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、 中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。 最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。 垂直方向に、100px のdiv要素が配置される感じです。 <html> <head> <style type="text/css">
The Man in Blue > Experiments > footerStickAlt
Experiment footerStickAlt Date created 25 August, 2005 Date last modified 29 August, 2005 Discussion Visit the discussion The examples linked from this page expand upon a technique published by solarDreamStudios called footerStick, that allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest. Beca
一行あたりの文字数を制限するリキッドレイアウト - 2xup.org
2006-12-20T02:12:30+09:00 今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。 いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。 div#container { width: 80%; } px で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。 fl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/01/web-layout.html