【150日目】しょーごさん課題「初級EX」中間報告

いやー、難しい!!

しょーごさんがnoteで販売されている、コーディング課題の全部盛りセットを購入。
一つ目の課題である「初級EX」に取り組んでいるのですが、、、めっちゃ難しいです!

知らないことが多過ぎて、調べるのにも実装するのにも時間がかかっております。

一応、納品までの目安として、「実案件だと2日、今回は課題なので20時間」と明示されているので、8月31日から取り掛かり、納期を9月9日の23時!と自分で設定していたのですが、、、、間に合わなかったです、ハイ。

内容を振り返り

今後の参考として、一体、何にどれくらいかかったのか、ここらで一度振り返っておこうと思います。

取り組んだ時間:平日は1日あたり約2~3時間。休日は時間が取れないか、できても1時間程度。
実装開始:2022年8月31日
中間報告:2022年9月9日(13日目、実装開始から、約20時間経過)

1日目:HTMLは完成。CSSは途中まで。
2日目:CSSがほぼ完成。調べないと分からないところは残して、とりあえずフッターまで実装完了。
3日目:文字の下に緑の線を引く、縦書きのタイトルに苦戦。ググりながら実装するが、縦書きはうまくいかない。
4日目:「診療時間」のところを表で記述するも、書きながら意味不明になりパニック。
5日目:縦書きタイトルの位置調整がうまくできない。
6日目:CSSを進めるうちに、HTMLのコードがきれいではないと思い、書き直したい衝動に駆られるが、CSSが崩れそうなので一旦断念。
7日目:command + /でコメントアウトしようとして、別のところを触ってしまい、VSCodeが異様に拡大縮小される。下のサイズに戻すのにてこずり、ほぼ何もできなかった。
8日目:「診療時間」の表が完成。「すべて見る」の横にある黒三角の記述に取り掛かる。
9日目:へんなクラス名の付け直しや、細かい部分の修正。縦書きはやはり位置と大きさがおかしい。
10日目:縦書きタイトルをやっと修正。全体を見渡して出来上がったと思われるので、レスポンシブ対応を開始。

最初の2日くらいで、HTML&CSSはほぼ書き終わったのですが、その後、細かいところを調べながらやるのに、すごく時間がかかりました。

最初の難関、「背景画像の上に、縦書きのタイトルを乗せる」。

まぁこれが、全くできない!

そもそも、ヘッダー直下の画像の挿入がとても苦手なのです。HTLMで記述してimgを挿入する場合と、CSSで背景に画像をし敷いてその上にテキストを乗せる場合の違いすらよくわかっていない・・。

その上、そのテキストが縦書きと来たもんだ。とりあえず、CSSでdivを敷いて、その上にimgを置いてみたのですが、CSSの記述が悪いのか、思ったような大きさにならなかったのです。

そして、imgにposition:relative;を指定し、縦書きのテキストにposition:absolute;を指定して位置決めをしたのですが、それも思った通りにいかない〜。。

あーでもないこーでもないと、位置を動かしたり、記述を変えたりして試すこと2〜3日・・・。画像は、画面幅に応じて伸び縮みするのに、テキスト部分だけが固定されて動かなかったりと、想定外の挙動で、とても時間がかかりました。

実装したものを、私のMacbook Airのフル画面で見るとこう↓なのですが、

少しでも画面幅が小さくなると、こう↓なります。この挙動は普通なのだろうか??改行が変で、タイトルが下にくっついちゃってるんだけど・・・。

「診療時間」の表に苦戦。

しょーごさんが、親切にも「参考サイト」とやらをカンプに記載してくれていたので、まず最初にそちらのサイトもよく観察すれば良かったのですが、「なるべく自分でやるぞ!」と変に意気込んでいたわたしは、そのサイトをあまりよく見ていませんでした。。。

で、表の作成に戸惑って、初めてそのサイトを隅から隅までよく見たわけです。書いてあるやん、全部。。。

同じようなデザインを使ったサイトなので、検証ツールで見てみると、作りがとても参考になりました。最初から見れば良かった・・・。

「表」というとtableしか思いつかなかった私、最初はtableタグを使って記述していたんですね。隙間を空けて縦線を引くために、上の表と下の表を分けて、幅を調節して・・・とやっているうちに訳がわからなくなり、参考サイトを見たら、dl, dt, ddで記述してありました・・。なので、私も作戦変更して同じ形で記述をすることに。paddingやmarginの設定も、とても参考になりました。

調べながらやった部分

正直、一番苦戦したのが、上記の①メインビジュアル+縦書きタイトル②診療時間の表でした。

それ以外に、調べながらやったところは、

①「電話番号」をクリックすると、「発信」できるようになっている記述(これは、しょーごさんから参考サイトが提供されていました)。
②文字の下に、幅と太さを指定して下線を引く。
③「すべて見る」の横に、擬似要素で黒三角形を描く。
④google mapからの地図の埋め込み(やったことあるけど忘れていました)。

と、実に4つだけで、それほど時間はかからなかったです。縦書きタイトルと表にどれだけ時間を費やしたのか・・・。

そして、7日目に沼にハマってしまった「VSCode」のトラブル・・・。画面が異様に拡大縮小されてしまい、にっちもさっちも行かず、かなり時間を取られました。。。結局、設定を元に戻せて良かったけど、このままVSCodeが使えなかったら、かなりの日数大変なことになっていたと思います。「VSCode 拡大 縮小 mac 設定」とか、「設定 元に戻す」とかで検索して、解決方法探しましたが、あまり情報がヒットしませんでした。英語のサイトでググったら出てきたyoutube画像を参考に、設定のところを変えたら、ドツボにはまりました・・・。本当に、元に戻せて良かった〜!

三角形の書き方については、ほ〜!と目から鱗でした。太さのあるborderでwidthとheight を0にすると、黒い四角形ができる。それを四分割して、不要なところを透明にしたら、残ったところが黒い三角形!誰が考えたんだ!?こんな小技!他にもCSS だけで色んなアニメーションとかもできるんですね。

ポートフォリをで高い技術を証明するために、CSSやJavaScriptなどで凄いアニメーションを入れているサイトがたくさんありますが、個人的には、アニメーションが多すぎるのは好きじゃないんですよね、実は。表示というか、、見るのに時間がかかるし、目がチカチカするのでw

実は内心そう思っている人はたくさんいるのでは?と思っているので、アニメーションの使い方はどのくらいが適切なのか、その辺りも気にしながら進めたいな、なんて思いました。

自分で設定した納期までに納品できなかったのは、とても悔しいのですが、もうここまで来たら開き直って、あとは丁寧に仕上げたいと思います。

さて、つぎは苦手なレスポンシブ対応に進みます!!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

在宅パートで通訳業務をやっている40代です。👶10yr、歳の差夫婦。Webコーダーとして安定した収入を得るため、日々学習中です。本業やパートと並行してWeb制作学習中の方の参考になればと思い、たまに学習日記をつけています。Web制作に関する情報は、探せばたくさんありますが、いざ同じようにやってみても、「あれ?これはどうすれば良いのかな?」と思うことが多々あります。自分の経験を交えて、役にたった情報などを発信していけたらと思います。

コメント

コメントする