皆さん、こんにちは。ここぽてとです。デイトラ中級編DAY16の見出し編の後半の学習記録を書いていきます。
こちらは与えられた見出しとボタンをコーディングしていく課題です。長いので見出し編②としております。
![](https://co-copotato.com/blog/wp-content/uploads/2023/05/dog_pomeranian_blacktan_01-150x150.png)
引き続きいろんなパターンの見出しを作っていきます!
いろんなパターンの見出しを作って、慣れてきたらいろいろアレンジしていきたいですね。
では、今日も頑張ってコーディングしていきます。
準備編(前回と同じ)
$font-size:24px;
$main-color:#3F51B5;
$text-color:#333;
$pattern-width:475px;
body{
font-family: "Font Awesome 5 free","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
width: 100%;
font-size:$font-size;
font-weight: bold;
color: $text-color;
background:#fff;
}
Sassでよく使う色や、大きさあらかじめ定義しておきます。定義しておくことで、後で一括変更も可能で、かなり楽になりますよ♪VS.codeでのSassのコンパイルの方法は、こちらに詳しく載っていたので参考にしてみてください。
![](https://miyashimo-studio.jp/resource/media/3466/3466_w1280.png)
見出しパターン 11~17まで
![見出しパターン11](https://co-copotato.com/blog/wp-content/uploads/2023/09/2eaaa238-4fce-4a73-9e8c-cd13eee734ca.0.f8d25836-e204-4c38-beb8-493af3afb2b5.png)
<p class="pattern11">見出しパターン11</p>
.pattern11{
margin: 0 280px 0 280px;
position: relative;
display: inline-block;
margin-bottom: 1em;
}
.pattern11:before {
content: '';
position: absolute;
bottom: -17px;
display: inline-block;
width: 60px;
height: 4px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: $main-color;
border-radius: 2px;
}
このパターンは以前も作ったことがあるので、イメージしやすかったです。前回は::afterで作っていました。
![見出しパターン12](https://co-copotato.com/blog/wp-content/uploads/2023/09/851d7e8a-6763-4dd9-ad91-540be2898f36.1.f8d25836-e204-4c38-beb8-493af3afb2b5.png)
<head>
<script src="https://kit.fontawesome.com/eea364082e.js" crossorigin="anonymous"></script>
</head>
<p class="pattern12">見出しパターン12</p>
.pattern12{
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}
.pattern12:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: $main-color; /*アイコン色*/
font-weight: 900;
}
チェックマークがうまく表示できなくて時間かかりました。前提条件として、ヘッドタグ内にFont awesomeのURLを入れておかないと使えないみたいです。Font awesomeはサイトやブログでwebアイコンフォントを表示でき、商標利用が可能で、画像を読み込まなくてもアイコンを表示できるのでとても便利です。
![](https://img.fortawesome.com/1ce05b4b/open-graph-icons.png)
たくさんのアイコンがあってどれを使おうか迷います!FreeとProで使えるアイコンとそうでないアイコンがあるみたいです。
![見出しパターン13](https://co-copotato.com/blog/wp-content/uploads/2023/09/f600b81c-7518-44cb-a899-f214ffa2e07c.1.6befefe8-a248-446f-b6e6-3804b811f959.png)
<p class="pattern13">見出しパターン13<div class="my-parts"><span></span></div></p>
.my-parts {
display: inline-block;
width: 40px;
height: 40px;
font-size: 30px;
position: relative;
}
.my-parts span {
position: absolute;
display: block;
top: -150%;
right: -455%;
width: 25%;
height: 25%;
border-radius: 80%;
margin: -.28em 0 0 -.28em;
border: .10em solid $main-color;
}
.my-parts span::after {
position: absolute;
display: block;
content: "";
top: 50%;
left: 50%;
width: 70%;
height: 25%;
background: $main-color;
margin: .2em 0 0 .14em;
transform: rotate(45deg);
}
こちらの記事を参考に色々数字をいじりながら調整しました。1番設定するのに時間がかかりましたが、位置関係のいい勉強になりました。
![見出しパターン14](https://co-copotato.com/blog/wp-content/uploads/2023/09/34a647ca-8eca-4908-a03b-cd858f60fb1c.0.6befefe8-a248-446f-b6e6-3804b811f959.png)
<p class="pattern14>見出しパターン14</p>
.pattern14 {
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
text-align: center;
}
.pattern14::before,
.pattern14::after {
content: '';
width: 3px;
height: 40px;
background-color:$main-color;
}
.pattern14::before {
margin-right: 30px;
transform: rotate(-35deg)
}
.pattern14::after {
margin-left: 30px;
transform: rotate(35deg)
}
![見出しパターン15](https://co-copotato.com/blog/wp-content/uploads/2023/09/57534e5f-58d0-4ac5-bba3-cd77dd909122.1.d2989bf9-0275-4ea8-81ab-7dd5ffa76258.png)
<p class="pattern15>見出しパターン15</p>
.pattern15 {
align-items: center; /* 横線を上下中央 */
display: flex; /* 文字と横線を横並び */
justify-content: center; /* 文字を中央寄せ */
}
.pattern15::before,
.pattern15::after {
background-color: $main-color; /* 横線の色 */
content: "";
height: 3px; /* 横線の高さ */
width: 130px; /* 横線の長さ */
}
.pattern15::before {
margin-right: 15px; /* 文字との余白 */
}
.pattern15::after {
margin-left: 15px; /* 文字との余白 */
}
![見出しパターン16](https://co-copotato.com/blog/wp-content/uploads/2023/09/a812a310-4ffa-4d3a-a931-4c0d9e9ca30a.0.d2989bf9-0275-4ea8-81ab-7dd5ffa76258.png)
<p class="pattern16">見出しパターン16</p>
.pattern16{
width: 215px;
padding: 8px 10px;
background: repeating-linear-gradient(-45deg, #7385E9, #7385E9 10px, #A7BAFF 5px, #A7BAFF 20px);
}
![見出しパターン17](https://co-copotato.com/blog/wp-content/uploads/2023/09/94ed26c0-25a0-441d-bce4-d625d3911397.1.89d25daf-efb1-4a5b-951e-ae3a1d0882b2.png)
<p class="pattern17">見出しパターン17</p>
.pattern17{
position: relative;
&::before {
display: inline-block;
content: "";
background-size: auto auto;
background-color: #A7BAFF;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 10px,
#7385e9 1px,
#7385E9 19px,
);
width: 238px;
height: 50%; /*行の高さ*/
position: absolute;
bottom: 0;
z-index: -1; /*数が大きいほど手前に出る*/
}
}
ストライプ柄をCSSで作成する場合、パターン16も17もrepeating-linear-gradientを使うのですが、Sassの記述量が全然違いますね。難しかったので下の記事を参考にしています。
ストライプ柄を画像で作ると楽ですが、WEB制作で、後でカラーを変えたり、ストライプの太さを変えたりする可能性がある事を考えれば、CSSで作ったほうが良いですね。(まだ慣れていないから難しいけど)
感想
17個全部作るのはボリューム多くてとても大変でした!(まだボタン編が残っているけれど)疑似要素(before/after)をこのように使って、見出しパターンを最初から作るとか思いつかないので、まだまだ勉強不足だなと思いました。今回使ったものはnotionに登録して、WEB制作やブログに活かしていきたいと思います。