webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

navigation button の制作 2

  • 下のようなものを作る。
  • 幅800px長方形、左辺を基準に160px毎に縦の線を引く。左辺に重なるように1pxの線を引いて、水平に160pxコピー移動。
  • ctrl+Dで同じプロセスを繰り返す。
  • 厳密にいうと最後の長方形は、内寸が 1px 狭いことになるが、無視をしたい。

f:id:ohta-felica:20160430230534p:plain

  • 文字数が一番多いボタンに入力。(中央揃えにしておく)

f:id:ohta-felica:20160430231215p:plain 

  • ボタンの幅と同じ幅の長方形を作って、ボタンの下に配置する。それから文字と、適当に作った長方形を選択してから、長方形をキーオブジェクトにする。
  • キーオブジェクトに対して、中央配置。上下の位置は見た目で大丈夫。カーソルを使って移動する。
  • この文字を左右に160pxづつずらす。
  • 長方形は消去する。 

f:id:ohta-felica:20160430231530p:plain

  • 文字を差し替える。

f:id:ohta-felica:20160430232040p:plain

  • 垂直に10px真下に同じものをコピーして配置する。
  • 上は a:link 下はa:hover の状態。

f:id:ohta-felica:20160430232757p:plain