ひげろぐ » デザイン http://brass.to/blog 技術者として仕事人としての思うところや覚え書きやらです Fri, 30 Jul 2010 10:07:43 +0000 http://wordpress.org/?v=2.8.4 ja hourly 1 メンテしやすいCSSを書くための本 http://brass.to/blog/xhtml_css_toranomaki.html http://brass.to/blog/xhtml_css_toranomaki.html#comments Thu, 18 Sep 2008 08:22:25 +0000 akahige http://brass.to/blog/?p=155 8月の頭くらいにちょっと行き詰まっていたことがあった。
それはごちゃごちゃになったCSSのメンテナンスだ。

作って後はノータッチでいいのであれば適当にCSSを書いて行っても特に問題はないのだが、継続的に変更を加えていくような場合には困ったことになる。というか実際困った。
なので後々のメンテナンスのことも考えてCSSを書いて行く必要があるということを痛感したのだけれど、じゃあそれってどうしたらいいのと言われると全く分からなかった。

そんなときにmoongiftの中の人に紹介してもらったのが以下の本。
CSSデザインをする上でのガイドラインやHowTo、Q&Aにトラブルシューティングなどが載っていて、特にガイドラインとHowToの部分はズバリ欲しい情報だった。

Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS)
Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS)
posted with amazlet at 08.09.18
大藤 幹
毎日コミュニケーションズ
売り上げランキング: 2586
おすすめ度の平均: 5.0

5 さすがの高水準。文句のない信頼性。
5 テーマ毎に無駄なくまとめられた珠玉の一冊
5 要所がまとめられている

Amazon.co.jp で詳細を見る

すぐに理解できて非常に参考になったのが以下の二つの項目。

  • div要素を使いすぎない
  • id属性とclass属性を適切に使う

HTMLやCSSのソースもできるだけシンプルを保ち、id属性とclass属性の意味や優先順位をちゃんと理解して使うだけでだいぶ違う。
既存の成果物に完全に反映できてはいないが、壁にぶち当たったときに都度適用していくことでだいぶやりやすくなった。

CSSの書き方というと文法や望んだレイアウトを実現するためにはどうするかと言ったことを紹介してる本は多いが、実際的なガイドラインを紹介しているものは少ない。
そう言う意味でCSSを書く全ての人にオススメできる本。簡にして要を得ていてさくさく読み進められる点もよい。

]]> http://brass.to/blog/xhtml_css_toranomaki.html/feed 0 Yahoo! UI Libraryで3カラムレイアウトとかも http://brass.to/blog/yui_css_grids_2.html http://brass.to/blog/yui_css_grids_2.html#comments Sun, 13 Apr 2008 08:36:40 +0000 akahige http://brass.to/blog/yui_css_grids_2.html Yahoo! UI Libraryで簡単に2カラムレイアウトの続き。
もうちょっとCSS Gridsの世界に踏み込むと3カラムのレイアウトとかそれ以上に複雑なレイアウトを作ることができる。
これもまたそんなに難しくはない。

グリッドでブロック要素を任意に横分割

ブロック要素の中に以下のHTMLを書くとブロック要素がさっくりと横分割される。
これを使うことによって3カラムレイアウトとか簡単にできる。

<div class="yui-g">
  <div class="yui-u first"></div>
  <div class="yui-u"></div>
</div>

class名を変えることで分割割合を変えられる。

.yui-g 1/2 – 1/2
.yui-gb 1/3 – 1/3 – 1/3（3分割）
.yui-gc 2/3 – 1/3
.yui-gd 1/3 – 2/3
.yui-ge 3/4 – 1/4
.yui-gf 1/4 – 3/4

.yui-gbを使った3分割の時は以下のような構造にする。

<div class="yui-gb">
  <div class="yui-u first"></div>
  <div class="yui-u"></div>
  <div class="yui-u"></div>
</div>

このときyui-gとかyui-uを指定した要素にmarginやpaddingを設定してしまうとレイアウトが崩れるのでそれだけ注意。

入れ子も自由自在。

<div class="yui-g">
  <div class="yui-u first">
    <div class="yui-g">
      <div class="yui-u first"></div>
      <div class="yui-u"></div>
    </div>
  </div>
  <div class="yui-u"></div>
</div>

これを応用すると複雑なレイアウトも割と簡単。
YUI素敵だ。

参考

]]> http://brass.to/blog/yui_css_grids_2.html/feed 0 Yahoo! UI Libraryで簡単に2カラムレイアウト http://brass.to/blog/yui_css_grids.html http://brass.to/blog/yui_css_grids.html#comments Wed, 26 Mar 2008 14:42:11 +0000 akahige http://brass.to/blog/yui_css_grids.html Yahoo! UI Library（以下YUI）のCSS Gridsが便利でよく使っているので簡単に紹介してみる。
YUIを使うとサイドバーつけたりとかでよく使う2カラムのレイアウトがさくっとできる。

次はコピペするだけで試せるサンプルコード。（grids.cssが入手済みじゃないとダメか）

<html>
<head>
  <title>YUI Grids CSS </title>
  <link rel="stylesheet" type="text/css" href="grids.css">
</head>
<body>
<div id="doc" class="yui-t1">
  <div id="hd"><!-- ヘッダ --></div>
  <div id="bd">
    <div id="yui-main">
       <div class="yui-b" style="border: 1px solid #000;">
         本文ほげほげ
       </div>
    </div>
    <div class="yui-b" style="border: 1px solid #000;">
      この部分は
      <!-- .yui-t1,.yui-t2,.yui-t3では左に表示 -->
      <!-- .yui-t4,.yui-t5,.yui-t6では右に表示 -->
    </div>
  </div>
  <div id="ft"><!-- フッタ --></div>
</div>
</body>
</html>

yui-t1の数字のところを1～7まで変えるだけでいろいろかわるのでちょっと面白い。
またその手前のdocをdoc2,doc3,doc4と変えることでページの横幅が変わる。

これだけでもう手探りで使っていけると思うのだけど以下一応解説。

  • Yahoo! UI Libraryの入手
  • 基本のHTML構造を作る
  • ページの横幅を決める
  • 基本のレイアウトを決める（1カラム or 2カラム）

Yahoo! UI Libraryの入手

ライブラリの入手は以下から。これを書いてる時点でのバージョンは2.5.1。

The Yahoo! User Interface Library (YUI)

この中に含まれているgrids.cssかreset-fonts-grids.cssを読み込んで使う。
ここではどちらを使ってもよい。

基本のHTML構造を作る

YUIのCSS Gridsを使うにはそれに沿ったidやclassを持ったHTML構造にする必要がある。
基本は見たまま以下の通り。

<html>
<head>
  <title>YUI Grids CSS </title>
  <link rel="stylesheet" type="text/css" href="grids.css">
</head>
<body>
<div id="doc">
  <div id="hd"><!-- ヘッダ --></div>
  <div id="bd"><!-- 本文 --></div>
  <div id="ft"><!-- フッタ --></div>
</div>
</body>
</html>

ここでの要点はこれだけ↓。

  • docというidを持ったdivを作る。この要素がページ全体を囲む。
  • その中にhd、bd、ftというidをもったdivを作る。それぞれコンテンツのヘッダ、本文、フッタになる。

ページの横幅を決める

ページ全体を囲むdiv要素のidを変えるとページの横幅が決まる。

<div id="doc2">
doc 横幅 750px
doc2 横幅 950px
doc3 横幅 100%
doc4 横幅 974px (2.3.0以降)

基本のレイアウトを決める（1カラム or 2カラム）

ページ全体を囲むdiv要素にclassを指定することで基本的な1カラムもしくは2カラムのレイアウトができる。

<div id="doc" class="yui-t1">

指定可能なバリエーションは以下の通り。

.yui-t1 2カラム 左160px
.yui-t2 2カラム 左180px
.yui-t3 2カラム 左300px
.yui-t4 2カラム 右180px
.yui-t5 2カラム 右240px
.yui-t6 2カラム 右300px
.yui-t7 1カラム

2カラムのレイアウトにした場合はbdの中身に以下のようなHTML構造にする。
yui-mainというidを持ったdiv要素１つとyui-bというclassを持ったdiv要素が２つ追加になる。

<div id="bd">
  <div id="yui-main">
     <div class="yui-b">
       <!-- 本文ほげほげ -->
     </div>
  </div>
  <div class="yui-b">
    <!-- この部分は -->
    <!-- .yui-t1,.yui-t2,.yui-t3では左に表示 -->
    <!-- .yui-t4,.yui-t5,.yui-t6では右に表示 -->
  </div>
</div>

yui-mainがページメイン要素であることを示している。たぶん。
yui-bのbはブロックであることを示している。たぶん。

自分も最初こういうところで考えたけどあまり深くに考えずお約束的に覚えてしまうのがよいと思われる。

追記

続編っぽいの書きました。

Yahoo! UI Libraryで3カラムレイアウトとかも

]]> http://brass.to/blog/yui_css_grids.html/feed 0 ノンデザイナーズ・デザインブック http://brass.to/blog/non_designers_design_book.html http://brass.to/blog/non_designers_design_book.html#comments Thu, 13 Sep 2007 14:25:02 +0000 akahige http://brass.to/blog/%e3%83%8e%e3%83%b3%e3%83%87%e3%82%b6%e3%82%a4%e3%83%8a%e3%83%bc%e3%82%ba%e3%83%bb%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%83%96%e3%83%83%e3%82%af.html 最近はひとりでサービスを作っているので、デザインとかも自分でぼちぼちやってるわけですが、やっぱりそっち方面のセンスなどはさっぱりなわけです。

そんなデザイン音痴の自分でもすっと腑に落ちてわかりやすかったのが『ノンデザイナーズ・デザインブック』に紹介されている以下の原則。

  • 近接の原則
  • 整列の原則
  • 対比の原則（コントラストの原則）
  • 反復の原則

これらの原則を知らないと何か変だと感じても何が変なのかわからない。
でもこれらの原則を知っていることで変なところがわかって直せるようになる、という話。

たしかに理屈としてわかっていると、イマイチと感じた際にチェックするポイントが見えて来やすい。
気の利いたデザインはできなくても、まあこんな風にしとけば悪くはないだろう、みたいな修正をすることは出来るようになった気がしてます。
気がしてるだけですか、そうですか。

 

ノンデザイナーズ・デザインブック Second Edition

 

ノンデザイナーズ・デザインブック Second Edition

posted with amazlet on 07.09.14

ロビン・ウィリアムズ
毎日コミュニケーションズ (2004/02/28)
売り上げランキング: 3149

Amazon.co.jp で詳細を見る



この本はいつか薦めるエントリを書きたいなー、と思っていたら最近これに関する勉強会のエントリがあがったので、いい機会と紹介してみます。

以下のページで公開されているPDFの資料もよくまとまっています。

]]> http://brass.to/blog/non_designers_design_book.html/feed 0