しょーごさんの中級課題(蓼科ごとう農園) の備忘録《後編》を解説していきます。
内容はお問い合わせ、フッター、sectionとsectionの間にあるimgの配置方法、スクロール時ふわっと表示させる、ローディングについてです。
10分程度で読めるのでお付き合いいただけますと幸いです！
＼全体のデザインが見れます！／
しょーごさん中級課題をチェック
ご意見・ご質問等ございましたら、お気軽にお問い合わせください。
また、おかしな点などございましたら、教えていただけると幸いです。
コーディング
お問い合わせ
一番苦労したセクションです。作業時間の1/4はここに費やしました。
力を入れて解説していきますのでお付き合いください。
フォームの構成(PC: 横積み、SP:縦積み)
HTMLに<teble>を用いても組むことができますが、今回は<teble>を用わずFlexboxでレイアウトを組みました。<teble>を用いてレイアウトするメリットは、CSSに記述をしなくても段組みレイアウトが実現できることです。
ラジオボタンのCSSで装飾する際の注意点
どのようにデフォルトUIを消す？
ここでのポイントは画面表示上は不要になるinputを隠すためにdisplay :none;を使用するのはやめましょう。キーボード操作が全くできずアクセサビリティが低下してしまいます。
ではどうするか？
これでキーボード操作で移動/選択も問題なく可能です。
ラジオボタンのクリックできる領域が小さすぎる問題
ラジオボタン、チェックボタンのデフォルトUIはパーツ領域しかクリックできません。
これをテキストも含めたクリック領域にしてあげるのは最低限のアクセアビリティに繋がります。
<label class=" input-label">お問い合わせ種類
<span class="require" aria-hidden="true">必須</span>
</label>
<div class="radio-wrap">
<div class="radio-wrap_item">
<input type="radio" id="company" class="radio" name="entry.305880971" value="弊社製品について" checked required>
<label for="company">弊社製品について</label>
</div><!-- /.radio-wrap_item -->
</div><!-- /.radio-wrap -->この方法はタイトル(お名前など)をクリックしても、対応するカーソルが選択されるようになります。(今回、私はラジオボタン以外は紐づけていますのでご確認ください。)
ユーザー名、パスワードともにuser-111
inputにchechedを入力するとページを開いた時点で事前にチェックが入っているようになります。
requiredは必須項目に記入しましょう。
ラジオボタンのドーナツ型のボタン装飾の仕方
私はチェック時に、ラジオボタンの丸い部分の背景を茶色にして、真ん中に白い丸を表示させました。擬似要素で:beforeが背景、:afterが白丸です。
以下がSCSSです。
//input装飾部分省略
***
input[type^=radio]:checked+label:before {
background: $c_text;
}
input[type^=radio]:checked+label:after {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 6px;
width: 4px;
height: 4px;
margin: 0;
padding: 0;
border-radius: 50%;
background: #fff;
line-height: 1;
}
失敗例1 エラーメッセージが表示されない
これが最初でなくて苦労しました。
以下はコードを直して無事表示されるようになったものですので安心してご覧ください。
<form action="https://docs.google.com/forms〜" target="_self" method="POST" id="form">
<div class="contact__container">
<div class="input-field">
<label for="contact__name" class="input-label">お名前
<span class="require" aria-hidden="true">必須</span><!-- /.require -->
</label><!-- /.contact__name -->
<input type="text" id="contact__name" name="entry.691037678" required>
</div><!-- /.input-feild -->
<p class="error-text" role="alert" aria-live="polite" aria-hidden="true">お名前を入力してください。</p>
</div><!-- /.contact__container -->
</form>/*エラー時*/
.is-error .input-field input[type="text"],
.is-error .input-field input[type="email"],
.is-error .input-field input[type="tel"],
.is-error .input-field textarea {
color: #F7320E;
border-color: #F7320E;
}
//エラーメッセージ
.error-text {
display: none;
margin-top: 16px;
color: #F7320E;
font-weight: bold;
}
.is-error .error-text {
display: block;
}以下jQueryです。
//コンタクトのエラーメッセージ
$('input,textarea').each(function () {
$(this).on('change', function () {
if ($(this).is(':invalid')) {
$(this).parents('.contact__container').addClass('is-error');
$(this).parents('.contact__container').find('.error-text').attr('aria-hidden', false);
} else {
$(this).parents('.contact__container').removeClass('is-error');
$(this).parents('.contact__container').find('.error-text').attr('aria-hidden', true);
}
});
});
$('#submit').on('click', function () {
$('input,textarea').each(function () {
if ($(this).is(':invalid')) {
$(this).parents('.contact__container').addClass('is-error');
$(this).parents('.contact__container').find('.error-text').attr('aria-hidden', false);
} else {
$(this).parents('.contact__container').removeClass('is-error');
$(this).parents('.contact__container').find('.error-text').attr('aria-hidden', true);
}
});
});結論から言うと、表示が出なかった原因は違うクラス名を書いていたことでした。具体例で言うと.parents(‘.contact__container’)を.parents(‘.input-field’)と記載していました。inputがその親要素の(~)の.error-textを探して隠すようにすると言う命令なのに、兄弟要素である.input-fieldを指定してしまっていました。
ちなみに:invalid は CSS の擬似クラスで、input要素やform要素のうち内容が検証に失敗したものを表します。
失敗例2 textareaで右下のマークが消えない
.input-field textarea {resize: none;}これを入力するだけで消えました！
Googleformの実装
安定のしょーごさんの記事を参考にしました！
Googleフォームを静的サイトに埋め込みカスタマイズ【非同期通信Ajax】
必須の項目を全て埋めなければ送信できないように実装
こちらも同じくしょーごさんの記事を載せておきます！
フッターの実装方法
こちらのポイントはレスポンシブを工夫したのと、左右の<img>の配置方法です。
レスポンシブ
ブレイクポイント 1020px~768pxまで
これは<ul>.ftmenu__listにflexboxで横並びにし、<li>.ftmenu__itemにwidthの指定をするだけです。
.ftmenu__list {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 27.4%;
flex-wrap: wrap;
}
.ftmenu__item {
width: calc((100% - 20px)/2);
}
左右の<img>の配置方法
<div>で囲んだ<img>をそれぞれ用意し、ネガティブマージンで調節。最後に2つ目の<img>にvertical-align: bottom;で下揃えにして完成です。
.footer_pic1 {
text-align: left;
.footer_img1 {
margin-left: -15px;
margin-bottom: -28px;
width: 197px;
height: auto;
}
}
.footer_pic2 {
text-align: right;
.footer_img2 {
margin-right: -15px;
margin-top: -162px;
width: 137px;
height: auto;
vertical-align: bottom;
}
}
sectionとsectionの間にあるimgの配置方法
ここは書くことがないのでさらっといきます。
position: absolute;で浮かせて左寄せ(右寄せ)です。z-indexで重なりを上にします。
スクロール時ふわっと表示させる【jQuery】
とてもわかりやすかったのでこの記事を参考にしてください！
【超図解】jQueryでスクロール時に要素をフェードインさせる方法
ローディング【jQuery】
これは画像などを使用しておしゃれにしたりもできますが、今回は画像を使わずSCSSのみで作っています。
//<body>内に配置
<div id="loadingWrap">
<div id="loading"></div>
</div>
//ローディング
function loadingStop() {
$('#loadingWrap').addClass('loadingNone');
}
//画像など読み込まれたら発火の意味
$(window).on('load', function () {
loadingStop();
});
});#loadingWrap {
width: 100%;
height: 100vh;
background: #000;
position: fixed;
top: 0;
left: 0;
z-index: 10005;
}
#loading {
width: 5em;
height: 5em;
border-top: 1em solid rgba(255, 255, 255, 0.2);
border-right: 1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1em solid rgba(255, 255, 255, 0.2);
border-left: 1em solid white;
animation: loaderAnime 1s infinite linear;
border-radius: 50%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: 11;
}
@keyframes loaderAnime {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loadingNone {
animation: loadingAnime 1s forwards;
display: none;
}
@keyframes loadingAnime {
0% {
opacity: 1;
}
99% {
opacity: 0;
}
100% {
opacity: 0;
display: none;
}
}
最後に…
間違っている点、文章の読みずらい点、たくさんあるかと思いますが、最後までお付き合いいただきありがとうございました。
ここまで読んでくださった方は、勉強熱心でWEB制作に本当に熱意を持っている方だと思います！
指摘部分があると思われる方はぜひお問い合わせで教えていただけると嬉しいです。間違っている点は修正させていただきます。この記事が少しでも役に立てると嬉しいです。
しょーごさんの中級《前編》はこちら
しょーごさんの中級《中編》はこちら
しょーごさん中級課題をチェック
私はしょーごさんのロードマップをもとに、中級以上の全部盛りセットを購入して学習を進めています。こちらのセットは単品購入よりも15％お得になります。プロの添削をこの値段で受けれる教材は他にはないです！独学者にとって今の学習が合っているのか不安になることが多いと思いますが、私はこの教材で安心が確認できたと感じました。ビシバシ鍛えられ、将来の自分のポートフォリオとしても利用可能ですのでぜひご覧ください！
＼単体より15％もお得です／
中級以上セットをチェック
