【実践】コーディング課題をやってみた【意識したこと・学んだこと】

こんにちは、Daikiです。

実は、10/12〜10/23にかけてコーティング課題に奮闘していたのですが、ようやく完成させることができました。

いや〜想像以上に実装が難しくて、想定していた制作時間を大幅に超えてしまいましたね、、

今回取り組んだコーディング課題はこちら↓↓

note（ノート）

【中級Ex】 デザインカンプからのコーディング実践演習【HTML,CSS,JS実案件レベル】｜Shogo（しょーごログ... 2024.02.07 超実践編の開講案内を記事下部に掲載しました！ 2024.03.29 建築会社サイトデザインを追加しました！！ こんにちは、現在フリーランスのエンジニアとして6...

正直、初見の実装が多すぎて、「手が止まってはひたすらググる → うまく実装できない → またググる → 疲れる」という時間がほとんどでしたが、その分かなり実力は身についたかなって思ってます。

頭はパンク寸前ですけど笑笑

ということで、今回の記事では、備忘録も兼ねて、「コーディング中に意識したこと」「新しく学んだこと」「つまづいた点」を共有します。

これから同じコーディング課題に挑む人のお役に少しでも立てれば嬉しいです。

コーディング時に意識したこと

コーディング時に意識したことは以下の通り。

特に意識したのは、「CSS設計」と「Scss形式でのコーディング」の2点。

中級編の時にも、Sassを使ってコーディングしていたものの、入れ子構造で書いてなかったので、今回練習することに。

あと、迷ったのが、

トップページ・下層ページの共通スタイルはまとめた方がいいのか？

という点。

中級Ex編は「トップページ」＋「下層ページ3つ」といった構成だったため、必然的に共通スタイルが生まれたんですよね。

さすがに下層ページごとに、全く同じ「setting」「foundation」フォルダなどを書くのは不毛な気がしたので、2ページ以上で使われるスタイルは「common」フォルダにまとめました。

新しく学んだこと

新しく学んだことは以下の8つ。

縦書きCSS

縦書きは今まで全く手につけてなかったので、結構苦戦しました。

正確に言えば、縦書きにすること自体は簡単なんですが、上下左右の余白、文字のインデント、幅、text-alignを使いこなすのが難しかったです。

あと、PCの表示は問題ないのに、タブレットサイズだと文字が画面からはみ出てしまう、、といった事態にも陥りましたね。

一応、縦書きcssの注意点についてまとめておきます。

「参考サイト」

・【CSS】徹底検証！CSSで縦書きデザインをやってみる！
・日本語の縦書きサイトで使うCSSプロパティと注意点
・日本らしさを表現！CSSで文字の縦書きに挑戦！
・縦書きレイアウトに使用するCSSプロパティ

ちなみにですが、以下の余白。最初パッと見た時、どうやって実装すればいいのか予想がつきませんでした、、

・【CSS】2行目以降のインデントを下げる[text-indent]の使い方

こちらのサイトを見れば一発で解決しましたよ。

CSSアニメーション

今回のコーディング課題の中で、縦書きと同じくらい苦戦したのが「CSSアニメーション」。

画像が拡大しながらフェードイン・アウトを繰り返す感じですね。

これを実装するには「animationプロパティ」と「@keyframes」を使う必要があるのですが、何にせよこの「@keyframes」に記述するコードの理解に時間がかかりました。

@keyframes animate {
  0% {
    opacity: 0;
  }
  17% {
    opacity: 1;
  }
  34% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
  }
}

初めて見たとき、思わず「何だこれは、、」と言ってしまいましたね。

ただ、長い時間格闘した結果、どうにかcssアニメーションの特徴を掴めました。

「animationプロパティ」と「@keyframes」の使い方は以下のサイトが参考になるので、よければぜひ。

・「animation」と「keyframes」の使い方のおさらい
・cssだけでズームしながらふわっと表示が切り替わるスライドショーを作る
・CSSだけでスライドショー

カレンダー表示（flatpickr使用）

カレンダーで宿泊予約の日時を選択できるようにするためには、javascriptライブラリの「flatpickr」を使えばいいとのこと。

テンプレに沿ってjavascript記述するだけで、上記のようなカレンダーをすぐに作れました。

jQueryに依存せず単独で動くことと、動作が軽いのが大きなメリットですね。

以下のサイトを参考にすれば、すぐに導入できます。

・Flatpickrで日時入力をカレンダー表示にする（祝日の表示をカラーに）

パンくずリストの構造化データの書き方

パンくずリストの構造化データは、複数ページのコーディングでなければなかなか練習できないことなので、これを機に学べて良かったです。

クローラーにサイトの構造を分かりやすく伝える（SEO対策になる）ためにも、パンくずリストの構造化データは必須ですね。

「参考サイト」

・パンくずリストの構造化データの書き方

「object-fit」の使い方

<img>タグで画像を配置する際、何も設定しなければ、画面のサイズに応じて縦横比が勝手に変わってしまいます。

それだと何とも見栄え悪いサイトが出来上がってしまうので、どの画面サイズでも縦横比を一定に保ちたいですよね。

そこで役に立つのが「object-fit」プロパティ。

値にはcover / contain / none など様々ありますが、おそらく頻用するのは「cover」かなと。

background-size:cover;
background-position:center;

と同じ働きをしてくれるので、<img>タグで配置する画像には使いやすいですね。

学習時には以下のサイトが役に立ちました。

・【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー

「object-fit」をIE / Edgeにも対応させる

「object-fit」はIE/Edgeに対応していないので、個別に適応させる必要があるんですよね。

この作業を無視すると、IE/Edgeブラウザでページを表示させた時に、

ともなりかねません。

もし実務だったら、100%修正依頼が来るはず。

クロスブラウザ対応は必要不可欠ですね。

「object-fit」をIE/Edgeに対応させる方法は、以下のサイトを見ればバッチリ理解できます。

・CSSプロパティ【object-fit】をIEに対応させる方法

padding-topで要素の比率を保持しつつサイズを可変させる

画面サイズに合わせて、自動的に画像や要素の高さを変化させたい時に役立つのが、「padding-top」。

要素の幅を基準に余白が決まる「padding」の特性をうまく活かしたやり方ですね。

要素の比率を保持しながら高さが変化するので、レスポンシブデザインを組む際には最適です。

以下の記事が分かりやすかったので、是非参考にしてみてください。

【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法

select要素にplaceholderみたいな見た目を付ける方法

宿泊予約のフォームの中に、プランを選ぶ項目があるのですが、このselect要素の見た目をplaceholderみたいにする必要があるんですよね。

未選択の場合は薄い黒色、選択後は濃い黒色で表示するのってどうやればいいんだろう？

と悩み色々情報を探してたところ、いい感じの記事が見つかりました。

「参考サイト」

【初心者向け】select要素にプレースホルダーを付ける方法と付けられない理由の考察

ちなみに僕は、①のその2を参考にしました。

cssだけでなく、jQueryも使用しますが、実装自体は簡単です。

つまづいた点

今回つまづいた点は以下の通り。

一つずつ深掘って紹介します。

「wrapper」「container」「inner」「outer」の使い分け

「outer」はまだしも、「wrapper」「container」「inner」の使い分けに迷ってしまい、かなり時間を浪費してしまいました、、

ネットで色々情報を調べましたが、人によって見解が違ってたので、「あらかじめ自分でルールを決めておく」のが最適なのかなって思いましたね。

ルールを決めておきさえすれば、余計なことで悩む必要もなく、コーディングに集中できるので。

今後はしっかりルール作ります。

google検証ツールのエラー

トップページのCSSを書き終えた時に、ふとGoogleのデベロッパーツールを見てみると、何やら大量のエラーが。

どうやら、googleマップなどの埋め込みコンテンツをサイト内に入れると表示されるらしいです。
（ローカル上で）

僕もまだ完全には理解できてませんが、どうやら「SameSite属性の設定をしてください！」とのこと。

ただ、自分のサーバーにページをアップロードした後は表示されなかったので、特に対応はしてません。

参考サイトを以下にまとめておきますね。

・HTTP クッキーをより安全にする SameSite 属性について (Same-site Cookies)
・[Laravel6.x]SameSite属性の設定

flexbox内で画像が勝手に縮小される

flexboxを使って要素を横並びにした際に、画像サイズが自動で縮小されてしまう問題が発生。

完全に僕のflexboxに対する理解が不十分でした笑

文章が長いと、flexコンテナの中に画像・テキストが収まり切らず、自動で画像が縮小されます。

まさしくこれが原因でしたね。

aos.jsでアニメーションをつけた要素の位置がズレた

aos.jsは要素をふわっと表示させたい時に役立つjavascriptライブラリですが、今回実装時にある問題が発生しました。

このようにスマホ画面では、縦書きテキストがちょうど画面の中央に来るように、

.p-pv__lead{
position:absolute;
top:50%;
left:50%;
transform:transition(-50% , -50%）;
}

と記述したのですが、アニメーションを実装した瞬間、テキストがズレてしまいました。

おそらく、aos.jsの「fade」機能では「transform」プロパティを使用しているので、バッティングしてしまったのだと。

解決方法を調べましたが、全く見つからず、仕方なくtransformを使わずに天地左右配置することに。

aos.jsを使いたい要素には「transformプロパティ」は使えないんですかね？

aos.jsでアニメーションをつけたことにより、画面の最大幅が変化

同じく、aos.js関連の問題ですが、要素を画面の外（左・右側）からフェードインさせたところ、デバイスの最大幅が変化してしまいました。

画面の右側に余計な余白が生まれ、横スクロールできる状態に。

フェードインが終了すれば余白はなくなりますが、どうも気持ち悪いですよね。

この問題についても解決法が見つからず、いまだに困ってます、、（誰か助けてください。）

画像の高さ調整に「%」を使うと高さが0に

画像の高さって、「%」指定すれば、親要素の幅に応じて自動で変化してくれるよね？

という甘い考えをしていました。

「%」で指定することはできません。一応「vw」ならできますが、1920pxなどの大画面ではとんでもなく高さが伸びてしまうので、おすすめではないですね。

じゃあどうするのか？

上記で書いた「padding-topで要素の比率を保持しつつサイズを可変させる」の方法でやればOKです。

サーバーにファイルをアップロードしたのに、ページが表示されなかった

ポートフォリオ用のフォルダに各種ファイルをアップロードしたのに、403ページが表示される問題が発生。

アップロードしたフォルダ名は「ishii-kadan」で、その直下には「html」「css」「js」フォルダが入っていました。

「html」フォルダの中に各ページのhtmlファイルが入ってたので、うまく表示されなかったというわけですね。

これは盲点でした。

今回できなかったこと

今回できなかったことを羅列します。

まとめ

中級Ex編は実務レベルのコーディングとのことで、正直言ってめちゃくちゃ苦戦しました。

ただ、自分の苦手な点や知識不足が明確になったので、取り組んでよかったなって思ってます！

ここからは「PHP・Wordpressの学習」＋「コーディング課題上級編」に取り組んでいきます。

長々と書いてしまったので、今回はこの辺で。

最後まで読んでくださりありがとうございました。