【デイトラ中級編】最終課題onomichiでのつまずき・改善のポイント

2024年8月から、デイトラでWeb制作コースを学んでいます。

今回は中級最終課題であるonomichiで、私がつまづいたポイントや改善点などのメモを公開したいと思います。

誰得なのかわかりませんが、もし困っている誰かにささったら嬉しいなと。

Prizes

Prizesはonomichiで1番難しいのではないかと私は感じました。ここで初めて挑戦することが多い気が。笑

• 画像はsvgならCSSで背景色を変えることができる
  • svgにclassを付与して、hover時にそのclassから背景色を変更することで可能
• clip-pathのidは重複してはいけない
• figureタグの中にdivを入れてはいけない

Spots

Spotsは今まで作ってきたスライダーとは一味違うスライダーが登場。Aboutで1つ目のスライダーを使っているので、注意しなければならないことがあったんです。

• 2つ目のスライダーを設置するには、Aboutで作ったスライダーとそれぞれ変数などを分けなければならない
• id名や追加class名はそれぞれのセクション名を付けたものに。jsファイルのconst変数名を修正。

Q&A

アコーディオンの開閉はjQueryで書けば簡単だけど、私はJavaScriptに苦手意識があるので、勉強のためにあえてJavaScriptで処理を書いてみました。

dispray gridを用いてgrid-template-rows（列）を0fr→1frに変化させ、transitionでgrid-template-rowsにアニメーションを付けると想定通りの動きになる。

ただ、クローズ時のoverflow:hidden;を効かせるためにdivを1つ追加しなければならない。

参考サイト

  transitionがheightに効かない時の対処法

Contact

Contactはエラーチェックする部分が特に難しかった気がします。

selectタグでアイコン付きのドロップダウンを出す

• background-imageで背景を2つ指定：アイコン画像、背景色グラデーション（px指定）
• repeatやsizeも2つ指定していく
• positionも2つ指定：rightやcenterなど使える（横位置、縦位置）：辺からの位置指定にすると（縦位置、横位置）になるらしい：background-position: center right 10px, right center;

JavaScript

• submitイベントはformに対してのみ発火する
• submitイベントはエラーチェック完了後のみ発火する

モーダル

z-indexの重なりに注意。モーダルはheaderタグから出してあげないと効かない。

階層別のクラス参照

同じ階層なら「&.クラス名{}」

親の階層を参照するなら「.クラス名 & {}」

アップロード時のサブディレ作成

エックスサーバーのサーバーパネル＞ドメイン＞サブドメイン設定にて持っているドメインに、サブドメインまたはサブディレクトリを追加することができる。（今回はサブディレクトリにした）

エックスサーバーでのBasic認証

エックスサーバーのサーバーパネル＞ホームページ＞アクセス制限

認証をかけたい対象のディレクトリに対してONの設定をし、ユーザーとパスワードを設定する。

デイトラWeb制作中級最終課題を終えてみて

最終課題というだけあって、今までとは段違いにそれぞれ難しい内容でした。

コードはこの記事にはあえて書きません。調べて試して試行錯誤の末に動いた時の感動を、皆さんにも味わってほしいから！

中級ではその苦労をしっかり体験して、上級へ進むことをおすすめします。

実はもっとつまづいたポイントがあったかと思うのですが、メモとして書き始めたのがPrizesからだったのでこの量になってしまいました。