覚えることが多いCSS
ここ数年何かを暗記しようとか理解しようとか思って勉強した記憶が無かったので全て忘れないように記憶することは可能なのかと思うほどにCSSの勉強が心配になってきた。25歳ということもあるだろうが公務員試験に向けて頑張ってた時代はそこまで暗記に困った記憶が無かったのでショックである。比べる対象が10代なのがそもそも間違っているのだろうけど5年やそこらでここまで変わるとは思わなかった。今この記事を見ている10代の若者がいるなら本当に今のうちにいろいろ勉強しておきなさいとアドバイスしたい。人によるだろうが筆者はすでに頭が悪くなりつつあるみたいだ。とにかくそれなら余計にインプットだけではなく、アウトプットをする必要がある。頑張っていこう。
CSSをコーディングする場所
まず最初に疑問に思ったのがCSSはHTMLの文書の中に書くもんだと思っていたが、別にそうじゃなくてもいいらしい。というより上官に聞いたらHTMLファイルと別でCSSのファイル作ってくれた方が、メンテナンスとかいろいろ楽だから基本的には書きこまないよと言われた。他にも多くメリットがあるそうだが、実践段階に入っていないので理由は後回しにしてとりあえず、CSSを書く場所だけは覚えておきたい。
外部ファイル
名前の通り○○.cssというファイル名で保存して、後にHTML側でcssファイルを開くという方法。cssファイル側とHTMLファイル側に多少の工夫が必要だが、特に難しくもないのでこちらをまずマスターしておきたい。
cssファイル側にはコーディングの一発目に
@charset"UTF-8"
というコードを書く必要がある。文字化けを防ぐために必要なものである。書かないといけないものと覚えておこう。
cssを読み込みたいHTMLファイルを開き、<head>タグ内に
<link rel="stylesheet" href="CSSファイル名orCSSファイルの在処のURL">
というCSSを呼び出すためのコードが必要。
特に難しくもないので今後は基本的にこの方法を使ってHTMLとCSSを勉強する。
<head>タグ内に<style>タグを使用する方法
HTML文書の<head>タグ内に<style>ここにcssコーディング</style>という使い方をするだけでCSSを楽に書くことができる。
インライン
一部のデザインだけを変えたい時にstyleを属性として使用する、インラインというものがある。
<h1 style="color:red">
コーディングが上手な人はインラインをほとんど使わないらしいので基本的には使わない方法で頑張りたい。あとで書くがcssのプロパティdisplayに使用する値のinlineとは別である。
適用される優先順位
インライン ＞ <style>タグ ＞ 外部ファイル
外部ファイルで作ってサイト全体のイメージを作り、このページのデザインだけ少し変えたいなと思ったら<style>タグを使用する。というような使い方でいいはず。
この辺の知識はとりあえず忘れないようにマスターしておきたい。
cssを学ぶに当たって要素について勉強した
要素とはhtml文書においてタグで囲われたもので
<p>これらが要素</p>
だと簡単に解釈した。
要素にも親要素と子要素というものがあるが、簡単に
<div class="poipoi">
<p>これは例です</p>
</div>
この場合だと<div>タグが親要素で<p>タグが子要素となる。CSSを勉強するにあたって必須知識らしい。
CSSの基本形式
セレクタ{プロパティ:値;}
- セレクタ＝タグ<p>など。<>で囲う必要はない
- プロパティ=colorなど命令したいものを書く。
- 値＝プロパティによって値の種類と使い方は様々。
- 最後の「;」を書かないと続けてコーディングする場合,次の行のcssの指示が反映されなくなるので書く必要がある。一つだけコードを書く場合などは書かなくてもいいが今はとにかく絶対書くものだとして理解しておく。後々書いたらまずい場面が出てくるのであればその時は修正。
セレクタにid名とclass名を使用する場合
idは#id、classは.classと書く必要がある。
複数セレクタをまとめて書きたい時
#id,div,pなど「,」で区切る必要がある。
適用先を指定したい場合
.class p のように半角スペースで区切る。
プロパティの種類と値
昨日使い方を勉強したものを記載。これからもどんどん使えるものを増やしていきたい。
color:red
文字色の指定。値は色の名前か、カラーコードと呼ばれる英数字の#FFFFFFのようなコードで指定する。カラーコードはググればいくらでも出てくる。
fontsize:1px or 1em
フォントサイズ指定。値はpxかemで指定。emは現在の大きさの倍率で指定できる。
text-align:center
文字の位置調整。値はleft、light、center。デフォルトはleft。
background:red
背景色。色の名前かカラーコードで指定する。
border:solid 1px black
文字周りに線を足すことができる。値は線の種類、太さ、色の順で書く。
線の種類はsolid(普通の線)、dotted(点線)、dashed(破線)、dooble(二重線)、none(無し)
プロパティを少し変えるだけで文字の上下左右に線を指定することもできる。
border-top(上線)、border-bottom(下線)、border-left(左線)、border-right(右線)
borderのみの場合は文字を囲む。
widthとheight
要素の縦と横の大きさを指定できる。widthが横幅でheightが縦幅。値はpx。
paddingとmargin
要素の内側の余白をpaddingで指定、要素の外側の余白をmarginで指定できる。
display:inline
要素の表示方法を決めるもので、値はinline、block、inline-block、none。
block
要素が縦並びで自動的に改行されます。
要素のwidthとheightも指定できる。
paddingとmarginの指定も自由自在。
要素の中身は指定しなければ自動的に横に長くなります。
p、div、ul、h1~h6などのタグは初期値がこれ
inline
要素が改行されずに横並びで配置されていきます。
幅、高さ、上下の余白の指定ができません。横のpaddingとmarginは指定できます。
要素の中身の文字や画像のデータに応じたサイズに自動的になります。
a、spam、imgの初期値がこれ
inline-block
二つの良い所だけを抜き取ったようなものでとりあえず一番強い。
全部できるもので優秀。ブログのヘッダにメニューバーを作りたい時などに便利。
今回の勉強まとめ
CSSはHTMLとちがって覚えるものが多いっぽいので大変。暗記だけではなく、使い方もしっかり理解する必要があるのでプログラミングの難しさを痛感。とりあえず今は楽しめているのでよしとする。
昨日つくったやつ載せ
実際はちゃんとわかりやすいように改行してます。これはただコピペしているだけのものです。なんかコードを記事に張る方法あるみたいですけどめんどくさそうなので今はスルー。それより勉強だよ。
HTMLファイル
CSSファイル