見出し画像
Photo by response

40代ママ、駆け出しエンジニアになりたい ～疑似要素とは？～

MaMaSanSangyo

今まで　～編　みたいに書いてたんですが、あとで見返したときに（自分が）探しにくいということもあって、～編はやめました　|ω·`)
なにについて書いてるかをタイトルにいれることにしました！

ここ半年ほどお仕事で、ＬＰページを作成させてもらってます。しかしながら、コーディングをがっつりする時間がとれなくて、画像データを張り付けるという残念な対応をしてしまうことが多いです。。

（以下、まちがっているとこがあるかもです。ご了承ください　(ﾉД`) ）

画像データ貼り付けでもいいじゃない？


画像データではなく、マークアップで表示したほうがよい場合は、検索のキーワードになりそうな用語が入っているときだそうです。サイトを見る対象のひとが検索しそうなワードを想像しながらコーディングすると、画像でよいか、マークアップにしたほうがよいかみえてくるそう　٩(ˊᗜˋ*)و

そこで、向き合ってみました。

疑似要素とやらを使ってみるよ

お仕事でよくでてくるむつかしいやつ。はじめにわからーんってなったやつ。
囲み線の中に内容を書いて、真ん中にタイトルを表示するスタイル

画像1

その前に...疑似要素とは?

簡単にまとめると、要素の一部に対してスタイルを適用できる指定方法です。HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができるとのことです。
記述としては要素の後に :: を指定

主な疑似要素
A:: first-letter（要素の一文字目を指定）
A:: first-line　（要素の一行目を指定）
A::before　　（要素の直前にコンテンツを追加）　今回はこれを使う
A::after　　　（要素の直後にコンテンツを追加）

とりあえず作成...

まだわかってないとこも正直あるのですが。。

下にコード載せました...
まず、myboxクラスで囲みをつくります。
問題は、★の配置ですよ。ここで疑似要素のbeforeを使います。
background-imageで、★の画像をセットします。画像をつかっているので、contentは空にしました。
position: absoluteで、★を好きな位置に配置します。
top がマイナスになっているのは、★の高さの半分だけ上から表示することで、ボーダー線の真ん中に配置することができます。
left:50% で横軸の真ん中に★を配置します。topと同様に★の横幅の半分だけ左に戻す必要があります。（transform:translateX）

[HTML]
<body>
   <p class= "mybox">aaa</p>
</body>

[CSS]
.mybox{
   border-color: aqua;
   border-style: groove;/*4辺すべての線のスタイルを設定*/
   border-radius: 5px;
   margin: 30px 20px; /* 外側の余白 上下・左右 */
   padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
   position: relative;
   z-index: 0;
}
.mybox::before{
   background-image:url("hoshi.PNG"); /*タイトルの星*/
   background-size:50px 50px;/*星のサイズ*/
   content: "";
   width: 50px;/*幅*/
   height: 50px;/*高さ*/
   position: absolute;
   top: -25px;
   left: 50%;
   z-index: -1;
   transform:translateX(-25px); 
}

説明がうまくできなかったんですが、しどろもどろつくってみました。というお話でした！

最近おきにいりのシンデレラサイズ！！こちら飲んで寝ます　ZZZ


この記事が気に入ったらサポートをしてみませんか？