8月8日 講義内容(金)- 実技(HTML・CSS基礎)7-

Pocket

◆本日使用したプロパティと値

[cursorプロパティ(教科書/辞典P.359)]

◎cursor カーソルの形を指定するプロパティ
・default カーソルの形が通常の矢印の形になる

[positionプロパティ(教科書/辞典P.332)]

◎position  ボックスの配置方法を指定するプロパティ
・static (スタティック)… 何も指定していない時と同じ。デフォルトの状態
・relative(レラティブ)  … 相対的な指定
・absolute(アブソリュート) … ウィンドウまたは親ボックスを基準とした絶対的な配置
・fixed(フィックスド)  … ウィンドウを基準とした絶対的な配置 + 位置の固定

static指定以外の時に配置位置を指定するプロパティ(教科書/辞典P.336)

・top  … 上からの配置位置(距離)を指定する
・right  … 右からの配置位置(距離)を指定する
・bottom  … 下からの配置位置(距離)を指定する
・left  … 左からの配置位置(距離)を指定する

※絶対的な指定のため、margin:auto;はきかない。
中央配置したい場合は、positionで画像の左上の角が中心に合わさるようにし、
そこから画像の縦幅の半分、横幅の半分をずらすことで、
画像の中央が中心に合わさるようになっています。
横幅を半分にずらす時に使用するmargin(外の隙間)のマイナス指定をネガティブ指定を言う。(ネガティブマージン)

ちなみにpadding(内側の隙間)にはマイナス指定は使用できない。

[Z-indexプロパティ(教科書/辞典P.344)]

◎Z-index 重ね順を指定してあげる指定。整数値で指定。0を基準として、値が大きいものほど上になる。
※positionプロパティ(static 以外)とセットで有効になる。

[contentプロパティ(教科書/辞典P.362)]

◎content  要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用
※contentプロパティを適用することができるのは、:before擬似要素および:after擬似要素のみ可能

[border-radius]CSS3

◎border-radius ボックスの4つのコーナーの角丸をまとめて指定する際に使用

◆横並びのメニューの作り方

手順はどこからでも良い。
①<ul>タグにlist-style-type:none;で・を取る。

②メニュー1つ1つの大きさを決める
<li>と<a>タグに高さと、横幅指定をかける
※この時、<a>タグの大きさを決めるにあたっては、インライン要素なので、ブロックレベル要素に変えてあげないと高さと横幅指定が出来ない。

③文字の設定
<a>タグに文字の設定をつける

④<li>タグにフロートをかけて横並びにする

⑤<a>タグにホバーなどの設定をする

⑥<li>タグの右側にborderでラインを入れる
※この時、中の要素である<a>タグの方にborderの設定をしてしまうと、
widthが線幅分、<li>タグのwidthより大きくなってしまうため<li>タグに設定する

おまけ
角丸をつけたい場合
<ul>タグにborder-radiusを設定。そうすると上に乗っている<li>タグや<a>の角で左のみ角がでてしまうので
その場合はulのはみ出した部分を見せない設定、overflow:hidden;を<ul>タグにかけてあげる。

◆ポジションのリファレンス

>> 詳しくはこちら http://www.css-lecture.com/log/css/037.html

◆疑似要素(教科書/辞典P161)

:before擬似要素と:after擬似要素は対象となる要素の前
または後に指定した内容を追加することが出来る

要素名:before {
プロパティ: 値;
}

要素名:after {
プロパティ: 値;
}


 

position

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください