96's blog

WEBサイト制作科 6ヶ月コース

CSS04

CSSレイアウトについて追記メモ

  • リセットCSS htmlもリセットしているケースもあるが、しなくてもいい。
  • paddingを指定する時は、widthの値がpaddingの分を引いているか注意。
  • widthを指定しない状態では、その要素が取れる最大の幅で表示される。
  • float要素を含むwrapper要素は必ずwidth値を指定する。

打つべし

  • 頭でわからなくてもどんどん打って、数値を変えて、体感して覚える。
  • CSSの見本サイトでさまざまなパターンのレイアウトやソースを見ることができる。
  • W3Cのバリデート機能を利用しよう。
  • アウトライン構造を守って文章構造を適切に設定し、あとはやりたいように自由に表現する。
  • 自由に表現するためには技術が必要。

スクリーンキャプチャー

  • windows7のスニッピングツール
  • FireFoxならPearl Crescentをインストール。Flashのキャプチャーも可能。

演習H02・C02

  • class属性を使う練習
  • idとclassの使い分け方は、
    • id=レイアウト構造の要素に使う(#container、#wrapperなど)。
    • class=文字装飾の要素に使う(.sectionなど)。
  • 従来div class="section"と記述されてきたものは、HTML5からsectionタグを使うことができる。
  • text-indent:1em;=文頭を位置下げる。スペースであけない。
  • background-position:=左からの距離と上からの距離を指定して背景画像の表示位置を操作できる。マイナスに指定することもできる。
  • border-radius:=領域の角を丸めて表示。半径を距離で指定。
  • letter-spacing:文字間隔を調整できる。見出し要素に使う。
  • h1は画像ではなく文字で。文章構造としては文字が適切。
  • 「All right Reserved」は、文章や画像のどれか1つでも借りてきている場合は表示してはいけない。
  • サイトに表示する内容を分類し、共通項目はCSSの上位で指定し、以下の各項目で個別の指定をする。(=継承)
  • コメントアウトを必要以上に書き込むのは時間のむだ。
  • 仕事ならこのぐらいのページを30~40分で作る。
  • webの仕事の99%は文字を扱う。画像は1%。デザインを専門にやる仕事はほんの一握り。
  • サイト制作の仕事で、クライアントから材料を渡されて組み立てるだけ、ということはない。画像や文章・コピーから作る。
  • 労働時間が多く、自給単価が低い。単価を上げるためには仕事のスピードをあげるしかない。
  • 仕事の現場で教えてくれる人はいない。