基礎はだいぶ終わってきたっぽい？
基礎はほとんど終わってあとは応用力とかいろいろ応用したコードとかの勉強をした方がいいのかなと思っている状態です。実際に一個サイト作ってみるとかやったほうが勉強になるし、実践で使えるコードとかも覚えれそうだから色々のサイト見て回ろうかなと思っています。ともあれまだ勉強することだらけなので油断はできないのだが実際にがっつりコーディングに挑戦しながら学ぶ方向にシフトする必要がありそう。他にもデザインの勉強とかいろいろあるけどその辺はまだ先になりそう。
表の作成方法とデザイン変更
サイトに一つはあるんじゃないかって言うぐらいに利用されている表の作り方を今回勉強しました。デザインも自分でいろいろ触れる＆簡単だと思ったので記事作成にも積極的に活用していきたい。人に見られること前提で考えるとまだまだ知識が足りないが、簡単なものは作れるようになったと思う。
HTML側の文書で使用するタグは
- <table>：表全体の囲い
- <tr>：行全体の囲い
- <th>：表の見出し部分
- <tb>：普通の表の中身
<table>
<tr><th>表の見出し</th></tr>
<tr><td>表の通常部分</td></tr>
</table>
のような感じで表を作る。行と列は<tr>の数を増やせば列が増え、<tr>の中に<th>or<td>を増やせば行が増える。
paddingで表の中身の余白指定
table th or td{padding:~;}で余白を変更できます。
表の色の変更
table{color:~}で全体の文字色を変更できる。見出しだけ色を変えたいならtable thと指定する。
背景色はbackgroundで変更できる。
表の中身を中央寄せにする
table{text-align:center}で中のテキストを中央寄せに出来ます。
表の枠線の見た目を変える
HTMLで設定してもいいけどあとあとめんどくさいのでCSS側で指定しましょう。
table{border-collapse: collapse;}
とまず書くのを忘れないようにしましょう。じゃないといらない余白が表の中に出来ます。余白を活用したい時は書かなくてもいいです。
tablle th,table td{border:solid 1px black;}とかいつもの感じで書くだけ。
線の種類はborderの値に含まれているものが使えます。
セルの結合方法
縦方向にセルを結合したい時は接合をスタートする起点のタグの中に<th rowspan="結合したい列数">を書くだけで結合されます。値は整数です。
横方向はrowspanがcolspanに変わるだけ。
結合される予定の<th><td>は消すのを忘れないように。
左右の結合は右方向にされます。
疑似要素のbefore、after
CSS側でHTMLで作る要素みたいなものを作れる。
検索エンジンで要素として認識されないためSEOに影響がなく便利。
h1::before or after{content:"表示させたいテキスト"}のように使用する。
::が二個なのはcss3からで古いブラウザで表示させたいなら:を一つにする必要あり。
beforeは要素の直前に表示され、afterは要素の直後に表示される。
今回のまとめ
いよいよあんまりやる事が無くなってきたので色々なサイトを検証して勉強していこうと思う。