こんにちは、さるまりんです。
僕はプログラマーなんですがフロントに関わる技術ってそんなに触れてこなかったんです。
HTMLやCSSの基礎的なことがわかってなかったりします。
なので誰かが書いてくれたHTMLやCSSを読むことはとても楽しかったりします。
理解できてないのもったいないですよね。
なのでこれからは疑問に思ったことは色々と試して見たいと思っています。
前から思っていたのがこれ。
CSSの中でよく見るbeforeやafterってなんだろう？
簡単に言ってしまうと、HTMLに書かないものをCSSで作ることができます。
要素でないものを擬似的に作るから擬似要素。
うーん、なんのこっちゃ？擬似要素ってなんだ？
わからないならやって見るのが一番ですよね。
要素って？
要素とはHTMLのタグとタグで挟まれた一つの塊をいうそうです。
なので例えば
<span>光り輝く時</span>が一つの要素です。
書き方は？
beforeとafterはこんな風に書きます。
span::before {
content: '擬似要素の内容';
}.sample-span::after {
content: '擬似要素の内容';
}これもよくわかっていないのでまた書かせてもらおうと思いますがセレクタの後に::before、::afterとして、content:''の中に擬似要素の内容となるものを書きます。同時にstyleの指定もできます。
beforeとafterの違いは？
これは要素の前に入れるか後ろに入れるかの違いです。
実際に書いてみます。
CSS
.sample-span-1::before { content:"あなたが"; }
.sample-span-1::after { content:"は今"; }HTML
<span class="sample-span-1">光り輝く時</span>結果
光り輝く時
いかがですか？こんな風に表示されます。
すみません。思った以上に結果が地味でしたね。色でもつけておきます。
CSSをこんな風に変えました。
.sample-span-1 { color: navy; }
.sample-span-1::before { content:"あなたが"; color:skyblue; }
.sample-span-1::after { content:"は今"; color:green; }
光り輝く時
すみません。まだ地味でしたね。
何ができるの？
今回僕がこれを書こうと思ったのきっかけは@TongariAtamagoさんの「,とCSSだけでHello,World」という記事です。
プログラミングを勉強するときにまあどんな言語でも最初に学ぶHello, World!。
CSSにおけるこれは何なのかをググってみたときに出会いました。
これがHello, World!なの？っていう話は置いておいてこんなことができるCSSの面白さを勉強して遊んでみたいと思ったのです。
なので応用はこれから色々勉強してここで書かせてくださいね。
CSSにおけるHello, World!が何かも気になります。
読んでくださってありがとうございます。
ではまた！