MdN Design｜総合情報サイト
ここでは、YUI Grids CSSを使ったレイアウトのポイントを見ていこう。はじめに、Yahoo! DEVELOPER NETWORKからYahoo! User Interface Library（以下、YUI）ライブラリをダウンロードする【1】。解凍後のソースにはドキュメントやサンプルが含まれるが、実際に必要となるのは「build/reset-fonts-grids/」だけだ。このCSSファイルには見出しや段落などに適用されるデフォルトスタイルをリセットできるReset CSSと、ブラウザやOS間のフォントサイズの差異をなくすFonts CSSが同梱されている。Grids CSSでは要素の幅をem値で指定しているため、「build/grids/」を単独で利用する場合は＜body＞タグのフォントサイズを13pxに合わせておく必要がある【2】。 【1】YUI Grids CSSのページ（d
MdN Design｜総合情報サイト
最後に、カスタマイズを支援するオンラインサービスについて触れておこう。YUI Grids CSSのページからリンクされている「YUI:CSS Grid Builder」【1】では、基本的な段組みの設定をマークアップ不要で実現できる。はじめに、Toolboxにある「Body Size」から全体の幅を選択する。このとき、「Custom」を選択すると任意の幅を指定することも可能だ【2】。 【1】「YUI:CSS Grid Builder」（developer.yahoo.com/yui/grids/builder/）の画面。Toolboxを利用してカスタマイズしていく 【2】パーセントまたはピクセル値を指定して、任意のサイズを指定することもできる サイドバーが必要な場合は、「Body Columns」で表示位置やサイズを選択する。メインコンテンツ部分のカラム数は「Split Content」で指
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
