レイアウトに重要そうな部分
今回勉強した内容にレイアウトに必須なプロパティのpositionについても勉強した。一気にレイアウトの幅が広がったが割と使いこなすのは難しそうだと思った。特にややこしいと思う部分はなかったが実際にはデザインの知識も関連してきそうなのでセンスが問われそう。他にもすでに登場した<ul><ol><li>の詳細なデザインの変更方法や表の作成方法も今回学んだ。<a href="~">使ったリンクのデザイン変更のバリエーションも学んだのでその辺もアウトプットしていこう。それと文字フォントについても学んだがそちらは全部のフォント覚えるのは大変そうなので調べながら使っていくことになりそうだ。
ではアウトプットしていこう。
<a>タグ使い方まとめ
CSSの勉強初期に<a>タグについて書いたが、新たな使い方があることが発覚したので先に書いておこうと思う。多分必須レベルなので調べなくても使えるように忘れないようにしたい。
<a href="リンク先">リンク先に飛ぶ</a>
通常の使い方。「リンク先に飛ぶ」のところ押すとリンクに飛ぶ。
<a href=""リンク先" taget="_blanc">別タブに飛ぶ</a>
別タブで開くリンクを作ることができる。半角スペースと_を忘れないように注意したい。使いすぎるとうざいだけなので使いどころをきちんと見極めよう。
a{text-decoration:none;}
リンク先ボタンの下線を消せる。特定のリンクのデザインを変えたい時はid名やclass名を指定するのを忘れないように。
a:hovor{~}
カーソルを合わせた時のデザインを変える。リンクあるあるなやつです。
値はcolor、font-size、font-weigthなど指定可能。カーソルを重ねた時に色が変わるなど分かりやすいようにデザインできる。ただ特殊なセレクタの使い方をする。
a:hover img{~}で画像のデザインも変更可能。
a:visited{~}で訪問済みのデザインの変更可能。
ページ内の特定の場所に飛びたい場合
飛びたい場所のタグにid名を指定し、<a href="#id名"></a>で完了。簡単です。
別ページの特定の場所に飛びたい場合は、
<a href="飛びたいURL#id名"></a>で完了。半角スペースなどもいらない。続けて#id名とコーディング。
ul、ol、liの詳しい使い方
CSSの勉強を始めた最初の方で学んだ箇条書きのul、ol、li達ですが、詳しくデザインの変更方法などまだ勉強していなかったので今回書いていこうと思います。
箇条書き全体の要素のデザインを変える
セレクタにolかulを指定すると箇条書き全体のデザインを変更できる。borderを指定すると箇条書き全体を二重線などで囲える。
ul li{background~}で背景色を変更できる。liを忘れないように。
箇条書きの黒点や数字を消したい場合は
list-style-type:noneを指定することで消える。
小技
箇条書き内の改行は<br>を使おう。
ulタグの間にolタグを入れたりすることでもできる。
positionの使い方
positionは要素の位置調整に使えるレイアウトに必須な知識です。使いこなせないと多分人権ないと思われます。なので頑張って使いこなせるまで実践していきたいと思います。
positionとセットの値まとめ
- static：初期値。位置調整できない
- absolute:親要素基準で絶対的な位置調整ができる。なにに阻まれようとどこにでも位置調整できる。
- relative：現在位置基準で相対的な位置調整ができる。
- fixed：画面の決まった位置に要素を固定できる。かなり便利そう。
位置の指定に必要なプロパティはtop、bottom、left、right。
position:relative;
top:10px;
みたいな使い方をする。
とりあえずstaticはまずいので、迷ったらrelativeを指定しておくと便利。
ｚ-index
position:absolute or fixedの時に使用する。要素同士が重なった時にどの要素を前面に出すのか順番を決めたり指定することができる。
値は整数が使用され、数字が大きいものから前面に表示される。
position:staticには使えないので注意が必要。
その他勉強したプロパティ
cursor
カーソルアイコンを変更することができる。種類はかなりあるので使いたい時は調べて使うようにしよう。
overflow
要素からはみ出たテキストなどの扱いを決める。自動でスクロール式に設定できたりするのでかなり便利。
値は
- visible:初期値で普通にはみ出た状態で見える。
- scroll：はみ出た部分が隠れてスクロールできるようになる。
- hidden：はみ出た部分が純粋に隠れる。
- auto：ブラウザによって変わるが、基本はscrollと同じになることが多い。
white-speace
HTML文書上での改行やtab、スペースなどの扱いや要素の端までテキストが到達したときの自動折り返しなどを設定できる。
値は
- normal：要素の端まで行くと自動改行。html文書上で空白、tab、改行が続いても一つの空白にまとめられる。文末以降の改行などは全て無視される。
- nowrap：normalの自動改行されない版。<br>の出番。
- pre：tab、スペースは反映されるが自動改行されない。
- pre-line：改行はそのままだが、空白はすべてまとめられる。
- pre-wrap：preの改行される番。他のいらなくない？
今回のまとめ
レイアウト関係は本気でマスターしないとまずそうなので定期的に使いながら友達になれるようにしていきたい。ただちょっと急に忙しくなったので勉強にあまり時間取れないのが悲しい。