情報科学屋さんを目指す人のメモ(FC2ブログ版)

何かのやり方や、問題の解決方法をどんどんメモするブログ。そんな大学院生の活動「キャッシュ」に誰かがヒットしてくれることを祈って。

ブログ内検索

スポンサーサイト このエントリーを含むはてなブックマーク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサー広告 | 編集
このエントリーをはてなブックマークに追加 Clip to Evernote

Yahoo! UI Library (reset.css,fonts.css,grid.css,base.css)を使ってみた このエントリーを含むはてなブックマーク

Yahoo! UI Library(YUI)の

  • reset.css
  • fonts.css
  • grid.css
  • base.css

を使ってみた。

reset.cssは、ウェブブラウザ間の表示の差異をリセット(初期化)してくれる。これにより、ブラウザ間の表示の違いを意識しながらコーディングする手間が省ける。

fonts.cssは、OS間のフォントの違いを処理し、フォントサイズや行の高さなど、フォントにまつわる初期設定を行ってくれる。

grid.cssは、フロートレイアウトの様々なパターンが既述されていて、クラスやIDをてきせつに設定することによって、詳細なCSSを自分で記述することなくレイアウトできる。

base.cssは、reset.cssなどによりまっさらになっているCSSに対して、必要最低限の設定を与えるものである。base.cssを利用しないと、かなりの量の設定をゼロから書くようなものなので、これをとりあえず適用しておくことにより、その手間を省くことができる。

要するに、これらをまとめると、「余計なことを気にせずにCSSが書ける」と言うことである。気楽にCSSが書けるというのもそうだし、何より、Yahoo!が作ったんだからという安心感がある。また、reset.cssに当たるものはデザインする上で必要不可欠とも言えるので、どうせ作るなら、既存の安心感のあるreset.cssを利用したい。

使い方は簡単。ものすごく要点を絞って書くと

まず、たとえばhttp://developer.yahoo.com/yui/grids/index.htmlのDownloadからYUIライブラリ一式をダウンロードする。

次に、ダウンロードファイルを解凍して、yui>build>reset-fonts-grids>reset-fonts-grids.cssと、yui>build>base>base.cssの2ファイルを適当なところへコピー(サーバ上など)

その状態で

<link href="reset-fonts-grid.css" rel="stylesheet" type="text/css">
<link href="base.css" rel="stylesheet" type="text/css">

とするだけ。ちなみに、この2つの順番は守らないといけないみたい。

とりあえずこんなところで十分効果が発揮されます。いちよ、これらのcssはライセンスで守られているので、注意。でも、一言で言うと、ライセンスの文章が入っていれば使ってOKな感じ。cssの本文にライセンスについての記載とリンクが記述されているので、それだけでOKかと。詳細は本家参照。

こんなのを使いつつ、まだCSSやらHTMLやらの理解が微妙。先輩が使ってて、W3Cの定めるHTMLとCSSの全項目が掲載されているこの定番本 が手放せない…基本ばっかなのに。いや、その分いい本なんだと思っておこう。

HTML+CSS | コメント:0 | トラックバック:0 | 編集
このエントリーをはてなブックマークに追加 Clip to Evernote

この記事のコメント

コメントの投稿 エントリの新旧に関わらず、極力18時間中に返信します。














この記事のトラックバック

トラックバックURL:
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。