CSSを使った文字の線装飾
本日の教材動画はこちら
今まで様々な文字装飾をみてきましたが、ここで更にレパートリーを増やします。
text-decoration で文字に線を引く
文字装飾の定番（？）といえば、太線にする、色を変える、そして線を引くです！！今回は文字を線で装飾していく方法を見ていきましょう。線装飾には下記の4種類があります。
- none … 何もつけない
- underline … 下線をつける
- overline … 上線をつける
- line-through … 打ち消し線をつける
使い方としては〇〇｛text-decoration：線の種類；｝です。noneはいつ使うんだ？って感じですが、これは主にaタグにつけることが多いようです。aタグをつけると自動でリンクに下線がつきますので、それを意図的に消したい場合に使います。また、a:hoverとすることでカーソルを載せた時だけ線を消すことができます。
なんとなく想像は付くかと思いますが、実際に見ていきましょう。
上記のようなソースと外部CSSを用意しました。表示はご覧の通り何の変哲もないページになります。ここに、先ほど習ったCSSを全部詰め込んでみます。
分かりやすいように対応するCSSと行を線で繋げてみました。出来上がりは大体想像通りじゃないでしょうか？黄色のa:hoverはマウスカーソルをリンクに合わせると画像の様に下線がなくなります。カーソルを合わせていない場合は下線が出ます。
text-decorationプロパティは、テキストに線のつけるだけでなく、色やスタイルをまとめて指定する際に使用します。なので文字装飾を併用したい時に使うといいみたいですね！（単発の場合は text-decoration-line という表記があるようですが、今回勉強した使い方の方が色々と融通が利いていいみたいです）
動画をみて気づいたこと
教材動画を見て気づいたのですが、動画の外部CSSコードに「@charset "UTF-8";」という表記が合ってなんだこれ？ってなりました。いや、文字コードを指定していることはわかりますよ？でもそれって今までHTMLでしていたじゃないですか。なんで突然CSSに？ってなったわけですよ。
調べてみた結果、外部CSSにも文字コードを指定できるようで…。確かにコード内でも日本語を使うことはありますので、CSSにもコード指定をしてたほうがいいってことなんでしょうかね？というわけで今日以降の外部CSSには上記の文字コードを追記することにします！
【参考サイト】
セレクタのまとめ
本日の教材動画はこちら
今まで習ったセレクタのまとめ
本日は今までに習ったセレクタのまとめ動画でした。というわけで私も今まで勉強してきて、メモしてきた記事のリンクを動画の内容に沿って貼っていこうかと思います。
・nth-childとnth-last-childの使い方について
これ以外にたくさんあり、特に擬似要素については記事にしただけでも上記より多いですが、どうせあとでまたCSSまとめ2とかやつのでその時にまとめることにします。今回は動画の内容はこんなんでした！まとめとでも思っておいてください。
直前や直後を示す擬似要素について
本日の教材動画はこちら
before と after について
before は直前、after は直後を示す擬似要素です。使い方は〇〇：：before（又はafter）｛content：”表示させたい内容”；｝となります。前回同様今回もダブルコロンなので注意。一応コロン１こでもいけるようです。（どうも：はCSS2、：：はCSS3対応みたいです）
もちろん文字以外にもスタイルの適応も可能。その場合はcontent：”内容”；の後ろにいつも通りCSSを追加していけばOKです。内容は文字だけでなく画像も指定可能。 その場合はcontent：url(アドレス)； となります。文字挿入せず何かしらのスタイルだけ適応したい場合はcontent：””；と空指定すればOK。
それでは実際に使ってみましょう。
内容はシンプルにしました。今の所CSSは特に何も指定していません。ではそれぞれのpタグにbeforeとafterの要素を付け加えてみます。
contentの内容をどちらも「★」にしてみました。beforeの場合は前に、afterの場合は後ろに来ていることがこれでわかると思います。
もちろん他のスタイルをくっるけることもできます。統一感を出したい場合は下記の様にまとめて記載することも可能。
これを応用すれば、様々なデザイン・用途に使えるようです。詳しくは参考サイトをご覧ください。自分の引き出しに色々アイデアを詰め込めば、かなり使いやすそうな内容ですね！
【参考サイト】
1つ目を示す擬似要素について
本日の教材動画はこちら
firs-letter と first-line について
first-letter は1つ目の文字、firs-line は1つ目の行を示す擬似要素です。今までは「1つ目の要素」という形で全部をひっくるめていましたが、今回はピンポイントという形で指定できます。
使い方はシンプルですが、唯一注意点があるとすれば記述の仕方が セレクタ：要素名｛値；｝ではなく、セレクタ：：要素名｛値；｝となる点です。コロンが1個ではなく2個なので注意しましょう。ただ調べてみると：だけでも記載してたりするので、どっちが正しいのかは正直不明です。誰か教えて。
それでは早速使ってみます。今回用意したHTMLとCSSがこちら。
上記で出来上がるページがこちらになります。
このダミー文の最初の行と文字を変えてみましょう。
firs-line で最初の行を赤くし、文字を大きく太くしました。そしてletterでは最初の文字を青く大きくし、他の文字と少しスペースを開けるように設定してみました。
first-lineは「最初の行」なので、ブラウザのサイズによって1行目の幅が変わったとしても、文字数関係なく「最初の行」だけ変化をつけてくれます。10文字あろうが100文字あろうが最初の行にあれば指定のデザインを適応してくれます。first-letter はそのままですね！本当に最初の1文字だけに適応してくれます。
この2つは組み合わせも可能ですので、デザインをちょっと工夫してあげれば
この様に、1行目だけデザインをかえつつ、なおかつ最初の1文字目にだけ工夫をすることも可能となります。この2つを使えばスタイリッシュなデザインのページが作れそうですね！
【参考サイト】
UIに関わる擬似要素について
本日の教材動画はこちら
enabled disabled checked について
今回はまとめて3つの要素を見ていきます。まずそれぞれの定義は以下の通り
- enabled ： 通常の状態（選択・入力できる状態）のinput系要素
- disabled ： "disabled"オプション（選択・入力ができない）の指定されたinput系要素
- checked ： 主にradio,checkboxなどで選択されたものを対象とする
これだけでは何が何だかさっぱりなので、実際に記述していきながら動作をみてみましょう。
用意したHTMLとCSSがこちら。
上記で出来上がるページがこちらになります。
メールアドレス欄は、disabled="disabled"という指定をかけています。これは入力欄はあるが、入力できないような状態にするタグのようです。※動画ではdisabledとだけ書いてますが、XHTMLの場合は属性の値を省略できらしく、『disabled="disabled"』と記述する必要があるそうなので今回はそちらに沿って書いてます。
enebled と disabled を指定してみる
ではここに本日習う擬似要素を付与していきましょう。動作はとってもシンプルです。
まず disabled になっている要素を濃いグレーで表示するように指定しました。指定しなくても薄いグレーにはなってましたが、動画ではそうではなかったのでこの辺りはブラウザ依存なのでしょうね。わかりやすくしたい場合は自分で色付けたほうがよさそう。
そして選択・入力できる状態の部分は黄色になるよう指定しました。:enabledだけでもいけますが、選択・入力欄がたくさんあった場合全部黄色くなるため更にtextタイプのみに絞っている状態になります。
checked を指定してみる
次にchecked要素をみていきましょう。こちらはradioボタンやチェックボックスなどで選択されたものを対象とします。今回で言う何色が好きかという部分ですね。
こちらも：checkedの指定だけでも行けますが、範囲が広くなってしまうためinptのradioボタンだけに的を絞ります。そして選択されたら太字になるよう指定をしました。radioボタンにチェックが入っている青色が好きという文だけ、ちゃんと太字になったのがわかりますね！
ただ不思議だったのが、:cheked で全指定した際に何故か太字にならなかったんですよね。適当につけた他の要素はちゃんと反映されてたんですが…不思議。なので急遽laberつけて動画通りにしました。laberつけたらうまく動作する意味もよくわからない…。
あとあと、これは動画を見てみて完全に意味がわからなかったんですが
突然ぽっと湧いて出てきたこのスラッシュたちはなんですかね？？！！今までそんなものいれてなかったと思うんですけど…。調べてみるもスラッシュをいれる利点も意味もわからず…。これを見てる人で分かる人がいたら教えてください……気になってしょうがない。
【個人的な復習記事】
【参考サイト】
CSS：input要素のplaceholderの色を変更する方法
nth-of-typeとonly-of-typeについて
前回はnth-chileを勉強しましたが、今回はそれと似たnth-of-typeとonly-of-typeを勉強していきます。
本日の教材動画はこちら
nth-of-type と only-of-type について
nth-pf-typeは「特定の親要素の中の”特定の子要素が対象”」となります。nth-childの時は「特定の親要素の中の”隣接する子要素が対象”」でしたので、少しだけ違うことが分かるかと思います。
次にonly-of-typeは「特定の親要素の中の”唯一の子要素が対象”」となります。子要素が一つのみの場合に適用されます。
言葉だけでは分かりにくいので、実際に書いて違いを見ていきましょう。
ひとまず上記のようなページを用意しました。内容は前回のnth-childと同じになっており、偶数のリストに色を付けるように指定しているような状態です。
nth-childは「隣接する子要素が対象」となりますので、例えばliの途中で別のタグを挟んでしまった場合
このようになります。偶数行に色を付けるよう指示していましたが、別タグを挟んだことにより隣接ではなくなったため、今度は6行目が始まりと認識され7行目が2行目と認識され、色が付くようになりました。
nth-pf-type の使い方
ではこれをタグ関係なく、li全体として認識してほしい場合どうするか？そこで使うのが nth-of-type です。
nth-child を nth-of-type に書き換えただけで、当初の目的通り偶数行にだけ色が付きなおしたことが分かります。
only-of-type の使い方
次にonlyの使い方です。only-of-type は子要素が一つのみの場合に適用されるものです。唯一の子要素に適応するものなので、（2n）などの記載も不要になります。なのでもしこのように
複数の子要素があった場合はうまく機能しません。ではこの最初のulのliを1つだけにしてみましょう。するとどうなるか。
子要素が1個（唯一）になったので、今度はきちんと適応されて最初のliがグレーになったのがわかりますね！
ちなみに2個目のulのliも1個だけにした場合、上記のようにちゃんと適応されます。
参考サイトなどをみていたところ、前回勉強したnthにもonly指定があるみたいですね（その場合は only-child と記載）。他にも色々見てみましたが、狙ったデザイン通りにしたい場合、childではなくtypeでくくってあげたほうがトラブルは少ないということがわかりました！たしかに何か挟まって数えなおしとかよりは、規則的に動いてくれた方が誤作動はおこしにくそうですよね。
【参考サイト】
nth-childとnth-last-childの使い方について
チャートが「７．レスポンシブサイトを作ってみよう【英語】」に突入したのでいよいよ下手くそながらもサイトを作り始めるのか？と思ってたのですがそんなことありませんでした。引き続きCSSの勉強が続くみたいなので今日も元気にやっていきましょう。
本日の教材動画はこちら
今回は「何個目」かを指定できる擬似的な要素について勉強していきます。
nth-child と nth-last-child について
nth-childは「最初から何番目の」を指定することができます。last-childは逆に「最後から何番目の」を指定することができます。使い方は「要素：nth-child（値）｛スタイルの内容｝で記載します。
今回のテストページの内容はこちらです。
何も指定していない出来上がりのページがこちら。ここにnth-childを指定してみましょう。
nth-childを指定してみる。
今回は li にnth-childを指定してみます。記載内容と出来上がりのページがこちら。
値の（2n）の数式ですが、簡単に言えば偶数の指定です。2xnの数値をグレーにするという指定です。出来上がりページを見てみると、偶数行である2,4,6番目の色がきちんとグレーになっているのがわかります。この偶数指定は単語でも可能で、（even）と記載した場合も同じ効果を得ることができます。
奇数の場合は（2n+1）という指定になります。こちらも単語での指定が可能。その場合は（odd）と記載すればOKです。
直接「〇番目」を指定したい場合は（数字）を記載するだけでOK。今回は4番目だけグレーにするように指定がされています。
(-n+4）と指定した場合は「4番目から以前のもの」を指定することができます。4番目以前の数字は１～４なので、その指定行が全てグレーになっているのがわかりますね。「４番目以降」の指定をしたい場合は（n+4）とすればOKです。
nth-last-child を使ってみる
では今度はnth-last-childのほうをみてみましょう。といっても使い方は完全に同じです。今までは「最初から何番目から数えて」でしたが、それが「最後から何番目から数えて」にかわるだけです。
例えばnth-last-child（3）とした場合、先ほどまでなら最初から3番目が指定されていましたが、今回は最後から数えて3番目が指定されていることが分かりますね！
私は死ぬほど数字が苦手です。算数からやり直したいレベルです。なので最初「2n…？」ってなったし、いっきにこの先勉強についていけるか不安に感じておりますが。ひとまず「数式の意味はよくわからんがこう書けばこういう結果になる！」と覚えることにします。暗記でどうにもならない時が来た場合はまた考えます…。
【参考サイト】
