- 投稿日：2020-09-06T20:36:00+09:00
【初心者でもわかる】CSSだけで8角形を作る方法
どうも7noteです。あまり使う機会は少ないかもですが、CSSだけで8角形の作り方について
ちょっと凝ったデザインにするときに役立つtipsを紹介。
CSSだけで8角形を作ります。jsで動きとかつけたらおしゃれなサイト作れそう。
cssだけで8角形を作る
index.html<div class="octagon"> <div class="octagon_frame"></div> </div>style.css.octagon { width: 240px; height: 240px; position: relative; background: #ccf; /* 8角形の色or画像 */ } .octagon::before { content: ''; width: 0; height: 0; border: 35px solid transparent; border-top-color: #fff; border-left-color: #fff; position: absolute; top: 0; left: 0; } .octagon::after { content: ''; width: 0; height: 0; border: 35px solid transparent; border-top-color: #fff; border-right-color: #fff; position: absolute; top: 0; right: 0; } .octagon_frame::before { content: ''; width: 0; height: 0; border: 35px solid transparent; border-bottom-color: #fff; border-left-color: #fff; position: absolute; bottom: 0; left: 0; } .octagon_frame::after { content: ''; width: 0; height: 0; border: 35px solid transparent; border-bottom-color: #fff; border-right-color: #fff; position: absolute; bottom: 0; right: 0; }結果
画像も入れれます。
いっぱい並べておしゃれな背景にも。
疑似要素を計4つ使い、四隅に背景色と同じ色を配置することで8角形に見せています。
三角形の大きさの計算ですが、borderの数字は大体横幅の7分の1くらいの数字を入れると、ほぼほぼきれいな8角形に見えます。
まとめ
6角形の方法もまた記事書きますね。
マウスカーソルでhoberした時、くるくる回転させるとかやってみたい。おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日：2020-09-06T20:27:54+09:00
【css】【flexbox】レイアウト３分割
※自分用メモです
① ３等分レイアウト（marginなし）
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">３等分レイアウト</h2> <p class="subHeading colorBlack">３等分レイアウト</p> </div> <div class="sampleWrapper flexWrapper bg-info"> <div class="sampleItem trisectionItem_noGutter bg-primary"> <p class="test01"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem_noGutter bg-secondary"> <p class="test02"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem_noGutter bg-success"> <p class="test03"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> </div> </div> </section> <!--End sampleSection -->.trisectionItem{ width: calc(100% / 3); @include mq('sp_lg'){ width: 100%; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; &:last-of-type{ margin-bottom: 0px; } } } .sampleItem{ padding: 20px; }② ３等分レイアウト（margin均等）
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">３等分レイアウト</h2> <p class="subHeading colorBlack">３等分レイアウト</p> </div> <div class="sampleWrapper flexWrapper bg-info"> <div class="sampleItem trisectionItem bg-primary"> <p class="test01"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem bg-secondary"> <p class="test02"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem bg-success"> <p class="test03"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> </div> </div> </section> <!--End sampleSection -->.sampleWrapper .trisectionItem{ width: calc((100% - 200px) / 3); margin-right:calc(200px / 2); margin-bottom: 40px; &:nth-of-type(3n){ margin-right: 0; } @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 40px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 40px; &:last-of-type{ margin-bottom: 0px; } } } .sampleItem{ padding: 20px; }③ ３等分レイアウト（margin均等＋アイテム間に線）
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">３等分レイアウト</h2> <p class="subHeading colorBlack">３等分レイアウト</p> </div> <div class="sampleWrapper flexWrapper bg-info"> <div class="sampleItem trisectionItem line_between bg-primary"> <p class="test01"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-secondary"> <p class="test02"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-success"> <p class="test03"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-primary"> <p class="test01"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-secondary"> <p class="test02"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-success"> <p class="test03"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> </div> </div> </section> <!--End sampleSection -->.sampleWrapper .trisectionItem{ width: calc((100% - 300px) / 3); margin-right:calc(300px / 2); margin-bottom: 50px; &:nth-of-type(3n){ margin-right: 0; } @include mq('tab_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } .sampleItem.line_between{ position: relative; &:after{ content: ""; position: absolute; display: block; top: 38%;//少し上下調整 right: calc(-150px / 2); height: 40px; width: 2px; background-color: red; } //３番目は非表示 &:nth-of-type(3n){ &:after{ content: none; } } //ipad以下サイズでは非表示 @include mq('tab_sp'){ &:after{ content: none; } } @include mq('sp_lg'){ &:after{ content: none; } } @include mq('sp_sm'){ &:after{ content: none; } } } .sampleItem{ padding: 20px; }④ ３等分レイアウト PC３列 タブレット２列スマホ１列 （margin均等）
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">３等分レイアウト</h2> <p class="subHeading colorBlack">３等分レイアウト</p> </div> <div class="sampleWrapper flexWrapper bg-info"> <div class="sampleItem trisectionItem line_between bg-primary"> <p class="test01"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-secondary"> <p class="test02"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-success"> <p class="test03"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-primary"> <p class="test04"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-secondary"> <p class="test05"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-success"> <p class="test06"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-primary"> <p class="test07"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-secondary"> <p class="test08"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-success"> <p class="test09"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-primary"> <p class="test10"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-secondary"> <p class="test11"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem line_between bg-success"> <p class="test12"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> </div> </div> </section> <!--End sampleSection -->.sampleWrapper .trisectionItem{ //PCは3列表示 width: calc((100% - 300px) / 3); margin-right:calc(300px / 2); margin-bottom: 50px; &:nth-of-type(3n){ margin-right: 0; } //タブレットでは2列表示 @include mq('tab_sm'){ width: calc((100% - 100px) / 2); margin-right:100px; margin-bottom: 50px; &:nth-of-type(2n){ margin-right: 0; } &:nth-of-type(3n){ margin-right:100px; } &:nth-of-type(6n){ margin-right: 0; } } //スマホでは1列表示 @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } .sampleItem{ padding: 20px; }⑤ ３等分レイアウト PC３列 タブレット２列スマホ2列 （margin均等）
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">３等分レイアウト</h2> <p class="subHeading colorBlack">３等分レイアウト</p> </div> <div class="sampleWrapper flexWrapper bg-info"> <div class="sampleItem trisectionItem bg-primary"> <p class="test01"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem bg-secondary"> <p class="test02"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem bg-success"> <p class="test03"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem bg-primary"> <p class="test04"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem bg-secondary"> <p class="test05"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> <div class="sampleItem trisectionItem bg-success"> <p class="test06"> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> </div> </div> </div> </section> <!--End sampleSection -->.sampleWrapper .trisectionItem{ width: calc((100% - 100px) / 3); margin-right:calc(100px / 2); margin-bottom: 30px; &:nth-of-type(3n){ margin-right: 0; } //タブレットは２列 @include mq('tab_sm'){ width: calc((100% - 100px) / 2); margin-right:100px; margin-bottom: 30px; &:nth-of-type(2n){ margin-right: 0; } &:nth-of-type(3n){ margin-right:100px; } &:nth-of-type(6n){ margin-right: 0; } } //スマホも２列 @include mq('sp_lg'){ width: calc((100% - 40px) / 2); margin-right:40px;//アイテム間隔調整 margin-bottom: 30px; &:nth-of-type(2n){ margin-right: 0; } &:nth-of-type(3n){ margin-right:40px;//アイテム間隔調整 } &:nth-of-type(6n){ margin-right: 0; } } @include mq('sp_sm'){ width: calc((100% - 40px) / 2); margin-right:40px;//アイテム間隔調整 margin-bottom: 30px; &:nth-of-type(2n){ margin-right: 0; } &:nth-of-type(3n){ margin-right:40px;//アイテム間隔調整 } &:nth-of-type(6n){ margin-right: 0; } } } .sampleItem{ padding: 20px; }
- 投稿日：2020-09-06T17:13:54+09:00
【CSS】BEM・MindBEMding の命名規則をミスりがちな人に送る超簡単な覚え方
BEM・MindBEMdingの命名規則は、
一見複雑そうに見えるけど、至ってシンプルで覚えやすいです。
その覚え方を超簡単に説明いたします！基本ルール
BEMとMindBEMdingの違い正直この部分は覚えなくて良いです！！
両方ともBEMなんだな〜程度で大丈夫です。
BEM
- CSS設計のこと
MindBEMding
- BEMをCSSのクラス名に適用するために作られた命名規則
MindBEMdingのことをBEMと呼ばれがち。笑書き方
BEMでは、
BlockElementModifireの三つに分けて、命名します。
- Block - 一番大きな塊。
- Element - 塊に対する子要素
- Modifire - それぞれの要素の装飾(色を変えたり、形を変えたり)
基本的には、
BlockElementModifireを
Block__Element--Modifire
と結合して書きます。ミスりがちな部分と覚え方
ModifireとElementをミスりがちな人へ
__は下に線があるので子要素--は真ん中に線があるので同階層のバージョン違いと私は覚えています。
.Block--Modifire {} /* Blockの同階層のバージョン違い */ .Block__Element {} /* Blockの子要素 */ .Block__Element--Modifire {} /* Blockの子要素に対するバージョン違い */ハイフンやアンダーバーの個数をミスりがちな人へ
BEMが基本的にハイフンやアンダーバーが2本なのは、
単語の命名にケバブケースを使う可能性があるからです。
(キャメルケースに統一して、個数を1つにしているケースもちらっとお聞きしますが、
共通認識取りづらいためおすすめはしません！)
- 投稿日：2020-09-06T16:48:18+09:00
【css】【カード（card）】コンポーネント集
※自分用メモです
① メルカリの商品一覧風
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">cardコンポーネント</h2> <p class="subHeading colorBlack">cardコンポーネント</p> </div> <!-- ###３分割 --> <div class="sampleWrapper flexWrapper bg-info"> <div class="sampleItem trisectionItem bg-primary"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> <div class="sampleItem trisectionItem bg-secondary"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> <div class="sampleItem trisectionItem bg-success"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> </div> <!-- End３分割 --> <!-- ### 4分割 --> <div class="sampleWrapper flexWrapper bg-info"> <div class="sampleItem quarterItem bg-primary"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> <div class="sampleItem quarterItem bg-secondary"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> <div class="sampleItem quarterItem bg-success"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> <div class="sampleItem quarterItem bg-danger"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> </div> <!-- End 4分割 --> <!-- ### 5分割 --> <div class="sampleWrapper flexWrapper bg-info"> <div class="sampleItem fifthsItem bg-primary"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> <div class="sampleItem fifthsItem bg-secondary"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> <div class="sampleItem fifthsItem bg-success"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> <div class="sampleItem fifthsItem bg-danger"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> <div class="sampleItem fifthsItem bg-warning"> <a class="c_card" href="#"> <div class="c_cardTop"> <span class="c_cardCaption colorWhite">¥5,000</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionMd colorBlack">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDescription descriptionSm colorBlack">ここにカードの説明文を入れますここにカードの説明文を入れます</p> </div> </a> </div> </div> <!-- End 5分割 --> </div> </section> <!--End sampleSection -->.trisectionItem{ width: calc((100% - 100px) / 3); margin-right:calc(100px / 2); margin-bottom: 40px; &:nth-of-type(3n){ margin-right: 0; } @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } .quarterItem{ width: calc((100% - 100px) / 4); margin-right:calc(100px / 3); margin-bottom: 50px; &:nth-of-type(4n){ margin-right: 0; } @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } .fifthsItem{ width: calc((100% - 100px) / 5); margin-right:calc(100px / 4); margin-bottom: 40px; &:nth-of-type(5n){ margin-right: 0; } @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } .c_card{ &:hover{ text-decoration: none; } } .c_cardTop{ position: relative; } .c_cardCaption{ position: absolute; bottom: 15px;//キャプションの位置調整 background-color: rgba(0,0,0,.4); padding:2px 12px; } .c_cardBottom{ padding: 10px; } .c_cardTitle{ margin-bottom: 20px; }② 任天堂トピックス風
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">cardコンポーネント</h2> <p class="subHeading colorBlack">cardコンポーネント</p> </div> <!-- ###３分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> </div> <!-- End３分割 --> <!-- ### 4分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> </div> <!-- End 4分割 --> <!-- ### 5分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <p class="c_cardDate descriptionSm colorBlack font-weight-bold">2019/01/01</p> <p class="c_cardDetail descriptionXs colorBlack">ここにも少しテキスト</p> <i class="c_cardArrow fa fa-arrow-circle-right"></i> </div> </a> </div> </div> <!-- End 5分割 --> </div> </section> <!--End sampleSection -->// 3,4,5分割のscssは省略してあります .c_card{ border-bottom: 1px solid red; display: block; padding-bottom: 20px; &:hover{ text-decoration: none; } } .c_cardBottom{ padding-top: 10px; position: relative; } .c_cardTitle{ margin-bottom: 26px; } .c_cardDate{ margin-bottom: 7px; } .c_cardArrow{ position: absolute; bottom: 0; right: 0; color:red; }③ スクエアエニックストピックス風
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">cardコンポーネント</h2> <p class="subHeading colorBlack">cardコンポーネント</p> </div> <!-- ###３分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> </div> <!-- End３分割 --> <!-- ### 4分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> </div> <!-- End 4分割 --> <!-- ### 5分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardCenter"> <p class="c_cardCategory descriptionSm colorWhite">カテゴリー</p> <p class="c_cardDate descriptionSm colorBlack">2020.01.01</p> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">ここにカードのタイトルを入れますここにカードのタイトルを入れます</p> <a href="#" class="c_cardLink descriptionSm colorBlack">詳細はこちら</a> </div> <div class="c_cardButtonWrapper"> <button onclick="location.href='#'" type="button" class="c_cardButton btn btn-primary">詳細をみる</button> </div> </a> </div> </div> <!-- End 5分割 --> </div> </section> <!--End sampleSection -->// 3,4,5分割のscssは省略してあります .c_card{ &:hover{ text-decoration: none; } } .c_cardCenter{ display: flex; align-items: center; justify-content: space-between; } .c_cardCategory{ background-color: red; padding: 3px; } .c_cardBottom{ padding: 10px 0px; } .c_cardTitle{ margin-bottom: 20px; } .c_cardLink{ color:red; text-decoration: underline; } .c_cardButton{ display: block; width: 100%; }④ スクエアエニックスe-STORE風
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">cardコンポーネント</h2> <p class="subHeading colorBlack">cardコンポーネント</p> </div> <!-- ###３分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> </div> <!-- End３分割 --> <!-- ### 4分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> </div> <!-- End 4分割 --> <!-- ### 5分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardLeft"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> <div class="c_cardRight"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardPrice descriptionLg font-weight-bold">7,480円（税込）</p> <p class="c_cardDate descriptionSm colorBlack">発売日：2020.01.01</p> <div class="c_cardCategoryWrapper"> <p class="c_cardCategory descriptionXs">カテゴリ01</p> <p class="c_cardCategory descriptionXs">カテゴリ02</p> </div> </div> </a> </div> </div> <!-- End 5分割 --> </div> </section> <!--End sampleSection -->.trisectionItem{ width: calc((100% - 100px) / 3); margin-right:calc(100px / 2); margin-bottom: 40px; &:nth-of-type(3n){ margin-right: 0; } // ipadでは2等分のレイアウトに変更 @include mq('tab_sm'){ width: calc((100% - 100px) / 2); margin-right:100px; margin-bottom: 40px; &:nth-of-type(2n){ margin-right: 0; } } //スマホから1列表示 @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } .quarterItem{ width: calc((100% - 100px) / 4); margin-right:calc(100px / 3); margin-bottom: 50px; &:nth-of-type(4n){ margin-right: 0; } // ipadでは2等分のレイアウトに変更 @include mq('tab_sm'){ width: calc((100% - 100px) / 2); margin-right:100px; margin-bottom: 40px; &:nth-of-type(2n){ margin-right: 0; } } //スマホから1列表示 @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } .fifthsItem{ width: calc((100% - 100px) / 5); margin-right:calc(100px / 4); margin-bottom: 40px; &:nth-of-type(5n){ margin-right: 0; } // ipadでは2等分のレイアウトに変更 @include mq('tab_sm'){ width: calc((100% - 100px) / 2); margin-right:100px; margin-bottom: 40px; &:nth-of-type(2n){ margin-right: 0; } } //スマホから1列表示 @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } .c_card{ display: flex; align-items: start; &:hover{ text-decoration: none; } } .c_cardImage{ width: 150px; height: 160px; object-fit: cover; margin-right: 25px; } .c_cardTitle{ margin-bottom: 10px; } .c_cardPrice{ margin-bottom: 10px; } .c_cardDate{ margin-bottom: 35px; } .c_cardCategoryWrapper{ display: flex; align-items: center; } .c_cardCategory{ color:white; background-color: red; margin-right: 2px; &:last-of-type{ margin-right: 0; } } //PC時の画像サイズ調整 .quarterItem{ .c_cardImage{ @include mq('pc'){ width: 130px; } } } .fifthsItem{ .c_cardImage{ @include mq('pc'){ width: 80px; margin-right: 10px; } } }④ ドミノピザ風
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">cardコンポーネント</h2> <p class="subHeading colorBlack">cardコンポーネント</p> </div> <!-- ###３分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> </div> <!-- End３分割 --> <!-- ### 4分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> </div> <!-- End 4分割 --> <!-- ### 5分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <div class="c_cardTop"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> <button onclick="location.href='#'" type="button" class="c_cardButton descriptionSm btn colorWhite">詳しくはこちら<i class="c_cardButtonArrow fas fa-arrow-right"></i></button> </div> <div class="c_cardBottom"> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> </div> </a> </div> </div> <!-- End 5分割 --> </div> </section> <!--End sampleSection -->.trisectionItem{ width: calc((100% - 100px) / 3); margin-right:calc(100px / 2); margin-bottom: 40px; &:nth-of-type(3n){ margin-right: 0; } @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } .quarterItem{ width: calc((100% - 100px) / 4); margin-right:calc(100px / 3); margin-bottom: 50px; &:nth-of-type(4n){ margin-right: 0; } // ipadでは2等分のレイアウトに変更 @include mq('tab_sm'){ width: calc((100% - 100px) / 2); margin-right:100px; margin-bottom: 40px; &:nth-of-type(2n){ margin-right: 0; } } @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } .fifthsItem{ width: calc((100% - 100px) / 5); margin-right:calc(100px / 4); margin-bottom: 40px; &:nth-of-type(5n){ margin-right: 0; } // ipadでは2等分のレイアウトに変更 @include mq('tab_sm'){ width: calc((100% - 100px) / 2); margin-right:100px; margin-bottom: 40px; &:nth-of-type(2n){ margin-right: 0; } } @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } // 3,4,5分割のscssは省略してあります .c_card{ display: block;//paddingを調整するため padding: 10px 15px; border: 1px solid red; &:hover{ text-decoration: none; } } .c_cardTop{ margin-bottom: 20px; } .c_cardTitle{ margin-bottom: 20px; } .c_cardDescription{ margin-bottom: 10px; } .c_cardButton{ background-color: red; padding: 10px; &:hover{ color: #fff; text-decoration: underline; } } .c_cardButtonArrow{ margin-left: 20px; }⑤ JAL風
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">cardコンポーネント</h2> <p class="subHeading colorBlack">cardコンポーネント</p> </div> <!-- ###３分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem trisectionItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon01 fas fa-ticket-alt"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon02 far fa-clock"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon03 fas fa-plane-departure"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> </div> <!-- End３分割 --> <!-- ### 4分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem quarterItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon01 fas fa-ticket-alt"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon02 far fa-clock"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon03 fas fa-plane-departure"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon04 fas fa-couch"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> </div> <!-- End 4分割 --> <!-- ### 5分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem fifthsItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon01 fas fa-ticket-alt"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon02 far fa-clock"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon03 fas fa-plane-departure"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon04 fas fa-couch"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card text-center" href="#"> <div class="c_cardTop"> <i class="c_cardIcon c_cardIcon05 fas fa-star-half-alt"></i> </div> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorBlack font-weight-bold">タイトル</p> <p class="c_cardDescription descriptionMd colorBlack"> ここに説明文が入りますここに説明文が入ります ここに説明文が入りますここに説明文が入ります </p> </div> </a> </div> </div> <!-- End 5分割 --> </div> </section> <!--End sampleSection -->//3,4,5分割scssは省略します .c_card{ &:hover{ text-decoration: none; } } .c_cardIcon{ font-size: 50px; margin-bottom: 15px; } .c_cardTitle{ margin-bottom: 12px; }⑥ JAL風 キャプション背景透過
<!-- ### sampleSection --> <section id="sampleSection" class="sampleSection sectionPadding"> <div class="inner"> <div class="headingWrapper"> <h2 class="sectionHeading colorBlack">cardコンポーネント</h2> <p class="subHeading colorBlack">cardコンポーネント</p> </div> <!-- ###３分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> <div class="sampleItem trisectionItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> </div> <!-- End３分割 --> <!-- ### 4分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> <div class="sampleItem quarterItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> </div> <!-- End 4分割 --> <!-- ### 5分割 --> <div class="sampleWrapper flexWrapper"> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> <div class="sampleItem fifthsItem"> <a class="c_card" href="#"> <span class="c_cardCaption descriptionMd colorBlack">カテゴリー</span> <img class="c_cardImage" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt=""> <div class="c_cardBottom"> <p class="c_cardTitle descriptionLg colorWhite font-weight-bold">ここにタイトルが入りますここにタイトルが入ります</p> </div> </a> </div> </div> <!-- End 5分割 --> </div> </section> <!--End sampleSection -->.trisectionItem{ width: calc((100% - 100px) / 3); margin-right:calc(100px / 2); margin-bottom: 40px; &:nth-of-type(3n){ margin-right: 0; } // ipadでは2等分のレイアウトに変更 @include mq('tab_sm'){ width: calc((100% - 100px) / 2); margin-right:100px; margin-bottom: 40px; &:nth-of-type(2n){ margin-right: 0; } } @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 70px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 70px; &:last-of-type{ margin-bottom: 0px; } } } .quarterItem{ width: calc((100% - 100px) / 4); margin-right:calc(100px / 3); margin-bottom: 50px; &:nth-of-type(4n){ margin-right: 0; } // ipadでは2等分のレイアウトに変更 @include mq('tab_sm'){ width: calc((100% - 100px) / 2); margin-right:100px; margin-bottom: 40px; &:nth-of-type(2n){ margin-right: 0; } } @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } .fifthsItem{ width: calc((100% - 100px) / 5); margin-right:calc(100px / 4); margin-bottom: 40px; &:nth-of-type(5n){ margin-right: 0; } // ipadでは2等分のレイアウトに変更 @include mq('tab_sm'){ width: calc((100% - 100px) / 2); margin-right:100px; margin-bottom: 40px; &:nth-of-type(2n){ margin-right: 0; } } @include mq('sp_lg'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } @include mq('sp_sm'){ width: 100%; margin-right: 0; margin-bottom: 50px; &:last-of-type{ margin-bottom: 0px; } } } //3,4,5分割scssは省略します .c_card{ // padding: 10px; display: block;//paddingをかけるため position: relative; &:hover{ text-decoration: none; } } .c_cardCaption{ position: absolute; top: 10px; left: 10px; background-color: white; padding: 5px 8px; } .c_cardImage{ border-radius: 6px; } .c_cardBottom{ position: absolute; display: block; width: 100%; height: 40%; bottom:0px; padding: 10px; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 27%,rgba(0,0,0,.65) 55%,rgba(0,0,0,.8) 100%); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .c_cardTitle{ margin-bottom: 12px; } .fifthsItem{ .c_cardBottom{ height: 50%; } }
- 投稿日：2020-09-06T16:17:03+09:00
Sass for文で楽したい
前提
SassのSCSS記法を用いる。
前回の続き。https://qiita.com/mei0210/items/5fdeef361249aa3a2f9a
style.scss@media screen and (max-width: 900px) and (min-width: 701px){ width: calc(100% / 4); } @media screen and (max-width: 1100px) and (min-width: 901px){ width: calc(100% / 5); } @media screen and (max-width: 1300px) and (min-width: 1101px){ width: calc(100% / 6); } @media screen and (max-width: 1500px) and (min-width: 1301px){ width: calc(100% / 7); }max-width 1500pxまでメディアクエリで書いた。
max-width 2900pxまで同じように書いていきたい。
地道に書いていくのはつらいので...for文で書く
style.scss@for $i from 0 through 10 { @media (max-width: $i * 200 + 900px) and (min-width: $i * 200 + 701px) { width: #{100% / ($i + 4)}; } }これだけ！
cssにコンパイル↓
style.css@media (max-width: 900px) and (min-width: 701px) { .wrap .circle { width: 25%; } } @media (max-width: 1100px) and (min-width: 901px) { .wrap .circle { width: 20%; } } @media (max-width: 1300px) and (min-width: 1101px) { .wrap .circle { width: 16.66667%; } } @media (max-width: 1500px) and (min-width: 1301px) { .wrap .circle { width: 14.28571%; } } @media (max-width: 1700px) and (min-width: 1501px) { .wrap .circle { width: 12.5%; } } @media (max-width: 1900px) and (min-width: 1701px) { .wrap .circle { width: 11.11111%; } } @media (max-width: 2100px) and (min-width: 1901px) { .wrap .circle { width: 10%; } } @media (max-width: 2300px) and (min-width: 2101px) { .wrap .circle { width: 9.09091%; } } @media (max-width: 2500px) and (min-width: 2301px) { .wrap .circle { width: 8.33333%; } } @media (max-width: 2700px) and (min-width: 2501px) { .wrap .circle { width: 7.69231%; } } @media (max-width: 2900px) and (min-width: 2701px) { .wrap .circle { width: 7.14286%; } }for文とても便利。
参考
- 投稿日：2020-09-06T16:01:50+09:00
Sass(CSS) 等間隔に配置したい
前提
SassのSCSS記法を用いる。
index.html<div class="wrap"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>style.scss.wrap { display: flex; flex-wrap: wrap; width: 30%; background: skyblue; .circle { width: 80px; height: 80px; border-radius: 50%; background: blue; } }
水色の範囲は画面幅に合わせて３０％としているので、可変である。
ここで実現したいことは、
- 青丸が等間隔に並ぶ
- 水色の四角の左右に青丸との間隔が無いようにする
- 下の段の青丸は上の段の間隔に合わせて左詰めにする
- 画面幅を変えても、上の条件を満たすようにする
試行錯誤① justify-contentでなんとかしたかった
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
style.scss.wrap { display: flex; flex-wrap: wrap; justify-content: space-between; width: 30%; background: skyblue; .circle { width: 80px; height: 80px; border-radius: 50%; background: blue; } }justify-content: space-between; を追加。
◎条件を満たしている項目
- 青丸が等間隔に並ぶ
- 水色の四角の左右に青丸との間隔が無いようにする
×満たしていない項目
- 下の段の青丸は上の段の間隔に合わせて左詰めにする
↑を満たすには、justify-contentでは無理そう。
試行錯誤② メディアクエリで頑張る
メディアクエリで青丸の幅を画面サイズに合わせて変える。
style.scss.wrap { display: flex; flex-wrap: wrap; // justify-content: space-between; width: 30%; background: skyblue; .circle { width: calc(100% / 3); height: 80px; border-radius: 50%; background: blue; @media screen and (max-width: 900px) and (min-width: 701px){ width: calc(100% / 4); } @media screen and (max-width: 1100px) and (min-width: 901px){ width: calc(100% / 5); } @media screen and (max-width: 1300px) and (min-width: 1101px){ width: calc(100% / 6); } @media screen and (max-width: 1500px) and (min-width: 1301px){ width: calc(100% / 7); } } }
画面幅を変更しても、条件を満たす配置になった！
画面幅1500pxまでしか書いていないので、もっと増やしたい...
でも、いちいち書くの面倒なので↓Sassでfor文を書く
style.scss@media screen and (max-width: 900px) and (min-width: 701px){ width: calc(100% / 4); } @media screen and (max-width: 1100px) and (min-width: 901px){ width: calc(100% / 5); } @media screen and (max-width: 1300px) and (min-width: 1101px){ width: calc(100% / 6); } @media screen and (max-width: 1500px) and (min-width: 1301px){ width: calc(100% / 7); }上で地道に書いたこのコードをSassのfor文を使って書いてみる。
- 投稿日：2020-09-06T15:40:57+09:00
【CSS】Github風<input>
こんな感じの
inputの枠線（border+box-shadow）
ちなみに、こちらにもあります
CSS
input { border-radius: 4px; padding: 6px 10px; font-size: .875rem; border: 1px solid #dfdfdf; outline: 0; /* ついでにフワッとしたアニメーション */ transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } input:focus { border: 1px solid #0d6efd; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25); }結果
- 投稿日：2020-09-06T10:24:24+09:00
【CSS】list-style: none; text-align: left; が効かない時の対処法
はじめに
久しぶりにCSSをやってクッソハマった。こんな簡単なことでハマる人は少ないかもしれませが一応共有しておきます。
問題
<li>要素の・を取り除いた後に左寄せができない。
<h3>プログラミング言語</h3> <ul> <li>Ruby</li> <li>Golang</li> <li>Javascript</li> <li>Python</li> </ul>ul { list-style: none; text-align: left; }デベロッパーツールで確認する
ulのpaddingが40になっている。これを0にすればいいだけじゃん・・・
ul { list-style: none; padding-left: 0; }できた。アツくなっていたからか、これに気がつかず2時間ぐらいハマってた。CSSは難しい?
- 投稿日：2020-09-06T06:02:52+09:00
初心者がGitHub Pagesを使って自作ページ（おふざけ）を公開しました！
前提
今年8月末にゼロからHTMLに取り組み始めた、正真正銘の初心者（！）です。
きっかけは、黒澤さん（@kurokurosawa）によるウェビナー「YoshiTech 会津わろ法則」。
黒澤さんの教えをもとに、学習を通して得たこと・学んだことをQiitaにアウトプットする取り組みを行っています。今回のテーマ「自分でコードを書いたページを公開しました！」
というわけで今回なんですけども、さっそくこちらのページを見ていただけますか？
「最高齢ラッパー」として一部好事家から愛され続ける坂上弘（さかうえひろし）先生の「交通地獄」という名曲がありまして、その紹介ページを練習用に作ってみました。
坂上先生の超絶パフォーマンスについては、上記ページにもYouTubeへのリンクを張ってますので是非ご覧いただきたいのですが・・・
それはさておき（？）、初心者ながら思い切ってGitHubに登録し、なんとかGitHub Pagesへの公開までこぎつけることができました！
このページ自体は、Udemyの講座[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門のHTML/CSS編での課題をひな型として、自分なりのおふざけ（笑）も交えて作ってみたものです。
なお、ページ作成上の学習テーマとしては、フロート機能の習得を目指しました。また、2枚の画像をフェードイン・フェードアウトさせるアニメーションを、CSSを用いて作成するという冒険もしてみました。
（それにしても、公開したページを改めてスマホ経由で見てみると、レイアウトに改善の余地が大アリですね・・・新たな課題が出てきた！）
超絶初心者もできた！GitHub Pagesの利用
そもそも私は「GitHubのGの字も知らない」（ていうか読み方が「ジットハブ」か「ギットハブ」かいまだにピンときていない）レベルの初心者なんですが、それでも探り探りページの公開までたどり着けました。
そこで、自分用の振り返りも兼ねて、（初心者なりの）登録から公開までの手順をご紹介したいと思います。
（ 作業に当たっては「【初心者向け】GitHub Pagesを使ってHPを爆速で公開する」を参考にさせていただきました。ありがとうございます！ ）1.アカウントを作る！
まずは公式サイトでアカウントを作ります！（あたりまえ体操！）
2.リポジトリを作る！
アカウントを作ったら、次はそのまま公式サイト上で「リポジトリ」を作ります！
（と言いながら、「リポジトリ」とはいったい何なのか、実はいまだによくわかってません。。。公式サイトの指示通りにやっていたら、なんとなく流れで作れちゃいました）
3.GitHub Desktopをインストールする！
さて、このあたりから初心者には難しくなってきます。
どうやら次は「リポジトリのクローン」という作業が必要らしいのですが、これがよくわからない・・・
GitBash？を使う方法も紹介されていたのですが、超絶初心者の私は「バッシュ？バスケットシューズ？あの娘ぼくがロングシュート決めたらどんな顔するだろう？」というような有様だったので、こちらは断念。
その代わり、今回私が利用したのは「GitHub Desktop」でした。
Windowsユーザーなので、こちらのページからWindows版をダウンロード＆インストール。
4.GitHub Desktopを使ってクローン・コミット・パブリッシュ！
クローン？コミット？パブリッシュ？
いやはや、自分で言っておきながらコトバの意味が分かっていません（汗）にもかかわらず、偶然にも手順をわかりやすく説明したページが見つかったので、なんとかなりました！
そのページはこちらです。
英語のページですが、真ん中あたりにある「Using GitHub Desktop to PUSH to your local content to GitHub.」という項目に、画像付きの丁寧な説明があります。
英語が苦手でも、掲載されている画像を順番に見ていけば、作業の流れはなんとなく分かります。
- 公式サイトでレポジトリを作った後の画面に出てくる「Set up in Desktop」のボタンをクリックする
- するとGitHub Desktopが開くので、そのまま「Clone」のボタンをクリックする
- 自動でPC上に（デフォルトではドキュメントフォルダ内）GitHubレポジトリのフォルダが作成される
- いつもお世話になっているWindowsのエクスプローラを使って、GitHubレポジトリのフォルダの中に、公開したいページのファイル群（htmlファイル・CSSファイル・画像ファイルなど）をコピペする（※ページ公開後にリンク切れが起きないように、htmlファイル等のフォルダ構成はそのままにしておく）
- GitHub Desktopに戻って、さきほどコピペしたファイルがちゃんと表示されているのを確認したら、添付メッセージ（入力必須となっています）を書いて、「Commit to master」のボタンをクリックする
- 最後に、GitHub Desktop上の「Publish branch」というボタンをクリックする
以上の手順をたどれば、作業はあらかた完了です！
5.実際にWeb上に反映されるまでは、少し時間がかかります
ここまできたら、あとは自作ページがWeb上に公開されているのを確認するのみです。
ブラウザで「https://（ユーザー名）.github.io/（htmlファイル名）.html」にアクセスすれば、見事自分のページが表示される段取りになっています。
ただ、ここで若干もどかしいのが、「実際にWeb上へ反映されるまでは少し時間がかかる」という点です。
なお、GitHub Pagesへのアップロードが上手くいっているかどうかは、公式サイト上で確認をすることができます。
この辺の事情については、「GitHub Pagesによる静的サイトの公開」というnoteの記事に詳しく書いてありました。
（記事の終盤で丁寧な解説を読むことができます）なお私の場合は、アップロードしたデータ量が極小だったのか、わりとすぐに公開してもらえました！
おわりに
このように、GitHub自体はよくわからない私のような初心者でも、GitHub Pagesを用いた自作ページの公開は十分に可能です。
いや、むしろ初心者であればあるほど、自分で作ったページをWeb上で見ることの面白さは、他では代えがたいものがあるのではないでしょうか？
もしGitHub Pagesが気になっている初心者の方がいらっしゃったら、思い立ったが吉日と申します。エキサイティングな経験になること請け合いです！
最後まで読んでいただき、ありがとうございました！
追記
前回・前々回の記事を、なんと黒澤さん（@kurokurosawa）がほめてくださっていました！
（ツイッターではリアクションできず、申し訳ありません・・・）とてもありがたいことです。
学習にいっそう身が入るというものです。この勢いで、次回は「CSSのフロート機能を学習する際に考えたこと・気づいたこと」について、アウトプットしようと思います！