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

webかたつむり

ウェブデザインを勉強中

ナビゲーションボックスの覚書 課題 nv-01,02,03

  • 幅があれば、マージンを指定できる。#containerに幅を指定する。指定することでmargin:o auto;の記述が意味を成す。
  • ulも同じ。幅を指定しないと、親要素の幅いっぱいなのか?幅を指定すれば親要素に対して位置を決められる。
  • ulで幅を決めると、左右の置き場所を指定しやすい。
  • liでは高さを決める。文字要素なので高さはline-heightで指定する。
  • display:bolck;したli aで高さを決めるときは、blockレベルの要素なので、heightで指定する。このときにborderをつけると、その分だけ大きくなることに注意。
  • CSSスプライトを使う機会はどれ程なのか?いずれにせよ、liで高さを指定、li aでborderを指定するのがいいと思う。
  • 下のコードではulに高さを指定していない。だから、上に#containerとの隙間がほしい場合は、paddingで指定する。
  • そんなところが気づき。まだ誤解があるような…気がします。 

追記 2日後に nv02 を修正

  • 左側の三角形も hover した時に色を変えるように修正。三角を見たら hover したくなるだろう…ということです。
  • 最初は li の中にインラインで画像を読み込んでいたが、画像も色が変わるとなると根本的な構造を変えることになる。同ポジの乗り替わり。
  • まずは、色の違う三角を制作。
  • それから背景として画像を読み込む。

#container{

width: 400px;
background: #FFFFFF;
margin: 20px auto;
}
ul{
width: 160px;

/*幅を指定すれば,左右の位置が指定できる。指定しなければ親要素の幅になる。*/

margin: 0 auto;}

/*左右の中間においてあげられる!

だけど高さは指定していないので何もできない

ここで高さは計算するのが面倒…*/

li{
line-height: 80px;

}

/*だから高さはこっちで指定する。文字ブロックの高さはline-heightで指定。*/
li a {
border: 3px solid;/*ここで枠線をつければ、全体の大きさは変わらない。*/
display: block;
color: #FFFFFF;/*枠内の詳細はli aで*/
text-align: center;
margin-top: 24px;
}

 

navigation-01

navigation-02

navigation-03