リファレンスサイト ・作って学ぶコーディング学習サイト 正直、無料でこんなサイトがあることが信じられない。 それも、ソースコードについても一切の権利を放棄してくれている。 画像についてはフリー素材だそうだ。 リセットCSSがいかに重要かよくわかった。 絶対にいる。 formのborderとか全部消去するのとか信じられなかったけど、 ブラウザによって、見え方が変わるとかあるし。なによりも思い通りになる。 destyleのcdn <link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/> プロフィールサイト sectionタグについて -------------------- sectionは一般的なセクションを定義するタグ、 要素内容を記事として配信する意味合いが強い場合は、 articleを使用することが推奨されています。 また、 補足情報の場合にはaside、 ナビゲーションの場合にはnavを使用します。 ヘッダに該当する場合にはheader フッタの場合にはfooter,などのタグを使用するほうが、 ウェブページの文書構造がより明確になるでしょう。 完成図 全体のレイアウト header ナビバー main メインビジュアル aboutセクション bicycleセクション footer コピーライト表記 全体のCSS {{-- 全体のスタイル --}} <style> html { font-size: 100%; } body { color: #383e45; font-size: 0.9rem; } a { text-decoration: none; } img { max-width: 100%; } ul { list-style: none; padding: 0; } .wrapper { max-width: 960px; /* 中央揃え */ margin: 0 auto 100px auto; padding: 0 4%; text-align: center; } </style> css適用前と後の画像　適用後、画面外へのはみ出しがなくなり、中央揃えになった img要素にmax-width:100%;を適用する理由 ・img要素の親要素でサイズをしていても画像ははみだしてしまう ・例えば下の画像のように親要素にwidth:120px;があっても無視される。 imgにmax-width:100%;がなかった場合、親要素のサイズから普通にはみ出す。 header(ナビ) イメージ図(完成図) 現状: ロゴの横幅を縮小 css <style> .site-title { /*imgの親要素にwidth:120px; img要素にmax-width:100%;*/ width: 120px; line-height: 1px;/*後ろの方で動作確認あり*/ padding: 10px 0; } </style> html <header id="header" class="wrapper"> <h1 class="site-title"><a href="index.html"><img src="{{ asset('storage\profile\logo.svg') }}" alt="Profile"></a></h1> <nav> <ul> <li><a href="#about">About</a></li> <li><a href="#bicycle">Bicycle</a></li> </ul> </nav> </header> インライン要素のaタグが親要素から下にずれているのを修正する。 aタグが親要素のh1タグとずれている。 ロゴのaタグの修正 <style> .site-title { width: 120px; /*line-height にh1タグの高さよりも小さい値「1px」を指定することで、*/ /*h1タグ(h1に限らずdiv等)の上下の余白が消えるため、ロゴ画像の高さと揃う*/ /*「line-height: 0;」を指定してもOKです*/ line-height: 1px; padding: 10px 0; } /* + インライン要素からブロック要素に変更するとこでwidthとheightが効く,marginやpaddingが可能になる*/ .site-title a { display: block; } </style> <header id="header" class="wrapper"> <h1 class="site-title"><a href="index.html"><img src="{{ asset('storage\profile\logo.svg') }}" alt="Profile"></a></h1> <nav> </nav> </header> 収まった。 header要素を横並びに変更する。 ロゴとnavを横並び navのulリストを横並び ロゴとnavを横並び <style> /* + */ #header { /*横並び*/ display: flex; /*軸と平行方向の配置*/ justify-content: space-between; /*軸と交差方向の配置*/ align-items: center; } </style> <header class="wrapper"> <h1 class="site-title"> <a href="#"><img src="https://code-step.com/demo/html/profile/img/logo.svg" alt="Profile"> </a> </h1> <nav> <ul> <li><a href="#about">About</a></li> <li><a href="#bicycle">Bicycle</a></li> </ul> </nav> </header> ロゴとnavを横並び aタグとliタグがずれているのを修正する。 ・aタグとliタグがずれているのを修正・navのlinkの文字色とホバー時のスタイルも変更 /* + */ #header li a { display: block; color: #24292e; } #header li a:hover { opacity: 0.7; } きれいにおさまった ulリストも横並びにする ul要素を横並びのリストに変更する li要素の2番めにmargin-leftを設定する headerのcssを追加 /* + */ header ul { display: flex; } /* + */ header li:nth-child(n+2) { margin-left: 30px; } #header.warapperにかかるマージンボトムを上書きにして０にする。 #headerのマージンボトムを０に変更 #header.wrapper { margin-bottom: 0; } 次、メインビジュアルの作成 {{-- mainvisualのスタイル --}} <style> #mainvisual { margin-bottom: 60px; } /* + すでにimg要素にはmax-width:100%;*/ #mainvisual img { max-width: 1920px; /* +max-widthを修正したため、width:100%;がいる.基本画像には貼っとけ。親要素の幅になる*/ width: 100%; height: 600px; /* 画像の縦横比を維持して指定した幅、高さで表示してくれる。w,h,oは画像の３点セット */ object-fit: cover; } </style> <div id="mainvisual"> <img src="{{ asset('storage\profile\mainvisual.jpg') }}" alt="テキストテキストテキスト"> </div> メモ：画像のトリミング #mainvisual img { max-width: 1920px; height: 600px; /* 画像の縦横比はそのまま。維持したい場合はcover */ object-fit: none; /* 画像の位置を調整。iosでは機能しないみたい・・ */ object-position: 80% 40%; width: 100%; } 画像の位置が変更された セクションの全体のスタイル セクションタイトル css適用前 コンテンツタイトル {{-- section共通スタイル --}} <style> .section-title { margin-bottom: 60px; border-bottom: 1px solid #000; display: inline-block; font-size: 2rem; font-weight: bold; } .content-title { font-size: 1.25rem; padding: 30px 0 30px 0; font-weight: bold; text-align: center; } </style> <h2 class="section-title">About</h2> <h3 class="content-title">KAKERU MIYAICHI</h3> セクションタイトル css適用後 セクションaboutの作成 css適用前 ・画像要素を縮小 ・テキストの書字方向を左書きにする。 {{-- aboutセクションのスタイル --}} <style> #about img { width: 300px; height: 300px; border-radius: 50%; } #about .text { text-align: left; } </style> <section id="about" class="wrapper"> <h2 class="section-title">About</h2> <div class="content"> <img src="{{ asset('storage\profile\about.jpg') }}" alt="テキストテキストテキスト"> <div class="text"> <h3 class="content-title">KAKERU MIYAICHI</h3> <p> テキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキスト </p> </div> </div> </section> css適用後 コンテンツタイトルとテキストが左によりすぎているのを修正する。 {{-- section共通スタイル --}} <style> .content-title { font-size: 1.5rem; font-weight: bold; padding: 10px 0 10px 0; /* + */ text-align: center; } </style> {{-- aboutセクションのスタイル --}} <style> #about img { width: 300px; height: 300px; border-radius: 50%; /* +2 */ /* block要素にして幅が拡張されて改行されるわけではない */ /* 幅は300pxと指定した分だけ、block要素にすることで改行される */ /*+1で .textをinline-blockに変更したため、横並びになったのでblock要素にすることで改行させている。*/ display: block; margin: 0 auto 30px auto; } #about .text { text-align: left; /* +1 インライン要素にすることで幅がコンテンツの幅になる*/ display: inline-block; /*横が余ると中央揃えに変更できる*/ /*書式方向を変更せずに中央揃えができる*/ margin: 0 auto; } </style> +1後の画像 横並びになったので+2で修正した +2後の画像 imgをblock要素にしたことで改行された、幅は300pxしかないのでmx-autoで中央揃えにした。 セクションbisycleの作成 css適用前の画像 テキストのいちが下の画像にくっついているため、誤解されてしまうのを修正 {{-- bicycleセクション --}} <style> #bicycle p { margin-bottom: 50px; } </style> <section id="bicycle" class="wrapper"> <h2 class="section-title">Bicycle</h2> <ul> <li> <img src="{{ asset('storage\profile\bicycle1.jpg') }}" alt="テキストテキストテキスト"> <h3 class="content-title">タイトルタイトル</h3> <p>テキストテキストテキスト</p> </li> <li> <img src="{{ asset('storage\profile\bicycle2.jpg') }}" alt="テキストテキストテキスト"> <h3 class="content-title">タイトルタイトル</h3> <p>テキストテキストテキスト</p> </li> <li> <img src="{{ asset('storage\profile\bicycle3.jpg') }}" alt="テキストテキストテキスト"> <h3 class="content-title">タイトルタイトル</h3> <p>テキストテキストテキスト</p> </li> </ul> </section> css適用後 footerを作成する css適用前 ・フォントサイズを縮小 ・中央に配置 {{-- footerスタイル --}} <style> #footer { text-align: center; padding: 10px 0 10px 0; font-size: 0.625rem; } </style> <footer id="footer"> <p>&copy; 2020 Profile</p> </footer> css適用後 レスポンシブデザインに変更する aboutセクションを横並びに変更する 画像は　css適用前と適用後 {{-- aboutセクションのスタイル --}} <style> #about img { width: 300px; height: 300px; border-radius: 50%; } #about .text { text-align: left; margin: 0 auto; display: inline-block; } /*+*/ @media screen and (min-width: 600px) { #about .content { display: flex; justify-content: center; align-items: center; } #about img { width: 150px; height: 150px; margin: 0 30px 0 0; } #about .text { margin: 0; } } </style> bicycleセクションのul画像リストを横並びにする {{-- bicycleセクション --}} <style> #bicycle p { margin-bottom: 50px; } /* + */ @media screen and (min-width: 600px) { #bicycle ul { display: flex; justify-content: space-between; } #bicycle li { width: calc(100%/3 - 30px); } } </style> メモ： <-- bootstrapのカードみたい--> <li> <img src="{{ asset('storage\profile\bicycle1.jpg') }}" alt="テキストテキストテキスト"> <h3 class="content-title">タイトルタイトル</h3> <p>テキストテキストテキスト</p> </li> PHOTO BOOK 完成図 リセットCSSのCDN <link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/> 全体のレイアウト header logo メインビジュアル メイン INDEXセクション DETAILセクション footer 全体のCSS {{-- 全体のCSS --}} <style> html { font-size: 100%; } body { background-color: #f4f9ff; color: #333; font-size: 0.875rem; } img { max-width: 100%; } /* サイト全体のコンテンツ幅を設定 */ .wrapper { max-width: 1000px; margin: 0 auto; } /* 中のコンテンツ部分の最大幅を設定 */ .inner { max-width: 600px; margin: 0 auto; padding: 0 40px; } </style> css適用後 headerを作成する ロゴの横幅を設定する hタグの上下の余白を消去 aタグの高さ幅を揃える。 上下に余白を設定する ヘッダーのスタイル {{-- headerのCSS --}} <style> #header { padding: 0 10px; margin-top: 60px; margin-bottom: 15px; } /*h1タグ line-height にh1タグの高さよりも小さい値「1px」を指定することで、 h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う 「line-height: 0;」を指定してもOKです*/ #header .site-title { width: 160px; line-height: 1px; } /* aタグのリンク範囲を親要素のサイズに広げる */ #header .site-title a { display: block; } </style> <header id="header"> <h1 class="site-title"> <a href="index.html"><img src="{{ asset('storage\PHOTO BOOK\logo.svg') }}" alt="PHOTO BOOK"></a> </h1> </header> h1の上下に余白がある（リセットCSSによってはなくなる) #header .site-title { width: 160px; /*+*/ line-height: 1px; margin-bottom: 15px; } 余計な余白がなくなった セクション全体のスタイルを作成する {{-- section全体のCSS --}} <style> .section-title { font-size: 1.125rem; font-weight: bold; margin-bottom: 10px; } </style> <h2 class="section-title">INDEX</h2> <h2 class="section-title">DETAIL</h2> メインビジュアルを作成する {{-- mainvisualのスタイル --}} <style> #mainvisual { margin-bottom: 60px; padding: 0 10px; } </style> <div id="mainvisual"> <img src="{{ asset('storage\PHOTO BOOK\mainvisual.jpg') }}" alt="テキストテキストテキスト"> </div> css適用前と後 画像の左右に少し余白もできた セクションindexを作成する css適用前とサイトの完成図 リセットCSSでolの番号は消えている。 <style> #index { background-color: #fff; padding: 30px 0; margin-bottom: 60px; } /*olタグはリストの先頭に番号がつくので、その分だけ左に移動 ※番号を消したい場合は、「list-style-type: none;」を設定*/ #index .index-list { margin-left: 20px; list-style-type: decimal; } #index .index-list li { margin-bottom: 20px; } /* リストの最後は下にマージンをつけない */ #index .index-list li:last-child { margin-bottom: 0; } </style> <section id="index"> <div class="inner"> <h2 class="section-title">INDEX</h2> <ol class="index-list"> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> x 5 </ol> </div> </section> css適用後 セクションdetail css適用前とサイトの完成図 セクションdetail <style> #detail { margin-bottom: 100px; } #detail .content .title { font-size: 1.125rem; font-weight: bold; } #detail .content .img { margin: 0 0 25px 0; } #detail .content .text p { margin-bottom: 20px; } #detail .content dl { /* dt、ddを横並びにする */ display: flex; /* dtとddが100%になったら、横並びを折り返す */ flex-wrap: wrap; padding: 16px 0; margin-bottom: 25px; /* ulの上下に線 */ border-top: solid 1px #dedede; border-bottom: solid 1px #dedede; } #detail .content dt { width: 25%; } #detail .content dd { width: 75%; /*ddの下にはdefautでmbがあるこういうのをresetCssが消してくる*/ /*今回使用しているのは残っていたので消去する必要がある*/ margin-bottom: 0; } #detail .content .link { color: #333; } #detail .content .link:hover { opacity: 0.8; } </style> <section id="detail"> <div class="inner"> <h2 class="section-title">DETAIL</h2> <div class="content"> <img class="img" src="{{ asset('storage\PHOTO BOOK\detail.jpg') }}" alt=""> <div class="text"> <p class="title">タイトルタイトルタイトル</p> <dl> <dt>著者</dt> <dd>タイトルタイトルタイトル</dd> <dt>出版社</dt> <dd>タイトルタイトルタイトル</dd> <dt>発行年</dt> <dd>タイトルタイトルタイトル</dd> </dl> <p> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> <a class="link" href="#" target="_blank" rel="noopener noreferrer">オンラインストアで見る</a> </div> </div> </div> </section> 後 ddにmargine-bottome:0;がない場合とある場合 フッター <style> #footer { font-size: 0.625rem; padding: 15px 0; } </style> <footer id="footer"> <p class="inner">&copy; 2020 PHOTO BOOK</p> </footer> 前 後 レスポンシブ対応に変更 css適用前とサイトの完成図 detailセクションを横並びに変更 {{-- 全体のCSS --}} <style> /* 中のコンテンツ部分の最大幅を設定 */ .inner { max-width: 600px; margin: 0 auto; padding: 0 40px; } @media screen and (min-width: 1024px) { .inner { padding: 0 0; } } </style> {{-- headerのCSS --}} <style> #header { padding: 0 10px; margin-top: 60px; margin-bottom: 15px; } @media screen and (min-width: 1024px) { #header { padding: 0 0; } } </style> {{-- mainvisualのCSS --}} <style> #mainvisual { margin-bottom: 60px; padding: 0 10px; } @media screen and (min-width: 1024px) { #mainvisual { padding: 0 0; } } </style> css適用後、もともとあるかないかの余白を消しただけほぼ変わらない。 detailセクションを画像とテキストの横並びに変更 /* detailセクション */ <style> #detail .content .img { /* この部分を上書き */ margin: 0 0 25px 0; } /* + */ @media screen and (min-width: 1024px) { /* + */ #detail .content { display: flex; /* 縦方向は上揃え */ align-items: flex-start; } #detail .content img { width: 270px; margin-right: 60px; } } </style> align-items_flex-startをコメントアウトしたら #detail .content { display: flex; /* 縦方向は上揃え */ /*align-items: flex-start;*/ } 画像がデフォルトのストレッチがかかって伸びてしまう。 PHOTO BOOK 2 全体図 css適用前 全体のcss {{-- 全体のCSS --}} <style> html { font-size: 100%; } body { color: #333; font-size: 0.875rem; } img { max-width: 100%; } ul { list-style: none; padding: 0; } /* サイト全体のコンテンツ幅を設定 */ .wrapper { max-width: 1000px; margin: 0 auto; } /* 中のコンテンツ部分の最大幅を設定 */ .inner { max-width: 800px; margin: 0 auto; padding: 0 20px; } </style> css適用後　画像が収まってサイドに余白ができた。 ヘッダーのスタイルを作成する header <style> #header { margin-top: 60px; margin-bottom: 15px; padding: 0 10px; } /*h1タグ line-height にh1タグの高さよりも小さい値「1px」を指定することで、 h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う 「line-height: 0;」を指定してもOKです*/ #header .site-title { width: 180px; line-height: 1px; } /* aタグのリンク範囲を親要素のサイズに広げる */ #header .site-title a { display: block; } </style> <header id="header"> <h1 class="site-title"> <a href="index.html"><img src="{{ asset('storage\photobook\logo.svg') }}" alt="PHOTO BOOK 2"></a> </h1> </header> 前 後 メインビジュアルのスタイルを作成 mainvisual <style> #mainvisual { margin-bottom: 60px; } </style> <div id="mainvisual"> <img src="{{ asset('storage\photobook\mainvisual.jpg') }}" alt="テキストテキストテキスト"> </div> 後　余白ができた indexセクションのスタイルを作成 indexセクション {{-- indexセクションのスタイル --}} <style> /* indexセクション全体 */ #index { background-color: #f5f5f5; padding: 40px 20px; margin-bottom: 60px; } /* olタグの親要素 */ #index .index-inner { border: solid 1px #333; padding: 30px; } /* olタグ「display: table;」と「margin: 0 auto;」で自要素を中央に配置。 ※この方法を使うとテキストの長さに応じて可変で中央配置できる buttonやaタグなどのインライン要素も中央揃えできる。滅茶苦茶便利*/ #index .index-inner .index-list { display: table; margin: 0 auto; } #index .index-inner .index-list li { margin-bottom: 20px; } /*最後のliタグには margin-bottom を設定しない*/ #index .index-inner .index-list li:last-child { margin-bottom: 0; } </style> <section id="index"> <h2 class="section-title">INDEX</h2> <div class="index-inner"> <ol class="index-list"> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> </ol> </div> </section> css適用前と適用後 画像リストはトリミングのし忘れ。２つに分けて貼るつもりだった。 display: table;margin: 0 auto;がない場合とある場合 コンテンツの要素の幅に応じて中央に配置できる。text-centerだとコンテンツが膨れた場合、めちゃくちゃ崩れるし。 d-table　＋ mx-auto で自要素のテキスト中央揃えはめちゃくちゃいいかもしれん。 画像リストのスタイルを作成する {{-- 画像リスト --}} <style> /* ulタグ */ .list { margin: 30px 0 45px 0; } .list li { margin-bottom: 15px; text-align: center; } /*画像の下にできる隙間を消す*/ .list li img { vertical-align: bottom; } </style> <ul class="list"> <li><img src="{{ asset('storage/photobook/photo1.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/photobook/photo2.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/photobook/photo3.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/photobook/photo4.jpg') }}" alt=""></li> </ul> css適用前と適用後 忘れてた section全体のスタイルを作成する {{-- section全体のスタイル --}} <style> /* セクションのタイトル<h2>のスタイル */ .section-title { font-size: 1.125rem; font-weight: bold; margin-bottom: 30px; text-align: center; } </style> <h2 class="section-title">INDEX</h2> <h2 class="section-title">DETAIL</h2> detailセクション <style> /* detailセクション全体 */ #detail { background-color: #f5f5f5; margin-bottom: 60px; padding: 40px 20px; } #detail dl { border-bottom: solid 1px #333; padding: 0 0 40px 0; } #detail dt { font-weight: bold; } #detail dd { margin-bottom: 10px; } #detail dd:last-child { margin-bottom: 0; } #detail .text { padding: 40px 0 0 0; } #detail .text p { margin-bottom: 20px; } #detail .text .link { color: #333; } #detail .text .link:hover { opacity: 0.8; } </style> <section id="detail"> <h2 class="section-title">DETAIL</h2> <div class="flex"> <dl> <dt>著者：</dt> <dd>タイトルタイトルタイトル</dd> <dt>出版社：</dt> <dd>タイトルタイトルタイトル</dd> <dt>発行年：</dt> <dd>2021年1月1日</dd> </dl> <div class="text"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <a class="link" href="#">オンラインストアで見る</a> </div> </div> </section> css適用前と適用後 フッター <style> #footer { font-size: 0.625rem; padding: 15px 0; text-align: center; } </style> <footer id="footer"> <p class="inner">&copy; 2021 PHOTO BOOK 2</p> </footer> 後 レスポンシブ対応にする css適用前とサイト完成図 全体のcss /* 中のコンテンツ部分の最大幅を設定 */ .inner { max-width: 800px; margin: 0 auto; padding: 0 20px; } /* + */ @media screen and (min-width: 1024px) { .inner { padding: 0; } } header #header { margin-top: 60px; padding: 0 10px; } /* + */ @media screen and (min-width: 1024px) { #header { padding: 0; } } indexセクション #index { background-color: #f5f5f5; padding: 40px 20px; margin-bottom: 60px; } /* + */ @media screen and (min-width: 1024px) { #index { padding: 60px; } } 画像のulリスト .list { margin: 30px 0 45px 0; } .list li { text-align: center; margin-bottom: 15px; } /* + */ @media screen and (min-width: 1024px) { .list { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 30px 0 45px 0; } .list li { width: 49%; margin-bottom: 15px; } } detailセクション /* detailセクション全体 */ #detail { background-color: #f5f5f5; margin-bottom: 60px; padding: 40px 20px; } #detail dl { border-bottom: solid 1px #333; padding: 0 0 40px 0; } #detail .text { padding: 40px 0 0 0; } /* + */ @media screen and (min-width: 1024px) { #detail { padding: 60px; } #detail .flex { display: flex; } #detail dl { width: 35%; border-right: solid 1px #333; padding-right: 40px; border-bottom: none; } #detail .text { width: 65%; padding: 0 0 0 40px; } } レシピサイト／トップページ 全体のレイアウト メイン メインビジュアル テキスト 画像リスト ボタン フッター snsリスト コピーライト表記 全体のCSS html { font-size: 100%; } body { color: #2b2a27; font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif; } img { max-width: 100%; } ul { list-style: none; } a { color: #2b2a27; } /*resetCSSでリセットされたため*/ h1{ font-size: 48px; } 適用後と適用前は画像が画面(bodY要素)からはみ出る セクション全体のスタイル ない。 メインビジュアルのスタイルを作成 メインビジュアルのスタイル <style> #mainvisual img { /* 画像要素を親要素のbodyの幅に合わせる = 画面幅 */ width: 100%; /*要素の高さを windoww画面の高さに合わせる。 */ height: 100vh; /*画像の縦横比を維持 */ object-fit: cover; /*引き伸ばされた画像のい位置をトリミングできる */ object-position: center top; margin-bottom: 80px; } </style> <div id="mainvisual"> <img src="{{ asset('storage\Recipe\mainvisual.jpg') }}" alt=""> </div> css適用前 css適用後　画像の高さがwindowの高さになった object-fitやobject-positionrについての解説サイト Text部分のスタイル css適用前 css適用後 Text部分のスタイル <style> .text { text-align: center; padding: 0 20px; margin-bottom: 80px; } .text .site-title { margin-bottom: 20px; } /*「display: inline-block;」でaタグに幅と高さを持たせる。 paddingでボタンのサイズを調整できるようになる。*/ .text .btn { display: inline-block; border: solid 1px #2b2a27; font-size: 0.875rem; padding: 18px 60px; text-decoration: none; } </style> <div class="text"> <h1 class="site-title">Recipe Diary</h1> <p> 日々の料理レシピをまとめています。<br> 和食や洋食、中華、お菓子までいろいろな料理レシピをアップしていますので、<br> みなさんの献立にお役立てくださいね！ </p> </div> --------------------------------- <div class="text"> <a class="btn" href="#">レシピ一覧を見る</a> </div> ul.flexの画像リストに高さを設定する ・高さは500px ・画像の縦横比を維持させる 画像のリスト部分のスタイル <style> .flex { margin-bottom: 60px; } .flex li img { width: 100%; height: 500px; object-fit: cover; vertical-align: bottom; } </style> <ul class="flex"> <li><img src="{{ asset('storage/Recipe/recipe1.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/Recipe/recipe2.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/Recipe/recipe3.jpg') }}" alt=""></li> </ul> フッターのスタイル フッターのスタイル <style> #footer { font-size: 0.75rem; padding: 20px; text-align: center; } /*リンクはul、liタグで記述 SNSのリンク集という、一つの意味をもったリスト群になるので、ul、liタグでグルーピング ※リストタグを使用しなくても問題ないが、使用した方が検索エンジンに対して より適切に意味を伝えることができると考えリストタグを選択しています。*/ #footer .sns { display: flex; justify-content: center; margin-bottom: 20px; } #footer .sns li { /* 左右に10pxの余白 */ margin: 0 10px; } </style> <footer id="footer"> <ul class="sns"> <li><a href="#">Instagram</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ul> <p>&copy; 2021 Recipe Diary</p> </footer> レスポンシブ対応にする ・画像のリストを横並びに変更 レスポンシブ対応にする /* 画像リスト部分のスタイル */ <style> .flex { margin-bottom: 60px; } .flex li img { width: 100%; height: 500px; object-fit: cover; vertical-align: bottom; } /* + */ @media screen and (min-width: 834px) { .flex { display: flex; } .flex li { width: calc(100%/3); } } </style> ulの画像リストが横並びになった レシピサイト／レシピページ 全体のレイアウト main div（画像とテキスト） div（ボタン） footer snsリスト コピーライト表記 css {{-- ページ全体のCSS --}} <style> html { font-size: 100%; } body { color: #2b2a27; font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif; } img { max-width: 100%; } ul { list-style: none; padding: 0; } a { color: #2b2a27; } ol { padding: 0; } dd{ margin: 0; } </style> css前 画像が親要素(body画面)からはみ出している css後 画像が画面幅(親のbody要素の幅)に収まる 画像省略 ・画像に高さと縦横比をあて下の余白を消去 ・レシピ部分(画像以外)に内側余白を設定 ・dtとddを横並び＋ドット下線(画像:材料部分) ・タイトルのフォントサイズと下線＋余白の調整(h1とh2) ・li要素に下線と余白(画像：作り方のリスト部分) 画像のスタイル <style> .flex { margin-bottom: 60px; } .flex .image img { /*親要素の幅、設定してなかった場合、大体画面横幅一杯になる*/ width: 100%; height: auto; object-fit: cover; vertical-align: bottom; } </style> <div class="flex"> <div class="image"> <img src="{{ asset('storage/recipepage/recipe.jpg') }}" alt=""> </div> <div class="recipe"> {-- 省略--} </div> </div> {{-- recipeのスタイル --}} <style> .flex .recipe { padding: 40px 5% 0 5%; } .flex .recipe .page-title { font-size: 1.75rem; margin-bottom: 20px; } .flex .recipe .content-title { border-bottom: solid 1px #ccc; font-size: 1.25rem; padding-bottom: 5px; margin: 40px 0 15px 0; } /*dt要素とdd要素を横並びにしている*/ .flex .recipe .ingredient-list { display: flex; flex-wrap: wrap; } /*border-bottom に「dotted」を指定して点線にする*/ .flex .recipe .ingredient-list dt { width: 85%; border-bottom: dotted 1px #ccc; padding: 6px 0; } .flex .recipe .ingredient-list dd { width: 15%; border-bottom: dotted 1px #ccc; padding: 6px 0; text-align: right; } .flex .recipe .step-list li { border-bottom: dotted 1px #ccc; padding: 6px 0; margin-left: 20px; } </style> <div class="flex"> <div class="image"> <img src="{{ asset('storage/recipepage/recipe.jpg') }}" alt=""> </div> <div class="recipe"> <h1 class="page-title">ひよこ豆とアボガドのタコス</h1> <p>たっぷりのひよこ豆とレンズ豆にアボガドとトマトを添えて、少しライムを絞ったらおいしいタコスのできあがりです。</p> <h2 class="content-title">材料（2人分）</h2> <dl class="ingredient-list"> <dt>テキストテキスト</dt> <dd>1個</dd> <dt>テキストテキスト</dt> <dd>1個</dd> <dt>テキストテキスト</dt> <dd>1個</dd> <dt>テキストテキスト</dt> <dd>1個</dd> <dt>テキストテキスト</dt> <dd>1個</dd> </dl> <h2 class="content-title">作り方</h2> <ol class="step-list"> <li>テキストテキストテキストテキスト</li> <li>テキストテキストテキストテキスト</li> <li>テキストテキストテキストテキスト</li> <li>テキストテキストテキストテキスト</li> <li>テキストテキストテキストテキスト</li> </ol> </div> </div> 後 ・ボタンを作成 {{-- ボタン要素 --}} <style> .btn { text-align: center; margin-bottom: 80px; /* divタグがinline-blockになっていたため*/ display: block; } /*「display: inline-block;」でaタグに幅と高さを持たせる。 paddingでボタンのサイズを調整が可能になる*/ .btn a { display: inline-block; border: solid 1px #2b2a27; font-size: 0.875rem; padding: 18px 60px; text-decoration: none; } </style> <div class="btn"> <a href="#">レシピ一覧を見る</a> </div> 後 フッターのスタイル <style> #footer { font-size: 0.75rem; padding: 20px; text-align: center; } /*リンクはul、liタグで記述 SNSのリンク集という、一つの意味をもったリスト群になるので、ul、liタグでグルーピング ※リストタグを使用しなくても問題ないが、使用した方が検索エンジンに対して より適切に意味を伝えることができると考えリストタグを選択しています。*/ #footer .sns { display: flex; justify-content: center; margin-bottom: 20px; } #footer .sns li { /* 左右に余白 */ margin: 0 10px; } </style> <footer id="footer"> <ul class="sns"> <li><a href="#">Instagram</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ul> <p>&copy; 2021 Recipe Diary</p> </footer> 後 レスポンシブ対応に変更する :::note info ・画像とレシピを横並びにする。 ・画像の高さをautoから700pxに変更する ::: {{-- 画像と全体のスタイル --}} <style> .flex { margin-bottom: 60px; } .flex .image img { width: 100%; height: auto; object-fit: cover; vertical-align: bottom; } </style> {{-- recipeのスタイル --}} <style> .flex .recipe { padding: 40px 5% 0 5%; } </style> {{--+--}} {{-- レスポンシブスタイル --}} <style> @media screen and (min-width: 834px) { .flex { /* .imageと.recipeを横並びに変更 */ display: flex; } .flex .image { width: 50%; } .flex .image img { height: 700px; } .flex .recipe { width: 50%; } } </style> ブランドサイト（ジュエリー） 全体のレイアウト メインビジュアル header logo navi メイン 画像とテキスト x 2 フッター ロゴとコピーライト表記 全体のCSS /*リセットCSS*/ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" /> /*Crimson Textのfont*/ <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;700&display=swap" rel="stylesheet"> <style> html { font-size: 100%; } body{ font-family: 'Crimson Text', serif; } img { max-width: 100%; } </style> メインビジュアルを作成する 完成形 スマホとPC css適用前 #mainvisualのhtml <style> #mainvisual img { width: 100%; height: 50vh; object-fit: cover; } @media screen and (min-width: 760px) { .header-wrapper { width: 90vw; margin: 4% auto 0 auto; } } </style> <div class="header-wrapper"> <div id="mainvisual"> <img src="https://code-step.com/demo/html/brand/img/mainvisual.jpg" alt=""> </div> <header id="header"></header> css適用後 スマホとPC headerの作成 完成図 スマホとPC css適用前 css適用後 <style> #header .site-title { width: 120px; line-height: 1px; margin-right: 50px; } #header .site-title a { display: block; } #header { display: flex; align-items: center; padding: 20px 25px; } #header nav ul { display: flex; } #header nav ul li:not(:last-child) { margin-right: 10px; } @media screen and (min-width: 760px) { #header { padding: 30px 0; } } </style> <div class="header-wrapper"> <div id="mainvisual">{-- 省略 --}</div> <header id="header"> <div class="site-title"><a href="#"> <img src="../brand/img/logo.svg" alt=""></a> </div> <nav> <ul> <li>Concept</li> <li>Work</li> <li>Contact</li> </ul> </nav> </header> </div> section#concept#work 完成図 section_id="concept"のhtml <div class="wrapper"> <main> <section id="concept" class="content"> <div class="img"> <img src="../brand/img/concept.jpg" alt=""> </div> <div class="text"> <h2 class="section-title">私たちの考えるジュエリーとは</h2> <span class="section-title-en">Concept</span> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> <section id="work" class="content"> <div class="img"> <img src="../brand/img/work.jpg" alt=""> </div> <div class="text"> <h2 class="section-title">ハンドメイドにこだわる理由</h2> <span class="section-title-en">Work</span> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> </main> セクション全体のスタイル セクション全体のスタイルのhtml <style> .wrapper { max-width: 1000px; margin: 30px auto 0 auto; padding: 0 18px; } .content { margin-bottom: 60px; } </style> <div class="wrapper"> <main> <section id="concept" class="content">{{-- 省略 --}}</section> <section id="work" class="content">{{-- 省略 --}}</section> </main> </div> css適用前 css適用後 セクションのcss <style> .wrapper { max-width: 1000px; margin: 30px auto 0 auto; padding: 0 18px; } .content { margin-bottom: 60px; } </style> <div class="wrapper"> <main> <style> .section-title { font-weight: bold; font-size: 1.25rem; margin-bottom: 4px; } .section-title-en { display: inline-block; margin-bottom: 25px; } .content .img { width: 100%; margin-bottom: 10px; } .content .text p{ margin-bottom: 10px; } @media screen and (min-width: 760px) { .section-title { font-size: 1.5rem; } .content { display: flex; align-items: center; } .content .img { width: 50%; margin-bottom: 0; } .content .text { width: 50%; padding: 0 7%; } #work.content { flex-direction: row-reverse; } } </style> <section id="concept" class="content"> <div class="img"> <img src="../brand/img/concept.jpg" alt=""> </div> <div class="text"> <h2 class="section-title">私たちの考えるジュエリーとは</h2> <span class="section-title-en">Concept</span> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> <section id="work" class="content"> <div class="img"> <img src="../brand/img/work.jpg" alt=""> </div> <div class="text"> <h2 class="section-title">ハンドメイドにこだわる理由</h2> <span class="section-title-en">Work</span> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> </main> footer 完成図 css適用前 footerのhtml <style> footer ul { display: flex; justify-content: space-between; padding: 10px 0 10px 0; align-items: center; font-size: 0.625rem; } footer ul .logo { line-height: 1px; width: 120px; } </style> <footer> <ul> <li class="logo"><img src="https://code-step.com/demo/html/brand/img/logo.svg" alt=""></li> <li class="copy-right">&copy; Wooden Jewelry</li> </ul> </footer>

リファレンスサイト ・作って学ぶコーディング学習サイト 正直、無料でこんなサイトがあることが信じられない。 それも、ソースコードについても一切の権利を放棄してくれている。 画像についてはフリー素材だそうだ。 リセットCSSがいかに重要かよくわかった。 絶対にいる。 formのborderとか全部消去するのとか信じられなかったけど、 ブラウザによって、見え方が変わるとかあるし。なによりも思い通りになる。 destyleのcdn <link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/> プロフィールサイト sectionタグについて -------------------- sectionは一般的なセクションを定義するタグ、 要素内容を記事として配信する意味合いが強い場合は、 articleを使用することが推奨されています。 また、 補足情報の場合にはaside、 ナビゲーションの場合にはnavを使用します。 ヘッダに該当する場合にはheader フッタの場合にはfooter,などのタグを使用するほうが、 ウェブページの文書構造がより明確になるでしょう。 完成図 全体のレイアウト header ナビバー main メインビジュアル aboutセクション bicycleセクション footer コピーライト表記 全体のCSS {{-- 全体のスタイル --}} <style> html { font-size: 100%; } body { color: #383e45; font-size: 0.9rem; } a { text-decoration: none; } img { max-width: 100%; } ul { list-style: none; padding: 0; } .wrapper { max-width: 960px; /* 中央揃え */ margin: 0 auto 100px auto; padding: 0 4%; text-align: center; } </style> css適用前と後の画像　適用後、画面外へのはみ出しがなくなり、中央揃えになった img要素にmax-width:100%;を適用する理由 ・img要素の親要素でサイズを指定しても画像ははみだしてしまう ・例えば下の画像のように親要素にwidth:120px;があっても無視される。 imgにmax-width:100%;がなかった場合、親要素のサイズから普通にはみ出す。 header(ナビ) イメージ図(完成図) 現状: ロゴの横幅を縮小 css <style> .site-title { /*imgの親要素にwidth:120px; img要素にmax-width:100%;*/ width: 120px; line-height: 1px;/*後ろの方で動作確認あり*/ padding: 10px 0; } </style> html <header id="header" class="wrapper"> <h1 class="site-title"><a href="index.html"><img src="{{ asset('storage\profile\logo.svg') }}" alt="Profile"></a></h1> <nav> <ul> <li><a href="#about">About</a></li> <li><a href="#bicycle">Bicycle</a></li> </ul> </nav> </header> インライン要素のaタグが親要素から下にずれているのを修正する。 aタグが親要素のh1タグとずれている。 ロゴのaタグの修正 <style> .site-title { width: 120px; /*line-height にh1タグの高さよりも小さい値「1px」を指定することで、*/ /*h1タグ(h1に限らずdiv等)の上下の余白が消えるため、ロゴ画像の高さと揃う*/ /*「line-height: 0;」を指定してもOKです*/ line-height: 1px; padding: 10px 0; } /* + インライン要素からブロック要素に変更するとこでwidthとheightが効く,marginやpaddingが可能になる*/ .site-title a { display: block; } </style> <header id="header" class="wrapper"> <h1 class="site-title"><a href="index.html"><img src="{{ asset('storage\profile\logo.svg') }}" alt="Profile"></a></h1> <nav> </nav> </header> 収まった。 header要素を横並びに変更する。 ロゴとnavを横並び navのulリストを横並び ロゴとnavを横並び <style> /* + */ #header { /*横並び*/ display: flex; /*軸と平行方向の配置*/ justify-content: space-between; /*軸と交差方向の配置*/ align-items: center; } </style> <header class="wrapper"> <h1 class="site-title"> <a href="#"><img src="https://code-step.com/demo/html/profile/img/logo.svg" alt="Profile"> </a> </h1> <nav> <ul> <li><a href="#about">About</a></li> <li><a href="#bicycle">Bicycle</a></li> </ul> </nav> </header> ロゴとnavを横並び インライン要素であるaタグとliタグがずれているのを修正する。 ・aタグとliタグがずれているのを修正・navのlinkの文字色とホバー時のスタイルも変更 /* + */ #header li a { display: block; color: #24292e; } #header li a:hover { opacity: 0.7; } きれいにおさまった ulリストも横並びにする ul要素を横並びのリストに変更する li要素の2番めにmargin-leftを設定する headerのcssを追加 /* + */ header ul { display: flex; } /* + */ header li:nth-child(n+2) { margin-left: 30px; } #header.warapperにかかるマージンボトムを上書きにして０にする。 #headerのマージンボトムを０に変更 #header.wrapper { margin-bottom: 0; } 次、メインビジュアルの作成 {{-- mainvisualのスタイル --}} <style> #mainvisual { margin-bottom: 60px; } /* + すでにimg要素にはmax-width:100%;*/ #mainvisual img { max-width: 1920px; /* +max-widthを修正したため、width:100%;がいる.基本画像には貼っとけ。親要素の幅になる*/ width: 100%; height: 600px; /* 画像の縦横比を維持して指定した幅、高さで表示してくれる。w,h,oは画像の３点セット */ object-fit: cover; } </style> <div id="mainvisual"> <img src="{{ asset('storage\profile\mainvisual.jpg') }}" alt="テキストテキストテキスト"> </div> メモ：画像のトリミング #mainvisual img { max-width: 1920px; height: 600px; /* 画像の縦横比はそのまま。維持したい場合はcover */ object-fit: none; /* 画像の位置を調整。iosでは機能しないみたい・・ */ object-position: 80% 40%; width: 100%; } 画像の位置が変更された セクションの全体のスタイル セクションタイトル css適用前 コンテンツタイトル {{-- section共通スタイル --}} <style> .section-title { margin-bottom: 60px; border-bottom: 1px solid #000; /*ボーダーの幅を文字幅にするための、d-inline-block*/ display: inline-block; font-size: 2rem; font-weight: bold; } .content-title { font-size: 1.25rem; padding: 30px 0 30px 0; font-weight: bold; text-align: center; } </style> <h2 class="section-title">About</h2> <h3 class="content-title">KAKERU MIYAICHI</h3> セクションタイトル css適用後 セクションaboutの作成 css適用前 ・画像要素を縮小 ・テキストの書字方向を左書きにする。 {{-- aboutセクションのスタイル --}} <style> #about img { width: 300px; height: 300px; border-radius: 50%; } #about .text { text-align: left; } </style> <section id="about" class="wrapper"> <h2 class="section-title">About</h2> <div class="content"> <img src="{{ asset('storage\profile\about.jpg') }}" alt="テキストテキストテキスト"> <div class="text"> <h3 class="content-title">KAKERU MIYAICHI</h3> <p> テキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキスト </p> </div> </div> </section> css適用後 コンテンツタイトルとテキストが左によりすぎているのを修正する。 {{-- section共通スタイル --}} <style> .content-title { font-size: 1.5rem; font-weight: bold; padding: 10px 0 10px 0; /* + */ text-align: center; } </style> {{-- aboutセクションのスタイル --}} <style> #about img { width: 300px; height: 300px; border-radius: 50%; /* +2 */ /* block要素にして幅が拡張されて改行されるわけではない */ /* 幅は300pxと指定した分だけ、block要素にすることで改行される */ /*+1で .textをinline-blockに変更したため、横並びになったのでblock要素にすることで改行させている。*/ display: block; margin: 0 auto 30px auto; } #about .text { text-align: left; /* +1 インライン要素にすることで幅がコンテンツの幅になる*/ /*wrapperのtext-centerが効いて中央揃えになる*/ display: inline-block; } </style> +1後の画像 横並びになったので+2で修正した +2後の画像 imgをblock要素にしたことで改行されたが、.wrapperのtext-centerが効かなくなったが、 幅は300pxしかないのでmx-autoで中央揃えにした。(block要素+幅指定+余白=mx-autoが可能) セクションbisycleの作成 css適用前の画像 .wrapperのtext-centerで画像は中央揃えになっている。 テキストのいちが下の画像にくっついているため、誤解されてしまうのを修正 {{-- bicycleセクション --}} <style> #bicycle p { margin-bottom: 50px; } </style> <section id="bicycle" class="wrapper"> <h2 class="section-title">Bicycle</h2> <ul> <li> <img src="{{ asset('storage\profile\bicycle1.jpg') }}" alt="テキストテキストテキスト"> <h3 class="content-title">タイトルタイトル</h3> <p>テキストテキストテキスト</p> </li> <li> <img src="{{ asset('storage\profile\bicycle2.jpg') }}" alt="テキストテキストテキスト"> <h3 class="content-title">タイトルタイトル</h3> <p>テキストテキストテキスト</p> </li> <li> <img src="{{ asset('storage\profile\bicycle3.jpg') }}" alt="テキストテキストテキスト"> <h3 class="content-title">タイトルタイトル</h3> <p>テキストテキストテキスト</p> </li> </ul> </section> css適用後 footerを作成する css適用前 ・フォントサイズを縮小 ・中央に配置 {{-- footerスタイル --}} <style> #footer { text-align: center; padding: 10px 0 10px 0; font-size: 0.625rem; } </style> <footer id="footer"> <p>&copy; 2020 Profile</p> </footer> css適用後 レスポンシブデザインに変更する aboutセクションを横並びに変更する 画像は　css適用前と適用後 <style> #about img { width: 300px; height: 300px; border-radius: 50%; display: block; margin: 0 auto 30px auto; } #about .text { display: inline-block; text-align: left; } /* + */ @media screen and (min-width: 600px) { #about .content { display: flex; justify-content: center; align-items: center; } #about img { width: 150px; height: 150px; margin: 0 30px 0 0; } } </style> <section id="about" class="wrapper"> <h2 class="section-title">About</h2> <div class="content"> <img src="{{ asset('storage\profile\about.jpg') }}" alt="テキストテキストテキスト"> <div class="text"> <h3 class="content-title">KAKERU MIYAICHI</h3> <p> テキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキ </p> </div> </div> </section> bicycleセクションのul画像リストを横並びにする <style> #bicycle p { margin-bottom: 50px; } /* + */ @media screen and (min-width: 600px) { #bicycle ul { display: flex; justify-content: space-between; } #bicycle li { width: calc(100%/3 - 30px); } } </style> <section id="bicycle" class="wrapper"> <h2 class="section-title">Bicycle</h2> <ul> <li> <img src="{{ asset('storage\profile\bicycle2.jpg') }}" alt="テキストテキストテキスト"> <h3 class="content-title">タイトルタイトル</h3> <p>テキストテキストテキスト</p> </li> {{-- 省略 --}} </ul> </section> メモ： <-- bootstrapのカードみたい--> <li> <img src="{{ asset('storage\profile\bicycle1.jpg') }}" alt="テキストテキストテキスト"> <h3 class="content-title">タイトルタイトル</h3> <p>テキストテキストテキスト</p> </li> PHOTO BOOK 完成図 リセットCSSのCDN <link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/> 全体のレイアウト header logo メインビジュアル メイン INDEXセクション DETAILセクション footer 全体のCSS {{-- 全体のCSS --}} <style> html { font-size: 100%; } body { background-color: #f4f9ff; color: #333; font-size: 0.875rem; } img { max-width: 100%; } /* サイト全体のコンテンツ幅を設定 */ .wrapper { max-width: 1000px; margin: 0 auto; } /* 中のコンテンツ部分の最大幅を設定 */ .inner { max-width: 600px; margin: 0 auto; padding: 0 40px; } </style> css適用後 headerを作成する ロゴの横幅を設定する hタグの上下の余白を消去 aタグの高さ幅を揃える。 上下に余白を設定する ヘッダーのスタイル {{-- headerのCSS --}} <style> #header { padding: 0 10px; margin-top: 60px; margin-bottom: 15px; } /*h1タグ line-height にh1タグの高さよりも小さい値「1px」を指定することで、 h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う 「line-height: 0;」を指定してもOKです*/ #header .site-title { width: 160px; line-height: 1px; } /* aタグのリンク範囲を親要素のサイズに広げる */ #header .site-title a { display: block; } </style> <header id="header"> <h1 class="site-title"> <a href="index.html"><img src="{{ asset('storage\PHOTO BOOK\logo.svg') }}" alt="PHOTO BOOK"></a> </h1> </header> h1の上下に余白がある（リセットCSSによってはなくなる) #header .site-title { width: 160px; /*+*/ line-height: 1px; margin-bottom: 15px; } 余計な余白がなくなった セクション全体のスタイルを作成する {{-- section全体のCSS --}} <style> .section-title { font-size: 1.125rem; font-weight: bold; margin-bottom: 10px; } </style> <h2 class="section-title">INDEX</h2> <h2 class="section-title">DETAIL</h2> メインビジュアルを作成する {{-- mainvisualのスタイル --}} <style> #mainvisual { margin-bottom: 60px; padding: 0 10px; } </style> <div id="mainvisual"> <img src="{{ asset('storage\PHOTO BOOK\mainvisual.jpg') }}" alt="テキストテキストテキスト"> </div> css適用前と後 画像の左右に少し余白もできた セクションindexを作成する css適用前とサイトの完成図 リセットCSSでolの番号は消えている。 <style> #index { background-color: #fff; padding: 30px 0; margin-bottom: 60px; } /*olタグはリストの先頭に番号がつくので、その分だけ左に移動 ※番号を消したい場合は、「list-style-type: none;」を設定*/ #index .index-list { margin-left: 20px; list-style-type: decimal; } #index .index-list li { margin-bottom: 20px; } /* リストの最後は下にマージンをつけない */ #index .index-list li:last-child { margin-bottom: 0; } </style> <section id="index"> <div class="inner"> <h2 class="section-title">INDEX</h2> <ol class="index-list"> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> x 5 </ol> </div> </section> css適用後 セクションdetail css適用前とサイトの完成図 セクションdetail <style> #detail { margin-bottom: 100px; } #detail .content .title { font-size: 1.125rem; font-weight: bold; } #detail .content .img { margin: 0 0 25px 0; } #detail .content .text p { margin-bottom: 20px; } #detail .content dl { /* dt、ddを横並びにする */ display: flex; /* dtとddが100%になったら、横並びを折り返す */ flex-wrap: wrap; padding: 16px 0; margin-bottom: 25px; /* ulの上下に線 */ border-top: solid 1px #dedede; border-bottom: solid 1px #dedede; } #detail .content dt { width: 25%; } #detail .content dd { width: 75%; /*ddの下にはdefautでmbがあるこういうのをresetCssが消してくる*/ /*今回使用しているのは残っていたので消去する必要がある*/ margin-bottom: 0; } #detail .content .link { color: #333; } #detail .content .link:hover { opacity: 0.8; } </style> <section id="detail"> <div class="inner"> <h2 class="section-title">DETAIL</h2> <div class="content"> <img class="img" src="{{ asset('storage\PHOTO BOOK\detail.jpg') }}" alt=""> <div class="text"> <p class="title">タイトルタイトルタイトル</p> <dl> <dt>著者</dt> <dd>タイトルタイトルタイトル</dd> <dt>出版社</dt> <dd>タイトルタイトルタイトル</dd> <dt>発行年</dt> <dd>タイトルタイトルタイトル</dd> </dl> <p> テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト </p> <a class="link" href="#" target="_blank" rel="noopener noreferrer">オンラインストアで見る</a> </div> </div> </div> </section> 後 ddにmargine-bottome:0;がない場合とある場合 フッター <style> #footer { font-size: 0.625rem; padding: 15px 0; } </style> <footer id="footer"> <p class="inner">&copy; 2020 PHOTO BOOK</p> </footer> 前 後 レスポンシブ対応に変更 css適用前とサイトの完成図 detailセクションを横並びに変更 {{-- 全体のCSS --}} <style> /* 中のコンテンツ部分の最大幅を設定 */ .inner { max-width: 600px; margin: 0 auto; padding: 0 40px; } @media screen and (min-width: 1024px) { .inner { padding: 0 0; } } </style> {{-- headerのCSS --}} <style> #header { padding: 0 10px; margin-top: 60px; margin-bottom: 15px; } @media screen and (min-width: 1024px) { #header { padding: 0 0; } } </style> {{-- mainvisualのCSS --}} <style> #mainvisual { margin-bottom: 60px; padding: 0 10px; } @media screen and (min-width: 1024px) { #mainvisual { padding: 0 0; } } </style> css適用後、もともとあるかないかの余白を消しただけほぼ変わらない。 detailセクションを画像とテキストの横並びに変更 /* detailセクション */ <style> #detail .content .img { /* この部分を上書き */ margin: 0 0 25px 0; } /* + */ @media screen and (min-width: 1024px) { /* + */ #detail .content { display: flex; /* 縦方向は上揃え */ align-items: flex-start; } #detail .content img { width: 270px; margin-right: 60px; } } </style> align-items_flex-startをコメントアウトしたら #detail .content { display: flex; /* 縦方向は上揃え */ /*align-items: flex-start;*/ } 画像がデフォルトのストレッチがかかって伸びてしまう。 PHOTO BOOK 2 全体図 css適用前 全体のcss {{-- 全体のCSS --}} <style> html { font-size: 100%; } body { color: #333; font-size: 0.875rem; } img { max-width: 100%; } ul { list-style: none; padding: 0; } /* サイト全体のコンテンツ幅を設定 */ .wrapper { max-width: 1000px; margin: 0 auto; } /* 中のコンテンツ部分の最大幅を設定 */ .inner { max-width: 800px; margin: 0 auto; padding: 0 20px; } </style> css適用後　画像が収まってサイドに余白ができた。 ヘッダーのスタイルを作成する header <style> #header { margin-top: 60px; margin-bottom: 15px; padding: 0 10px; } /*h1タグ line-height にh1タグの高さよりも小さい値「1px」を指定することで、 h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う 「line-height: 0;」を指定してもOKです*/ #header .site-title { width: 180px; line-height: 1px; } /* aタグのリンク範囲を親要素のサイズに広げる */ #header .site-title a { display: block; } </style> <header id="header"> <h1 class="site-title"> <a href="index.html"><img src="{{ asset('storage\photobook\logo.svg') }}" alt="PHOTO BOOK 2"></a> </h1> </header> 前 後 メインビジュアルのスタイルを作成 mainvisual <style> #mainvisual { margin-bottom: 60px; } </style> <div id="mainvisual"> <img src="{{ asset('storage\photobook\mainvisual.jpg') }}" alt="テキストテキストテキスト"> </div> 後　余白ができた indexセクションのスタイルを作成 indexセクション {{-- indexセクションのスタイル --}} <style> /* indexセクション全体 */ #index { background-color: #f5f5f5; padding: 40px 20px; margin-bottom: 60px; } /* olタグの親要素 */ #index .index-inner { border: solid 1px #333; padding: 30px; } /* olタグ「display: table;」と「margin: 0 auto;」で自要素を中央に配置。 ※この方法を使うとテキストの長さに応じて可変で中央配置できる buttonやaタグなどのインライン要素も中央揃えできる。滅茶苦茶便利*/ #index .index-inner .index-list { display: table; margin: 0 auto; } #index .index-inner .index-list li { margin-bottom: 20px; } /*最後のliタグには margin-bottom を設定しない*/ #index .index-inner .index-list li:last-child { margin-bottom: 0; } </style> <section id="index"> <h2 class="section-title">INDEX</h2> <div class="index-inner"> <ol class="index-list"> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li> </ol> </div> </section> css適用前と適用後 画像リストはトリミングのし忘れ。２つに分けて貼るつもりだった。 display: table;margin: 0 auto;がない場合とある場合 コンテンツの要素の幅に応じて中央に配置できる。text-centerだとコンテンツが膨れた場合、めちゃくちゃ崩れるし。 d-table　＋ mx-auto で自要素のテキスト中央揃えはめちゃくちゃいいかもしれん。 画像リストのスタイルを作成する {{-- 画像リスト --}} <style> /* ulタグ */ .list { margin: 30px 0 45px 0; } .list li { margin-bottom: 15px; text-align: center; } /*画像の下にできる隙間を消す*/ .list li img { vertical-align: bottom; } </style> <ul class="list"> <li><img src="{{ asset('storage/photobook/photo1.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/photobook/photo2.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/photobook/photo3.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/photobook/photo4.jpg') }}" alt=""></li> </ul> css適用前と適用後 忘れてた section全体のスタイルを作成する {{-- section全体のスタイル --}} <style> /* セクションのタイトル<h2>のスタイル */ .section-title { font-size: 1.125rem; font-weight: bold; margin-bottom: 30px; text-align: center; } </style> <h2 class="section-title">INDEX</h2> <h2 class="section-title">DETAIL</h2> detailセクション css適用前と適用後 <style> /* detailセクション全体 */ #detail { background-color: #f5f5f5; margin-bottom: 60px; padding: 40px 20px; } #detail dl { border-bottom: solid 1px #333; padding: 0 0 40px 0; } #detail dt { font-weight: bold; } #detail dd { margin-bottom: 10px; } #detail dd:last-child { margin-bottom: 0; } #detail .text { padding: 40px 0 0 0; } #detail .text p { margin-bottom: 20px; } #detail .text .link { color: #333; } #detail .text .link:hover { opacity: 0.8; } </style> <section id="detail"> <h2 class="section-title">DETAIL</h2> <div class="flex"> <dl> <dt>著者：</dt> <dd>タイトルタイトルタイトル</dd> <dt>出版社：</dt> <dd>タイトルタイトルタイトル</dd> <dt>発行年：</dt> <dd>2021年1月1日</dd> </dl> <div class="text"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <a class="link" href="#">オンラインストアで見る</a> </div> </div> </section> フッター <style> #footer { font-size: 0.625rem; padding: 15px 0; text-align: center; } </style> <footer id="footer"> <p class="inner">&copy; 2021 PHOTO BOOK 2</p> </footer> 後 レスポンシブ対応にする css適用前とサイト完成図 全体のcss /* 中のコンテンツ部分の最大幅を設定 */ .inner { max-width: 800px; margin: 0 auto; padding: 0 20px; } /* + */ @media screen and (min-width: 1024px) { .inner { padding: 0; } } header #header { margin-top: 60px; padding: 0 10px; } /* + */ @media screen and (min-width: 1024px) { #header { padding: 0; } } indexセクション #index { background-color: #f5f5f5; padding: 40px 20px; margin-bottom: 60px; } /* + */ @media screen and (min-width: 1024px) { #index { padding: 60px; } } 画像のulリスト <style> .list { margin: 30px 0 45px 0; } .list li { text-align: center; margin-bottom: 15px; } /* + */ @media screen and (min-width: 1024px) { .list { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 30px 0 45px 0; } .list li { width: 49%; margin-bottom: 15px; } } </style> <ul class="list"> <li><img src="{{ asset('storage/photobook/photo1.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/photobook/photo2.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/photobook/photo3.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/photobook/photo4.jpg') }}" alt=""></li> </ul> detailセクション <style> /* detailセクション全体 */ #detail { background-color: #f5f5f5; margin-bottom: 60px; padding: 40px 20px; } #detail dl { border-bottom: solid 1px #333; padding: 0 0 40px 0; } #detail .text { padding: 40px 0 0 0; } /* + */ @media screen and (min-width: 1024px) { #detail { padding: 60px; } #detail .flex { /*dlリストと.textを横並びにする。*/ display: flex; } #detail dl { width: 35%; border-right: solid 1px #333; padding-right: 40px; border-bottom: none; } #detail .text { width: 65%; padding: 0 0 0 40px; } } </style> <section id="detail"> <h2 class="section-title">DETAIL</h2> <div class="flex"> <dl> <dt>著者：</dt> <dd>タイトルタイトルタイトル</dd> <dt>出版社：</dt> <dd>タイトルタイトルタイトル</dd> <dt>発行年：</dt> <dd>2021年1月1日</dd> </dl> <div class="text"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <a class="link" href="#">オンラインストアで見る</a> </div> </div> </section> レシピサイト／トップページ 全体のレイアウト メイン メインビジュアル テキスト 画像リスト ボタン フッター snsリスト コピーライト表記 全体のCSS html { font-size: 100%; } body { color: #2b2a27; font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif; } img { max-width: 100%; } ul { list-style: none; } a { color: #2b2a27; } /*resetCSSでリセットされたため*/ h1{ font-size: 48px; } 適用後と適用前は画像が画面(bodY要素)からはみ出る セクション全体のスタイル ない。 メインビジュアルのスタイルを作成 メインビジュアルのスタイル <style> #mainvisual img { /* 画像要素を親要素のbodyの幅に合わせる = 画面幅 */ width: 100%; /*要素の高さを windoww画面の高さに合わせる。 */ height: 100vh; /*画像の縦横比を維持 */ object-fit: cover; /*引き伸ばされた画像のい位置をトリミングできる */ object-position: center top; margin-bottom: 80px; } </style> <div id="mainvisual"> <img src="{{ asset('storage\Recipe\mainvisual.jpg') }}" alt=""> </div> css適用前 css適用後　画像の高さがwindowの高さになった object-fitやobject-positionrについての解説サイト サイト下の画像をタイル状にするとか本当にわかりやすい。 Text部分のスタイル css適用前 css適用後 Text部分のスタイル <style> .text { text-align: center; padding: 0 20px; margin-bottom: 80px; } .text .site-title { margin-bottom: 20px; } /*「display: inline-block;」でaタグに幅と高さを持たせる。 paddingでボタンのサイズを調整できるようになる。*/ .text .btn { display: inline-block; border: solid 1px #2b2a27; font-size: 0.875rem; padding: 18px 60px; text-decoration: none; } </style> <div class="text"> <h1 class="site-title">Recipe Diary</h1> <p> 日々の料理レシピをまとめています。<br> 和食や洋食、中華、お菓子までいろいろな料理レシピをアップしていますので、<br> みなさんの献立にお役立てくださいね！ </p> </div> --------------------------------- <div class="text"> <a class="btn" href="#">レシピ一覧を見る</a> </div> ul.flexの画像リストに高さを設定する ・高さは500px ・画像の縦横比を維持させる 画像のリスト部分のスタイル <style> .flex { margin-bottom: 60px; } .flex li img { width: 100%; height: 500px; object-fit: cover; vertical-align: bottom; } </style> <ul class="flex"> <li><img src="{{ asset('storage/Recipe/recipe1.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/Recipe/recipe2.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/Recipe/recipe3.jpg') }}" alt=""></li> </ul> フッターのスタイル フッターのスタイル <style> #footer { font-size: 0.75rem; padding: 20px; text-align: center; } /*リンクはul、liタグで記述 SNSのリンク集という、一つの意味をもったリスト群になるので、ul、liタグでグルーピング ※リストタグを使用しなくても問題ないが、使用した方が検索エンジンに対して より適切に意味を伝えることができると考えリストタグを選択しています。*/ #footer .sns { display: flex; justify-content: center; margin-bottom: 20px; } #footer .sns li { /* 左右に10pxの余白 */ margin: 0 10px; } </style> <footer id="footer"> <ul class="sns"> <li><a href="#">Instagram</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ul> <p>&copy; 2021 Recipe Diary</p> </footer> レスポンシブ対応にする ・画像のリストを横並びに変更 レスポンシブ対応にする /* 画像リスト部分のスタイル */ <style> .flex { margin-bottom: 60px; } .flex li img { width: 100%; height: 500px; object-fit: cover; vertical-align: bottom; } /* + */ @media screen and (min-width: 834px) { .flex { display: flex; } .flex li { width: calc(100%/3); } } </style> <ul class="flex"> <li><img src="{{ asset('storage/Recipe/recipe1.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/Recipe/recipe2.jpg') }}" alt=""></li> <li><img src="{{ asset('storage/Recipe/recipe3.jpg') }}" alt=""></li> </ul> ulの画像リストが横並びになった レシピサイト／レシピページ 全体のレイアウト main div（画像とテキスト） div（ボタン） footer snsリスト コピーライト表記 css {{-- ページ全体のCSS --}} <style> html { font-size: 100%; } body { color: #2b2a27; font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Meiryo", sans-serif; } img { max-width: 100%; } ul { list-style: none; padding: 0; } a { color: #2b2a27; } ol { padding: 0; } dd{ margin: 0; } </style> css前 画像が親要素(body画面)からはみ出している css後 画像が画面幅(親のbody要素の幅)に収まる 画像省略 ・画像に高さと縦横比をあて下の余白を消去 ・レシピ部分(画像以外)に内側余白を設定 ・dtとddを横並び＋ドット下線(画像:材料部分) ・タイトルのフォントサイズと下線＋余白の調整(h1とh2) ・li要素に下線と余白(画像：作り方のリスト部分) 画像のスタイル <style> .flex { margin-bottom: 60px; } .flex .image img { /*親要素の幅、設定してなかった場合、大体画面横幅一杯になる*/ /* 気をつけるべきは % 画像の幅100%ではなく、親要素の幅100%*/ width: 100%; height: auto; object-fit: cover; vertical-align: bottom; } </style> <div class="flex"> <div class="image"> <img src="{{ asset('storage/recipepage/recipe.jpg') }}" alt=""> </div> <div class="recipe"> {-- 省略--} </div> </div> {{-- recipeのスタイル --}} <style> .flex .recipe { padding: 40px 5% 0 5%; } .flex .recipe .page-title { font-size: 1.75rem; margin-bottom: 20px; } .flex .recipe .content-title { border-bottom: solid 1px #ccc; font-size: 1.25rem; padding-bottom: 5px; margin: 40px 0 15px 0; } /*dt要素とdd要素を横並びにしている*/ .flex .recipe .ingredient-list { display: flex; flex-wrap: wrap; } /*border-bottom に「dotted」を指定して点線にする*/ .flex .recipe .ingredient-list dt { width: 85%; border-bottom: dotted 1px #ccc; padding: 6px 0; } .flex .recipe .ingredient-list dd { width: 15%; border-bottom: dotted 1px #ccc; padding: 6px 0; text-align: right; } /*olタグのローマ数字を表記させる場合*/ .flex .recipe .step-list { list-style:decimal; /*ローマ数字の幅だけ左に余白*/ margin-left: 20px; } .flex .recipe .step-list li { border-bottom: dotted 1px #ccc; padding: 6px 0; } </style> <div class="flex"> <div class="image"> <img src="{{ asset('storage/recipepage/recipe.jpg') }}" alt=""> </div> <div class="recipe"> <h1 class="page-title">ひよこ豆とアボガドのタコス</h1> <p>たっぷりのひよこ豆とレンズ豆にアボガドとトマトを添えて、少しライムを絞ったらおいしいタコスのできあがりです。</p> <h2 class="content-title">材料（2人分）</h2> <dl class="ingredient-list"> <dt>テキストテキスト</dt> <dd>1個</dd> <dt>テキストテキスト</dt> <dd>1個</dd> <dt>テキストテキスト</dt> <dd>1個</dd> <dt>テキストテキスト</dt> <dd>1個</dd> <dt>テキストテキスト</dt> <dd>1個</dd> </dl> <h2 class="content-title">作り方</h2> <ol class="step-list"> <li>テキストテキストテキストテキスト</li> <li>テキストテキストテキストテキスト</li> <li>テキストテキストテキストテキスト</li> <li>テキストテキストテキストテキスト</li> <li>テキストテキストテキストテキスト</li> </ol> </div> </div> 後 ・ボタンを作成 {{-- ボタン要素 --}} <style> .btn { text-align: center; margin-bottom: 80px; } /*「display: inline-block;」でaタグに幅と高さを持たせる。 paddingでボタンのサイズを調整が可能になる*/ .btn a { display: inline-block; border: solid 1px #2b2a27; font-size: 0.875rem; padding: 18px 60px; text-decoration: none; } </style> <div class="btn"> <a href="#">レシピ一覧を見る</a> </div> 後 フッターのスタイル <style> #footer { font-size: 0.75rem; padding: 20px; text-align: center; } /*リンクはul、liタグで記述 SNSのリンク集という、一つの意味をもったリスト群になるので、ul、liタグでグルーピング ※リストタグを使用しなくても問題ないが、使用した方が検索エンジンに対して より適切に意味を伝えることができると考えリストタグを選択しています。*/ #footer .sns { display: flex; justify-content: center; margin-bottom: 20px; } #footer .sns li { /* 左右に余白 */ margin: 0 10px; } </style> <footer id="footer"> <ul class="sns"> <li><a href="#">Instagram</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ul> <p>&copy; 2021 Recipe Diary</p> </footer> 後 レスポンシブ対応に変更する ・画像とレシピを横並びにする。 {{-- 画像と全体のスタイル --}} <style> .flex { margin-bottom: 60px; } .flex .image img { width: 100%; height: auto; object-fit: cover; vertical-align: bottom; } </style> {{-- recipeのスタイル --}} <style> .flex .recipe { padding: 40px 5% 0 5%; } </style> {{--+--}} {{-- レスポンシブスタイル --}} <style> @media screen and (min-width: 834px) { .flex { /* .imageと.recipeを横並びに変更 */ display: flex; /*defaultはストレッチ*/ /* align-items: center; */ } .flex .image { width: 50%; } .flex .image img { /* height: 700px; */ /*defaultのストレッチの時h:100%;は親要素の高さと一致する.それ以外は自要素の高さまで*/ height: 100%; width: 100%; object-fit: cover; } .flex .recipe { width: 50%; } } </style> d-flexの子要素は交差方向にはstretchがかかる。のでhight:100%;にすると要素一杯まで拡大される。 それ以外は、自要素の高さになるので、この場合の100%の高さはheight:auto;と同じ意味。 あくまでも、画像要素の幅高さの％は親要素が基準になる。 ブランドサイト（ジュエリー） 全体のレイアウト メインビジュアル header logo navi メイン 画像とテキスト x 2 フッター ロゴとコピーライト表記 全体のCSS /*リセットCSS*/ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" /> /*Crimson Textのfont*/ <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;700&display=swap" rel="stylesheet"> <style> html { font-size: 100%; } body{ font-family: 'Crimson Text', serif; } img { max-width: 100%; } </style> メインビジュアルを作成する 完成形 スマホとPC css適用前 #mainvisualのhtml <style> #mainvisual img { width: 100%; height: 50vh; object-fit: cover; } @media screen and (min-width: 760px) { .header-wrapper { width: 90vw; margin: 4% auto 0 auto; } } </style> <div class="header-wrapper"> <div id="mainvisual"> <img src="https://code-step.com/demo/html/brand/img/mainvisual.jpg" alt=""> </div> <header id="header"></header> css適用後 スマホとPC headerの作成 完成図 スマホとPC css適用前 css適用後 <style> #header .site-title { width: 120px; line-height: 1px; margin-right: 50px; } #header .site-title a { display: block; } #header { display: flex; align-items: center; padding: 20px 25px; } #header nav ul { display: flex; } #header nav ul li:not(:last-child) { margin-right: 10px; } @media screen and (min-width: 760px) { #header { padding: 30px 0; } } </style> <div class="header-wrapper"> <div id="mainvisual">{-- 省略 --}</div> <header id="header"> <div class="site-title"><a href="#"> <img src="../brand/img/logo.svg" alt=""></a> </div> <nav> <ul> <li>Concept</li> <li>Work</li> <li>Contact</li> </ul> </nav> </header> </div> section#concept#work 完成図 section_id="concept"のhtml <div class="wrapper"> <main> <section id="concept" class="content"> <div class="img"> <img src="../brand/img/concept.jpg" alt=""> </div> <div class="text"> <h2 class="section-title">私たちの考えるジュエリーとは</h2> <span class="section-title-en">Concept</span> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> <section id="work" class="content"> <div class="img"> <img src="../brand/img/work.jpg" alt=""> </div> <div class="text"> <h2 class="section-title">ハンドメイドにこだわる理由</h2> <span class="section-title-en">Work</span> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> </main> セクション全体のスタイル セクション全体のスタイルのhtml <style> .wrapper { max-width: 1000px; margin: 30px auto 0 auto; padding: 0 18px; } .content { margin-bottom: 60px; } </style> <div class="wrapper"> <main> <section id="concept" class="content">{{-- 省略 --}}</section> <section id="work" class="content">{{-- 省略 --}}</section> </main> </div> css適用前 css適用後 画像はsection:100%;だからsectionを中央にすれば、自然と中央になる セクションのcss span(inline)要素はd-inline-blockにすることで、marginができる。 .content .img{width:100%; 不要。消し忘れ} flex-direction:row-reverse;で画像とテキストの順番を入れ替えている。 <style> .wrapper { max-width: 1000px; margin: 30px auto 0 auto; padding: 0 18px; } .content { margin-bottom: 60px; } </style> <div class="wrapper"> <main> <style> .section-title { font-weight: bold; font-size: 1.25rem; margin-bottom: 4px; } .section-title-en { display: inline-block; margin-bottom: 25px; } .content .img { /*width: 100%; 不要 消し忘れ*/ margin-bottom: 10px; } .content .text p{ margin-bottom: 10px; } @media screen and (min-width: 760px) { .section-title { font-size: 1.5rem; } .content { display: flex; align-items: center; } .content .img { width: 50%; margin-bottom: 0; } .content .text { width: 50%; padding: 0 7%; } #work.content { flex-direction: row-reverse; } } </style> <section id="concept" class="content"> <div class="img"> <img src="../brand/img/concept.jpg" alt=""> </div> <div class="text"> <h2 class="section-title">私たちの考えるジュエリーとは</h2> <span class="section-title-en">Concept</span> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> <section id="work" class="content"> <div class="img"> <img src="../brand/img/work.jpg" alt=""> </div> <div class="text"> <h2 class="section-title">ハンドメイドにこだわる理由</h2> <span class="section-title-en">Work</span> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> </main> footer 完成図 css適用前 footerのhtml <style> footer ul { display: flex; justify-content: space-between; padding: 10px 0; align-items: center; font-size: 0.625rem; } footer ul .logo { line-height: 1px; width: 120px; } </style> <footer> <ul> <li class="logo"><img src="https://code-step.com/demo/html/brand/img/logo.svg" alt=""></li> <li class="copy-right">&copy; Wooden Jewelry</li> </ul> </footer>

模写サイト COFFEE / ストアサイト（カフェ） スマホサイズとPCサイズ(完成図) リセットCSS <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" /> 全体のスタイル 全体のスタイル <style> html{ font-size: 100%; } body{ font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; font-size: 0.9rem; line-height: 1.7; } a{ text-decoration: none; } img{ max-width: 100%; } </style> header headerのhtml <header id="header"> <nav> <ul> <li><a href="#menu">MENU</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#location">LOCATION</a></li> </ul> </nav> <h1 class="site-title"><img src="https://code-step.com/demo/html/store/img/logo.svg" alt=""></h1> </header> <style> .site-title { text-align: center; /*position: relative;は親要素の#header*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(1px 1px 10px #c0c0c0); } #header { /*position: absolute;は子要素のh1.site-title*/ position: relative; background-image: url('https://code-step.com/demo/html/store/img/mainvisual.jpg'); width: 100%; height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; padding: 20px 40px; } nav ul { display: flex; justify-content: flex-end; } nav li { margin-left: 30px; } nav li a { color: #fff; font-weight: bold; transition: all 0.3s ease; filter: drop-shadow(1px 1px 2px #121212); } nav li a:hover { color: #e03131; } </style> section#menu 完成図 section_id="menu"のhtml <section id="menu"> <div class="menu-img fixed-bg"> <h2 class="sec-title">MENU</h2> </div> <div class="menu-content wrapper"> <div class="menu-item"> <h3 class="item-title">COFFEE</h3> <dl> <dt>XXXXXXXX</dt> <dd>&yen;500</dd> {{-- -繰り- --}} <dt>XXXXXXXX</dt> <dd>&yen;500</dd> </dl> </div> <div class="menu-item"> <h3 class="item-title">FOOD</h3> <dl class="food"> <dt>XXXXXXXX</dt> <dd>&yen;500</dd> {{-- -繰り- --}} </dl> <h3 class="item-title">OTHER</h3> <dl> <dt>XXXXXXXX</dt> <dd>&yen;500</dd> {{-- -繰り- --}} </dl> </div> </div> </section> スマホ PCへのレスポンシブ 767以下 <style> .wrapper { max-width: 1000px; padding: 30px 16px 60px 16px; margin: 0 auto; text-align: center; } #menu { margin-top: 10px; } #menu .menu-img { background-image: url('https://code-step.com/demo/html/store/img/menu.jpg'); /*absoluteは子要素のh3.sec-title*/ position: relative; } .fixed-bg { /*div.menu-imgのheight*/ height: 94px; /* スマホ時は背景をスクロールするように変更 */ background-attachment: scroll; background-size: cover; background-position: center; } .sec-title { font-size: 2rem; color: #fff; filter: drop-shadow(1px 1px 10px #c0c0c0); /*absoluteは親のdiv.menu-img*/ position: absolute; top: 26%; /*width:100%で親のdiv.menu-imgと同じ幅になる*/ /*left:0;right:0;でも同じ結果になる*/ width: 100%; /*上の結果余白が生じてセンター揃えになる*/ text-align: center; } .item-title { font-size: 1.25rem; margin-bottom: 25px; display: inline-block; border-bottom: solid 6px #e03131; } #menu .menu-item dl { display: flex; flex-wrap: wrap; margin-bottom: 10px; } #menu .menu-item dt { width: 87%; text-align: left; border-bottom: dotted 1px #000; margin-bottom: 25px; } #menu .menu-item dd { width: 13%; text-align: right; padding-top: 8px; } #menu .menu-item dl.food { margin-bottom: 10px; } </style> 767以上 <style> @media screen and (min-width: 767px) { .wrapper { padding: 90px 16px 150px 16px; } #menu { margin-top: 20px; } .sec-title { font-size: 4.5rem; top: 30%; } .fixed-bg { height: 300px; /* PC時は背景を固定するように変更 */ background-attachment: fixed; } .item-title { font-size: 2.5rem; margin-bottom: 70px; } #menu .menu-content { display: flex; } #menu .menu-item { width: 50%; padding: 0 45px; } #menu .menu-item dl { margin-bottom: 0px; } #menu .menu-item:first-child { border-right: solid 1px #000; } #menu .menu-item dl.food { margin-bottom: 55px; } } </style> section#about 完成 既に設定したCSS section_id="aboutのhtml <section id="about"> <div class="about-img fixed-bg"> <h2 class="sec-title">ABOUT</h2> </div> <div class="about-content wrapper"> <div class="about-item"> <h3 class="item-title">COFFEE</h3> <ul> <li> テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト </li> <li> <!-- 上と同じ --> </li> <li> <!-- 上と同じ --> </li> <li> <!-- 上と同じ --> </li> </ul> <a class="Btn" href="#"><span>Read More</span></a> </div> </div> </section> 追加CSS .sec-title{ position:absolute }のrelativeは#about .about-imgになる。 ②のスタイルを以下に変更すると レスポンシブ設定 liが50%なので完全にマージンは０。余白はliのpadding:2%; #about <style> #about { margin-top: 20px; } #about .about-img { background-image: url('https://code-step.com/demo/html/store/img/about.jpg'); /*absoluteは子要素のh2.sec-title{ABOUT}*/ position: relative; } #about ul { margin-bottom: 40px; } #about li { line-height: 2; text-align: left; padding: 2%; } .Btn { margin: 0 auto; display: table; padding: 10px 50px; position: relative; } .Btn::before { content: ''; width: 15%; height: 30%; position: absolute; top: 0; left: 0; border-top: 3px solid #f0001f; border-left: 3px solid #f0001f; transition: 0.5s; } .Btn::after { content: ''; position: absolute; width: 15%; height: 30%; bottom: 0; right: 0; border-bottom: 3px solid #f0001f; border-right: 3px solid #f0001f; transition: 0.5s; } .Btn:hover::before { width: 100%; height: 100%; } .Btn:hover::after { width: 100%; height: 100%; } @media screen and (min-width: 767px) { #about ul { display: flex; justify-content: space-between; flex-wrap: wrap; } #about li { width: 50%; } } </style> section#location 完成図　スマホもPCも完全に同じ section_id="location" <section id="location"> <div class="location-img fixed-bg"> <h2 class="sec-title">LOCATION</h2> </div> <div class="location-content wrapper"> <div class="location-item"> <h3 class="item-title">OUR STORE</h3> <div class="item-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m12!1m8!1m3!1d13123.424218274253!2d135.514589058137!3d34.683582270400244!3m2!1i1024!2i768!4f13.1!2m1!1z5aSn6Ziq5Z-O!5e0!3m2!1sja!2sjp!4v1642362333213!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> <div class="item-info"> <p> X-XX-XX, Ebisuminami, Shibuya-ku, Tokyo 150-0022<br> 東京都渋谷区恵比寿南X-XX-XX </p> <p> Open 7 days a Week<br> 9:00am to 10:00pm </p> <p>Tel : XX-XXXX-XXXX</p> </div> </div> </div> </section> スマホとPCのスタイル 黄色のsec-titleと水色のitem-titleはすでに設定済み #location <style> #location { margin-top: 20px; } #location .location-img { background-image: url('https://code-step.com/demo/html/store/img/location.jpg'); position: relative; } #location .item-map { /* グーグルマップをグレースケールにする */ /* 画像をグレースケールにする */ filter: grayscale(1); margin-bottom: 20px; } /* グーグルマップのサイズを設定 */ #location .item-map iframe { width: 100%; height: 400px; border: 0; } #location .item-info { text-align: left; } #location .item-info p { margin-bottom: 10px; } </style> footer <style> #footer { font-size: 0.5rem; padding: 10px 0; text-align: center; } </style> <footer id="footer"> <p>&copy; COFFEE</p> </footer> JQUERY(スムーススクロール) JQUERY $(function(){ /*================================================= スムーススクロール ===================================================*/ // ページ内リンクをクリックした時, $('a[href^="#"]').click(function(){ // リンクを取得 let href= $(this).attr("href"); // ジャンプ先のhashを取得 let target = $(href == "#" || href == "" ? 'html' : href); //上の$()のなかは三項演算子 //if(href == "#" || href == ""){ // target = $('html'); //}else{ // target = $(href); //} // トップからジャンプ先の要素までの距離を取得 let position = target.offset().top; // animateでスムーススクロールを行う // 600はスクロール速度で単位はミリ秒 $("html, body").animate({scrollTop:position}, 600, "swing"); //$(window).scrollTop(300);で上から300pxまで移動できる //これをアニメーションにすると //$('html, body').animate({scrollTop:300},function(){終了後の処理}); //600,swingはオプション秒数とアニメの演出 return false; }); }) ランディングページ 参考サイト 完成図 ナビゲーション開いている時 リセットCSS <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" /> 全体のスタイル 全体のスタイル <style> html { font-size: 100%; } body { color: #333; font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; letter-spacing: 0.1em; } a { color: #333; text-decoration: none; } img { max-width: 100%; vertical-align: bottom; } li { list-style: none; } </style> header 完成図 naviが閉じているとき スマホとPC naviが開いているとき スマホとPC headerのhtml <header id="header"> <h1 class="site-title"> <a href="#"><img src="https://code-step.com/demo/html/lp/img/logo-r.svg" alt="BBB英会話スクール"></a> </h1> <nav id="navi"> <img class="logo" src="https://code-step.com/demo/html/lp/img/logo-w.svg" alt="BBB英会話スクール"> <ul class="menu"> <li><a href="#reason">BBBが選ばれる理由</a></li> <li><a href="#voice">受講生の声</a></li> <li><a href="#summary">スクールの概要</a></li> </ul> <a class="btn" href="#">無料体験に申し込む</a> </nav> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </header> スマホのスタイル htmlの構造 ナビバーに係るcss 閉じた時とOPEN時 jqueryのtoggleClass() humbergerをactiveでtoggleして#naviもactiveでtoggleさせている。 <script> $('.hamburger').on('click', function() { // ハンバーガーメニューの共通処理を呼び出す hamburger(); }); // メニューのリンクをクリックした時 $('#navi a').on('click', function() { // ハンバーガーメニューの共通処理を呼び出す hamburger(); }); function hamburger() { // toggleClassを使用することで、hamburgerクラスにactiveクラスが存在する場合は削除、 // 存在しない場合を追加する処理を自動で行ってくれる $('.hamburger').toggleClass('active'); if ($('.hamburger').hasClass('active')) { // hamburgerクラスにactiveクラスが存在する場合は、naviにもactiveクラスを追加する $('#navi').addClass('active'); } else { // hamburgerクラスにactiveクラスが存在しない場合は、naviからactiveクラスを削除する $('#navi').removeClass('active'); } } </script> html構造 3つの画像リストがあるが、表示されているのは１つだけで交互にfadeIn,fadeOutする。 css構造 text(titleとbtn) ul.fade>li>img*3のアニメーション以外のCSS これで画像３枚の座標が一致するため重なって表示される。 メモ1/4：下のコードでいいと思ったら画像の通りになったので調べてみた。 メモ2/4：li要素を100%にしてimg要素をautoにした。 　　　　 ● li要素はtop:0;right:0;を起点に横幅が#mainvisualと一緒になった。 　　　　 ● その下のimgはli要素を起点にtop:0;left:0;の普段通りの位置になっている。 　　　　 ● -->これでimg要素を100%にしたらobj-fit-coverでイメージ通りになるのか。 メモ3/4：どうでもいいメモ：li,img要素ともにautoにした場合。 　　　　 ●li要素はpos-absoluteでblock要素のwidth:100%;を喪失して、子要素の幅だけになった。 　　　　 ●上は分かっていたので、img要素でwidth:100%;にして、幅一杯に広げようと思ったんです。 　　　　 ●そうすると、li要素は子要素のimgと同じ幅になるから、横幅一杯になると思ったんです。 　　　　 ●実動作は、img要素100%はli要素100%の幅であって、li要素の幅はimg要素の幅なので変わらない。 メモ4/4：結局、最初に想定していたのはこっちの動作だった。気持ち悪いけど、こっちのほうが直感的 メモ総括：普通ul要素にrelativeがあるが、今回はその上の#mainvisualにrelativeがあったりもした。 そういういみでもli要素ではなくてliの下のimg要素にpos-absoluteしてもいいと思う。 ul.fade>li>img*3のアニメーション以外のレスポンシブに係るCSS メモ②：なんでレスポンシブの時になんで#mainvisualにheight:720px;なんてやるのか疑問になったので調べてみた。 メモ②1/2：まずはある時、 メモ②1/2：ない時、高さが喪失している。が、形は大きくは崩れていないが、 ●マージンボトム120px;は完全に効いていない。 メモ②結論：position:relative;したら子要素と同じ高さをrelative要素にも設定した方がいいと思う。 マージンをもたせたかったら必須。 ある時とない時、マージンボトムがなくなってもうてる。 ul.fade>li>img*3のアニメーションに係るCSS ３枚の画像を15秒かけて一周してまた、最初から繰り返すアニメーション。 だから、33%以内に表示非常時を繰り返す必要がある。 流石に5秒かけてゆっくり表示したら遅いので半分ぐらいの15%で表示させている。 よって、5枚なら、20%以内に表示非表示させることになる。 #mainvisual <style> #mainvisual { height: 490px; margin-bottom: 80px; position: relative; } #mainvisual .text { position: absolute; /* 両端に16pxづつ余白を作る */ width: calc(100% - 32px); top: 310px; left: 16px; z-index: 10; } /* 「text-shadow」で文字の輪郭に白い影をつけることで、 */ /* 文字が背景画像に埋もれないようにする */ #mainvisual .text .title { font-size: 1.75rem; font-weight: bold; text-shadow: 0 4px 6px #fff; margin-bottom: 10px; } #mainvisual .text .btn { background-color: #ff2a2a; /* 文字の下に影をつけてボタンに立体感を出す */ border-bottom: 6px solid #9a0413; border-radius: 10px; color: #fff; font-size: 1.5rem; display: block; padding: 15px 35px; text-align: center; transition: 0.3s; position: relative; } #mainvisual .text .btn::after { content: ""; width: 16px; height: 16px; border-top: solid 3px #fff; border-right: solid 3px #fff; transform: rotate(45deg); position: absolute; top: 26px; right: 30px; } /* ホバー時は、opacityで透過させながら「transform: scale(1.05);」で */ /* 少しだけボタンのサイズを大きくする */ #mainvisual .text .btn:hover { opacity: 0.9; transform: scale(1.05); } #mainvisual .fade li { position: absolute; top: 0; right: 0; /* pos-relativeの要素の幅 */ width: 100%; /* 最初は3枚の画像を非表示にしておく */ opacity: 0; /* アニメーションを実行 */ /* fade：下で定義している「@keyframes fade」を実行 */ /* 15s：「@keyframes fade」の処理を15秒かけて実行 */ /* infinite：アニメーションの処理を無限に繰り返す */ animation: fade 15s infinite; } #mainvisual .fade li img { width: 100%; height: 300px; object-fit: cover; } /* 1枚目の画像のアニメーション実行タイミングを設定 */ /* 「animation-delay: 0s;」ですぐに実行 */ #mainvisual .fade li:nth-child(1) { animation-delay: 0s; } /* 2枚目の画像のアニメーション実行タイミングを設定 */ /* 「animation-delay: 5s;」で5秒後に実行 */ #mainvisual .fade li:nth-child(2) { animation-delay: 5s; } /* 3枚目の画像のアニメーション実行タイミングを設定 */ /* 「animation-delay: 10s;」で10秒後に実行 */ #mainvisual .fade li:nth-child(3) { animation-delay: 10s; } /* 「box-shadow」で画像のまわりをぼかす */ #mainvisual .fade li::after { content: ""; position: absolute; top: 0; bottom: 0; /* 親要素の.fade liの幅になる left:0;right:0;*/ left: 0; right: 0; box-shadow: inset 0px 0px 20px 20px #fff; } /* アニメーション処理 */ /* 上の「animation」で15sを指定しているので下記の処理を15秒かけて実行 */ /* 0%が0秒を表し、100%が15秒後を表す。 */ /* 0%の「opacity: 0;」で非表示の状態からスタートし、 */ /* 15%になるまでの間に少しづつ画像を表示（フェードイン）させる。 */ /* そこから30%の時点までは画像を表示させたままの状態を維持し、 */ /* 45%の時点に向けて画像を非表示（フェードアウト）する。 */ /* そこから100%まで非表示の状態を維持する。 */ @keyframes fade { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; } } @media screen and (min-width: 900px) { #mainvisual { /* height: 720px; */ margin-bottom: 120px; } #mainvisual .text { top: 280px; left: 10%; width: auto; } #mainvisual .text .title { font-size: 2.875rem; margin-bottom: 30px; } #mainvisual .fade li { width: 75%; } #mainvisual .fade li img { width: 100%; height: 720px; } } </style> <div id="mainvisual"> <div class="text"> <p class="title">話して学ぼう！<br>BBB英会話スクール</p> <a class="btn" href="#">無料体験はこちら</a> </div> <ul class="fade"> <li><img src="https://code-step.com/demo/html/lp/img/mainvisual1.jpg" alt=""></li> <li><img src="https://code-step.com/demo/html/lp/img/mainvisual2.jpg" alt=""></li> <li><img src="https://code-step.com/demo/html/lp/img/mainvisual3.jpg" alt=""></li> </ul> </div> section#reason 完成図 htmlの構造 cssの構造 スマホアニメーション以外のCSS cssの構造 アニメーション以外のレスポンシブCSS アニメーションにかかるCSSとJQUERY JQUERYのinViews.min.jsを使用している。 これは、メチャクチャ便利。 section#voice 完成図 htmlの構造 スマホ時、コメントと画像の順番が逆になっている。 CSSの構造 スマホ 横並びにすることが多いd-flexを順序を入れ替えるのに使用してある。 その際、横向きをセンターにするのにjustify-content:center;ではなく.align-items:center;になる。 いつも横向きはjustify-content:centerだが、軸方向が縦になったため、align-items:center d-flexの軸方向が縦なら平行方向は縦。横なら横。 平行方向の位置はjustify-contentプロパティで決定する。 今回は軸方向は縦で横向きへの(交差方向への)移動なのでalign-items:center;を使ってcenterにする。 #voice .item-left,rightにalign:items:center;がある時(textの位置はleft、centerではない) #voice .item-left,rightにalign:items:center;がない時 交差方向にはデフォルトでストレッチがかかる。 レスポンシブに係るCSS .student { text-left }は意味ないよね・・・。 アニメーションにかかるCSSとJQUERY section#summary 完成図 html構造 css構造　スマホ アニメーション以外のCSS span要素をd-blockにして幅を効かせている。inline要素はpもmも持てない。 $samary .menu .li{ width:100%; }は消し忘れ。不必要。 2つともinlineの時 上がblockで下がinlineの時 block要素にすると改行がかかる。 上がblockで下がinline-blockの時 lessonの幅の下の所だけにmargineがかかっている。 レスポンシブに係るアニメーション以外のCSS アニメーションに係るCSS section#sumary <style> #summary { background: url("https://code-step.com/demo/html/lp/img/bg.gif"); margin-bottom: 80px; padding: 60px 0; margin-bottom: 120px; animation: fall 10s infinite linear; } /* アニメーション処理 */ /* 10秒かけて背景画像の位置「background-position」を移動させる動作を繰り返す */ @keyframes fall { 0% { background-position: 0 0; } 100% { background-position: -700px 700px; } } #summary .menu li { background-color: #fff; margin-bottom: 32px; border-radius: 20px; padding: 30px; } #summary .menu li:nth-child(3) { margin-bottom: 32px; } #summary .menu-title { font-weight: bold; line-height: 1; text-align: center; } #summary .menu-title .ja { font-size: 1.5rem; display: block; margin-bottom: 15px; } #summary .menu-title .en { font-size: 1rem; /* display: block; */ display: inline-block; margin-bottom: 30px; } @media screen and (min-width: 900px) { #summary .menu { display: flex; flex-wrap: wrap; justify-content: space-between; } #summary .menu li { width: 48%; padding: 60px; } /* 3つ目以降はmargin-bottomを設定しない */ #summary .menu li:nth-child(n + 3) { margin-bottom: 0; } #summary .menu-title .ja { font-size: 1.75rem; } #summary .menu-title .en { font-size: 1.125rem; } } </style> <!-- スクールの概要 --> <section id="summary"> <div class="wrapper"> <h2 class="section-title">スクールの概要</h2> <ul class="menu"> <li> <h3 class="menu-title"> <span class="ja">レッスン内容</span> <span class="en">LESSON</span> </h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> <li> <h3 class="menu-title"> <span class="ja">料金プラン</span> <span class="en">PRICE</span> </h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> <li> <h3 class="menu-title"> <span class="ja">講師のご紹介</span> <span class="en">TEACHER</span> </h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> <li> <h3 class="menu-title"> <span class="ja">BBBのQ&A</span> <span class="en">Q&A</span> </h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> </ul> </div> </section> footer 完成図 htmlの構造 CSSの構造 スマホ CSSの構造 レスポンシブ設定 コーポレートサイト リファレンスサイト 完成図 全体のスタイル <style> html { font-size: 100%; } body { color: #121212; font-family: 'Noto Sans JP', sans-serif; } a { color: #121212; text-decoration: none; } img { max-width: 100%; vertical-align: bottom; } li { list-style: none; } </style> header htmlの構造　header固定(スマホの時はtop,pcの時はleftに固定される) cssの構造 スマホ ナビに係るCSS ハムバーガーにかかるCSS レスポンシブに係るCSS @media screen and (min:width:960px){} section#video メインビジュアルの背景にVIDEO htmlの構造 ビデオが他のセクションの背景になっていたからてっきり下の画像コードだと思った cssの構造　スマホ cssの構造　レスポンシブ <style> .container { margin-left: 0; } #video { height: 80vh; width: 100%; } #video .bg-video { position: fixed; /* #header(ナビ)の高さ分下に下げている */ top: 72px; left: 0; right: 0; /* height: 100%; = 100vh */ /* height,whidthを設定しない場合,自要素の幅と高さになる */ width: 100%;/*widthを設定したらdefaultでheightはautoになる*/ z-index: -10; } @media screen and (min-width: 900px) { .Container { margin-left: 300px; } #video { width: 100%; height: 100vh; } /* 「position: fixed;」で動画を固定し、 */ /* 「top: -220px;」で表示位置を調整 */ /* なんでtop:-220px;しているのか不思議だった */ /* 理由はheight: 100%; */ /* これはviewportに対して100%になる */ /* 下に余白を開けたいのでtop:-220px; */ /* top: -220px; */ /* height: 100%; */ #video .bg-video { height: 80vh; top: 0; left: 300px; /* width: 100%; */ object-fit: cover; } } </style> <div class="Container"> <main> <div id="video"> <video class="bg-video" src="https://code-step.com/demo/html/corporate3/video/video.mp4" loop autoplay muted playsinline></video> </div> </main> </div> section#product htmlの構造 CSSの構造 スマホ　.sec-title{text-centerは不要} レスポンシブにかかるCSS <style> .wrapper { max-width: 900px; margin: 0 auto; padding: 60px 20px; } .sec-title { font-size: 1.25rem; margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between; } .sec-title::before, .sec-title::after { width: 18%; border-top: 1px solid; content: ""; } #project { /* 背景に透明なグラデーションができている気がする */ background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); color: #fff; } #project .list li { width: 100%; margin-bottom: 30px; border: solid 1px #fff; /* absoluteは2つある */ /* li a::after{} と .list .name{} */ position: relative; } #project .list li a { display: block; } /* 疑似要素を使用して、テキストの下に「box-shadow」で影を付ける */ #project .list li a::after { content: ""; box-shadow: 0 -30px 15px -1px #2e2e2e inset; /* relativeは親の親のli要素 */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #project .list .name { color: #fff; font-size: 0.75rem; /* relativeは親の親のli要素 */ position: absolute; bottom: 4px; left: 7px; z-index: 5; } @media screen and (min-width: 900px) { .wrapper { padding: 80px 20px; } .sec-title { font-size: 1.75rem; margin-bottom: 60px; } .sec-title::before, .sec-title::after { width: 28%; } #project .list { display: flex; justify-content: space-between; flex-wrap: wrap; } #project .list li { width: 47%; margin-bottom: 50px; } /* 下段の2つはマージンを設定しない */ #project .list li:last-child, /*:nth-last-child 後ろからn番目 (1~)*/ #project .list li:nth-last-child(2) { margin-bottom: 0; } } </style> <section id="project"> <div class="wrapper"> <h2 class="sec-title">建築事例をご紹介</h2> <ul class="list"> <li> <a href="#"> <img src="https://code-step.com/demo/html/corporate3/img/project1.jpg" alt=""> <p class="name">PROJECT_01</p> </a> </li> <li> <a href="#"> <img src="https://code-step.com/demo/html/corporate3/img/project2.jpg" alt=""> <p class="name">PROJECT_02</p> </a> </li> <li> <a href="#"> <img src="https://code-step.com/demo/html/corporate3/img/project3.jpg" alt=""> <p class="name">PROJECT_03</p> </a> </li> <li> <a href="#"> <img src="https://code-step.com/demo/html/corporate3/img/project4.jpg" alt=""> <p class="name">PROJECT_04</p> </a> </li> </ul> </div> </section> section#feature htmlの構造 CSSの構造　スマホ レスポンシブにかかるCSS section#flow html構造 CSSの構造　スマホ ボーダーによる三角形 1pxのボーダーは線になるが、 100pxとかになると線というより方形になる。heigth:100px;なら正方形。 作りたい三角形は底辺calc(100vw-80px) * 高さ30pxの三角形 高さ30pxのborder-top (boder:30pxは上と下で60pxになる) pos-absoluteの幅はright:0;left:0;でpos-relativeと同じになって、この場合calc(100vw-80px)になる。 leftとrightを半分の幅で透明にしてやると下向き三角形ができる。上向きや左右も同じ原理 トップとレフト　トップとライト レフトとライトを空白にすると三角形になる。 CSSの構造　レスポンシブ <style> #flow { padding-top: 0; background-color: #fff; } #flow .step { display: flex; margin-top: 30px; flex-direction: column; align-items: center; } #flow .figure { position: relative; margin-bottom: 80px; } /*図形下の黄色い棒線を中央に配置 */ #flow .figure::before { position: absolute; content: ""; width: 50px; height: 600px; background-color: #ffdd00; top: 0; left: 0; right: 0; margin: 0 auto; display: inline-block; } /* ※80pxは任意の数値ですので、 */ /* 図形をもっと小さくして */ /* 横の余白とりたい場合は、 */ /* ここの数値を大きくする等して調整が可能です */ #flow .figure li { width: calc(100vw - 80px); height: 80px; line-height: 80px; background-color: #414141; color: #fff; font-size: 0.875rem; margin-bottom: 60px; text-align: center; position: relative; } /* 図形（三角部分）の横幅を設定 ※上記同様、*/ /* 図形のサイズにあわせて調整を行う */ #flow .figure li::before { content: ""; border-left: calc(50vw - 40px) solid transparent; border-right: calc(50vw - 40px) solid transparent; border-top: 30px solid #414141; position: absolute; top: 80px; right: 0; left: 0; } #flow .description { margin-left: 50px; } #flow .description dt { border-bottom: solid 1px #121212; font-size: 1.25rem; padding-bottom: 8px; margin-bottom: 10px; position: relative; } /* 丸数字を作成 */ /* 「position」を使用して、タイトルの左側に配置 */ #flow .description dt span { width: 35px; height: 35px; line-height: 35px; background-color: #414141; border-radius: 50%; color: #fff; display: block; font-size: 1rem; text-align: center; position: absolute; bottom: 0; left: -45px; } #flow .description dd { margin-bottom: 43px; } #flow .description dd:last-child { margin-bottom: 0; } @media screen and (min-width: 900px) { #flow { padding-top: 40px; } /* figureとdescriptionを横並びに変更 */ #flow .step { flex-direction: row; margin-top: 60px; } /* 図形の四角部分を作成 */ /* 幅を200pxに縮小 */ #flow .figure li { width: 200px; } /* 図形の三角部分を疑似要素で作成 */ /* 「position」を使用して、四角の下に配置 */ /* 幅を200pxに縮小したので合わせて縮小 */ #flow .figure li::before { border-left: 100px solid transparent; border-right: 100px solid transparent; } #flow .figure li:last-child { margin-bottom: 0; } #flow .description { margin-left: 10%; } } </style> <section id="flow"> <div class="wrapper"> <h2 class="sec-title">家ができるまでの流れ</h2> <p>お問い合わせいただいてから、家が完成するまでの流れです。</p> <div class="step"> <ol class="figure"> <li>1.ヒアリング</li> <li>2.プラン提案</li> <li>3.契約</li> <li>4.着工</li> <li>5.完成</li> </ol> <dl class="description"> <dt><span>1</span>ヒアリング</dt> <dd> テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト </dd> <dt><span>2</span>プラン提案</dt> <dd> テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト </dd> <dt><span>3</span>契約</dt> <dd> テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト </dd> <dt><span>4</span>着工</dt> <dd> テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト </dd> <dt><span>5</span>完成</dt> <dd> テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト </dd> </dl> </div> </div> </section> section#contact htmlの構造 cssの構造　スマホ CSSの構造 レスポンシブ <style> #contact { background-color: #fff; padding-bottom: 60px; } #contact .link { margin-top: 30px; } #contact .link .item { display: block; width: 60%; /* センターに配置 */ margin: 20px auto 0 auto; padding: 50px 0; border: solid 1px #121212; font-size: 0.875rem; text-align: center; transition: 0.1s; position: relative; } #contact .link .item::before { content: ""; border-top: 20px solid transparent; border-right: 20px solid #121212; position: absolute; right: 4px; bottom: 4px; } #contact .link .item:first-child { margin-top: 0; } #contact .link .item:hover { outline: solid 3px #121212; /* ホバー時は枠線を太くする */ /* 「border」ではなく「outline」を使用することで、 */ /* ホバー時にレイアウトがずれるのを防ぎます。 */ /* ※詳細を知りたい方は、borderとoutlineの違い */ /* について検索してみてください。 */ } #contact .link .item img { margin-bottom: 5px; } @media screen and (min-width: 900px) { #contact { padding-bottom: 80px; } #contact .link { display: flex; justify-content: space-between; } #contact .link .item { width: 30%; margin-top: 0; } } </style> <section id="contact"> <div class="wrapper"> <h2 class="sec-title">お問い合わせ</h2> <p>お問い合わせは下記からお願いいたします。</p> <div class="link"> <a class="item" href="#"> <img src="https://code-step.com/demo/html/corporate3/img/icon-document.png" alt=""><br>資料請求 </a> <a class="item" href="#"> <img src="https://code-step.com/demo/html/corporate3/img/icon-seminar.png" alt=""><br>Web説明会 </a> <a class="item" href="#"> <img src="https://code-step.com/demo/html/corporate3/img/icon-talk.png" alt=""><br>個別相談 </a> </div> </div> </section> footer htmlの構造 cssの構造 <style> #to-top { width: 50px; height: 50px; border: 1px solid #fff; border-radius: 50%; position: fixed; right: 25px; bottom: 25px; background-color: #121212; } #to-top::after { content: ''; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #fff; position: relative; left: 17px; bottom: 3px; } #footer { padding: 50px 30px 10px; background-color: #222; color: #fff; } #footer ul.menu { display: flex; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 80px; } #footer ul.menu li a{ display: block; color: #fff; padding: 0 10px; border-left: 1px solid #fff; } #footer ul.menu li:nth-child(1) { border-left: none; } .copyright { text-align: center; } </style> <footer id="footer"> <a id="to-top" href="#"></a> <ul class="menu"> <li><a href="#">私たちについて</a></li> <li><a href="#">サービス</a></li> <li><a href="#">商品情報</a></li> <li><a href="#">展示会</a></li> <li><a href="#">暮らしの日記</a></li> <li><a href="#">会社概要</a></li> </ul> <p class="copyright">Copyright &copy; 2021 Akarui HOUSE All Rights Reserved.</p> </footer>

はじめまして。 Qiita初投稿になります。 この記事はわたくしが、 Googleが管理しているであろうサイトのソースコードを ChromeのDeveloper Toolsで見たときの感想です。 結論等があるわけではなく、あくまで備忘録的なものですが、 もしかしたら役に立つ方がいらっしゃるかもしれませんので、 一応、記事として残しシェアしたく思います。 目次 - なぜ、Googleが管理しているサイトのソースコードを見たのか - どこがわからなかったのか - Grow with Google - Google Analitics - Google document - まとめ なぜ、Googleのサイトのソースコードを見ることになったか 当時わたしはSEOの勉強をしており、 見出し(hタグ)の適切なマークアップについて調べていました。 いい見本がないか考えていたところ、 Googleが管理しているサイトのソースコードを 見ればよいのではないかと思いつきました。 (SEO＝Google対策という話を聞いたことがあるため) どこがわからなかったのか それでは本題です。 以下にわからなかった点をいくつか紹介いたします。 Grow with Google https://grow.google/intl/ALL_jp/ わからないところ… 複数のh1タグと一番上にh3タグ このサイトは一つのページにh1を連発しています。 簡単に数えたところ11個ありました。 あと、一番上にh3タグがあります。 確かにh1タグはいくつ使ってもいいという話は 聞いたことがありますが、このページのhタグの 使い分けが僕にはよくわかりませんでした…。 いきなりh3タグというのも謎です…。 Google Analitics https://marketingplatform.google.com/intl/ja/about/analytics/ わからないところ… h2の中にpタグ 一番上のh1タグの下にある文章をh2タグにしており、 そのh2タグの中をさらにpタグでマークアップしています。 わたくしは以前、見出しのタグの中にpタグを入れており、 間違っていると指摘された経験があります。 その後、自分でも調べて間違っているという情報が多かったので、 それ以降はやめていたのですが、今回Google Analiticsのサイトで、 見つけてしまい、またわからなくなりました。 Google document https://www.google.com/intl/ja_jp/docs/about/ わからないところ… 見出しっぽいのにspanタグ ページ中盤あたりの、「共同作業でもっと便利に」 という文章は見出しっぽいのに、spanタグでマークアップされています。 親要素はlabelタグでこれもよくわかりません。(クリックできるような カーソルの変化はありますが、クリックしても変化はありませんし…。) まとめ 以上です。 全てのサイトを見たわけではありませんので、 他にもあるかもしれませんが…。 今回は、もともと自身のマークアップやSEOの勉強のために、 Googleのサイトのソースコードを見ましたが、 自分が学んできたマークアップとの違いにびっくりした！ という記事でした。 今回紹介したGoogleのマークアップは現時点の自分にはできませんが、 いつか「なるほど。そういうことだったのか」などと、 思う日がやってくるかもしれません。 ある意味では新鮮な体験であり、勉強になりました。

lightboxを使うと簡単にポップアップ表示できます。 まず、lightboxのサイトでファイルをダウンロードします。 参考にした記事 ファイルを解凍してファイルのdistファイル内のcssとjsの中身を index.html用のcssファイルとjsファイルに移します。 index.html <head>内に読み込む <link rel="stylesheet" href="css/lightbox.min.css"> index.html </body>前に読み込む <script src="js/lightbox.min.js"></script> 最後にポップアップ画像のコードを書きます。 index.html <a href="https://haniwaman.com/cms/wp-content/uploads/2018/02/cat.jpg" data-lightbox="demo">画像文字を書き込む</a> 参考にした記事