《中編》しょーごさんの中級課題(蓼科ごとう農園) の備忘録　

しょーごさんの課題
2023.05.24
しょーごさんの中級課題(蓼科ごとう農園) の備忘録《中編》を解説していきます。
内容は製品一覧、FAQ、アクセスについてです。10分程度で読めるのでお付き合いいただけますと幸いです！
前編ではヘッダーやトップページの解説を、
後編では内容はお問い合わせ、フッター、sectionとsectionの間にあるimgの配置方法、スクロール時ふわっと表示させる、ローディングについての解説をしています。
さやまる
さやまる
見ていない方は一度ご覧頂ければ嬉しいです。

 

＼全体のデザインが見れます！／
しょーごさん中級課題をチェック

私のコーディングした中級のサイトです。

https://saya-hands.conohawing.com/tateshina-goto-farm/

ユーザー名　user-111
パスワード　user-111

 

ご意見・ご質問等ございましたら、お気軽にお問い合わせください。

また、おかしな点などございましたら、教えていただけると幸いです。

さやまる
さやまる
この記事を書いたのは
さやまる(@web83740439)

 

このブログ【さやまる｜WEBデザイナーてどうよ？】の運営者。
WEB制作で食べていくことを決意し、独学勉強中の1児のママ。

コーディング

製品一覧

これはswiperを使用しました。

参考にしたのはBRISKさんのこちらの記事がとてもわかりやすかったです！こちらには載せれませんが中級購入者のみが閲覧できるしょーごさんの解説動画もわかりやすかったです！

関連情報
【最新v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー
【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK
Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろあり
b-risk.jp

 

失敗例1　横スクロールが出る

私の失敗例を紹介します。

<div class="swiper">
　　<div class="swiper-wrapper">
　　　　<article class="swiper-slide">
　　　　　<figure><img></figure>
　　　　　<h3>標高1,000mオーバーの蓼科高原だからこその、あまあま芽キャベツ!! 1kg</h3>
　　　　　<p>￥ 4,200（税込）</p>
　　　　</article>
　　　　　　　　//articleがもう７個下にある
　　　　　　　　　***
　　</div>
</div><!-- /.swiper -->

スワイパーを実装すると横スクロールが発生してしまいました。

これはSCSSでカード(下記のことをカードと言います)をまとめていた<div　class=”swiper”>にoverflow: hidden;を追加して回避できました。

さるわかさんのこちらの記事がわかりやすいです！

関連記事
【CSS】overflowの使い方：hiddenやscrollの違いは？
【CSS】overflowの使い方：hiddenやscrollの違いは？
はみ出た部分の処理を決めるCSSのoverflowについて丁寧に解説します。分かりづらいvisible、hidden、scroll、autoの意味と使い分け方は？
saruwakakun.com

失敗例2　カードの下の影がつかない

スライダーを実装すると横スクロールが出現し、それを回避するためのoverflow: hidden;を、カード<article>をまとめていた<div class=”swiper”>につけていたのですが、それが邪魔をしカード<article>の下の影(box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);)を消していました。こちらのoverflow: hidden;を消すと、横スクロールが出るため消せないし困った…。

.swiper { padding: 6px 0;} //影が6pxのため

で解決しました。

お知らせ

お知らせは10分程度で完成しました。
HTMLは<dl>,<dt>,<dd>で構成し、FlexBoxで<dt>,<dd>を横並びで瞬殺です。

  • dl　= 説明リスト
  • dt = 説明する言葉 (ここでは日付)
  • dd = 定義文 or 説明文　(ここではお知らせテキスト)

 

お知らせ内の余白はheightでも調整可能ですが、文字量が増えてきた時のことを考えて、
paddingで取った方が安心です。

heightでの余白

文字が増えるとテキストが高さをはみ出てしまいました。

paddingでの余白

綺麗に収まっています。

ひろきち
ひろきち
文字が増えても安心ですね。

 

FAQ

FAQもそれほど時間はかからず実装できました。これもHTMLは<dl>,<dt>,<dd>で構成しました。
ここで重要なのが、dtのaria-controlsとddのidを一致させておくことです。

<dl class="accordion faq_container">
<dt>
<button id="accordion1__toggle" class="accordion__toggle faq__question element"
aria-controls="accordion1-panel" aria-expanded="false">
<span class="faq__q-icon">Q</span><!-- /.faq__q-icon -->
<span class="faq__q-text">冷蔵便で配送できますか？</span><!-- /.faq__q-text -->
<span class="faq__action"><span class="visually-hidden">回答パネルを開く</span></span>
</button><!-- /.accordion__toggle-->
</dt>
<dd id="accordion1-panel" class="accordion__panel" aria-hidden="true"
aria-labelledby="accordion1-toggle">
<div class="faq__answer">冷蔵便に対応しています。その場合別途150円かかります。</div><!-- /.faq__answer -->
</dd><!-- /.accordion__panel -->
//<dt><dl>が後4つ続きますが以下省略…。
</dl><!-- /.accordionfaq -->
.faq__question[aria-expanded="true"] & { //jQuery用で左の矢印を上向きへ
left: -8px;
transform: rotate(180deg);
}

jQueryは以下の通りです。

function accordion() {
$('[aria-controls^="accordion"]').stop().on('click', function (e) {
const $self = $(e.currentTarget);　
   < !--e.currentTargetは、イベントハンドラを登録している要素を指します。
      ここでは[aria-controls^="accordion"]を指します。-->
const expanded = $self.attr('aria-expanded');
const $target = $('#' + $self.attr('aria-controls'));

if (expanded === 'false') {
$self.attr('aria-expanded', true);
$target.attr('aria-hidden', false).slideDown();
} else {
$self.attr('aria-expanded', false);
$target.attr('aria-hidden', true).slideUp();
}
});
}
accordion();

   jQueryアコーディオンの解説

  • dt(質問文)([aria-controls^=”accordion”])をクリックすると以下の条件で操作してください。
  • もしdt([aria-controls^=”accordion”])が開いていなかったら、
        • 右の矢印を上向きにしてください。(SCSSで指定)
        • dtの’aria-controls’のクラス名に＃(id属性)をつけてdd(回答文)のidと一致させて、ddを隠さず開いてください。
  • もしdt([aria-controls^=”accordion”])が開いてたら、
        • 右の矢印を下向きにしてください。(SCSSで指定)
        • dtの’aria-controls’のクラス名に＃(id属性)をつけてddのidと一致させて、ddを隠すように閉じてください。

 

さやまる
さやまる
実際にどう動くのかこちらでご覧ください。
ユーザー名、パスワードともにuser-111

またQのみRobotoというフォントで、他と違うので気をつけてくださいね！

アクセス

こちらも簡単です。これもHTMLのテキストは<dl>,<dt>,<dd>で構成しました。
ここではYoutubeの埋め込みについて記載します。

<div class="map element">
<iframe　src="https://www.google.com/maps/〜"></iframe>
</div><!-- /.map -->
.map {
margin-top: 50px;
width: 100%;
height: auto;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
aspect-ratio: 12/9;

@include medium {
margin-top: 0px;
width: 100%;
height: auto;
overflow: hidden;
}
}

Youtubeの埋め込み自体は簡単なのですが、つまづきやすいのがレスポンシブです。
アスペクト比を維持しつつ、SPでは縦積み、PCでは横並びにします。

  1. 縦横比を守りつつレスポンシブする方法
    padding-topを使う
    aspect-ratioを使う
さやまる
さやまる
今回はaspect-ratioを使ってレスポンシブ対応しました。

以下のサイトがわかりやすいのでご覧ください。

関連記事
意外とたくさん！YouTube動画の埋め込みテクニックを解説
https://b-risk.jp/blog/2022/04/swiper/
【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする
【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする
Webサイトで動画を扱うとき、YouTubeの埋め込みをよく使うと思います。でもレスポンシブにしようとすると縦横比が崩れてあんまり綺麗にならずに悩んでる方いませんか？この記事ではYouTube埋め込みを縦横比を保ちながらレスポンシブ対応にする方法をご紹介します。
kakechimaru.com

続きは後編へ！

さやまる
さやまる
記事を読んでいただきありがとうございました！

私自身コーディングを独学で勉強しており、ワードプレスの学習を始める前にさわっておきたいと思い、このブログを初めて書きました。やり方がわからず調べながら、今回ブログ投稿に1週間かかりました。

Twitterやブログで早い時間で終えている方を見ては、ああ自分は遅いと落ち込んだり、早くしなきゃと焦りがありますが、でも着実に前に進めてる、昨日の自分より成長できていると感じています。

もし私と同じ思いの方がいらっしゃっるのなら、少しでもその方のお力になれればと思いブログを書いています！

続きは後編に書きます！ぜひご覧ください。
後編では内容はお問い合わせ、フッター、sectionとsectionの間にあるimgの配置方法、ローディング時ふわっと表示させる、ローディングについての解説をしています。
＼全体のデザインが見れます！／
しょーごさん中級課題をチェック

私はしょーごさんのロードマップをもとに、中級以上の全部盛りセットを購入して学習を進めています。こちらのセットは単品購入よりも15％お得になります。プロの添削をこの値段で受けれる教材は他にはないです！独学者にとって今の学習が合っているのか不安になることが多いと思いますが、私はこの教材で安心が確認できたと感じました。ビシバシ鍛えられ、将来の自分のポートフォリオとしても利用可能ですのでぜひご覧ください！

＼単体より15％もお得です／
中級以上セットをチェック

タイトルとURLをコピーしました