先を見通したHTML

date_range 2024/05/16
エンジニアインターン
池田 駿
_11acdaa1-a8aa-40ee-af04-d53666d8a8d3

こんにちは、WEBプログラマーコースの池田駿です。

今日は昨日作ったサイトに対し、ブラウザの幅を変えた

ときにも対応できるような調整とホバーの実装をしました。

昨日は一旦一定の幅で完成させて、明日ちょっといじるだけかな~

と、昨日の私は思っていましたがそんなことはなくて、

CSSだけでなくHTMLコードも書き直しました。

というのも昨日は一定のブラウザの幅に対して手作業で変化を見ながら

CSSを書いていたので、幅が変わるとサイトが途端にぐしゃっとなってしまいました。

HTMLのほうも適切にクラスを配置できていたとはいえず、何度も組み直しました。

さて、ここからどんな教訓が得られるでしょうか。

HTMLやCSSに限らず、「先を見通すこと」の大切さです。

昨日は「困難を分割せよ」という記事を書きましたが、

分割したからと言って全体の目的や全体像がまったく見えていなくて

よいわけではありません。

あくまで最終目標を忘れずに、分割するときに「形だけ」ではなく

きちんと最終目標につながる道として分割することが大切だと学びました。


-------------------------------------------------------------------------------------------------

池田駿の紹介ページ

https://guardian.jpn.com/member/shun_ikeda/

*COMMENT*

  • 大橋 秀一郎

    大橋 秀一郎

    更新日:2024-05-16 18:05

    *コメント*

    大きな問題を大きいまま考えても埒があかない場合は、シンプルな問題になるまで分割してみることは大事ですよね。それに気づけているだけでも素晴らしいと思いますよ!

    *コメント*

  • 下川 春樹

    下川 春樹

    更新日:2024-05-16 21:09

    *コメント*

    お疲れ様です。
    コード書いて色んな幅で確認する時は、拡張機能のResponsive viewer 入れておくとめちゃ便利ですよ!
    制作ではよく見る画面幅を7つ登録していて、それが1つの画面で見れるので崩れなどがあっと言う間に見つかります。
    お試しあれー٩( 'ω' )و

    *コメント*

  • 水落 えり

    水落 えり

    更新日:2024-05-16 23:24

    *コメント*

    駿くん、最終的な目標を見失わずに作業を進めることはどの業務にも言えることですね!本当に大切です。たとえタスクを細かく分割していても、全体像を常に意識しておかないと、どこかで方向性を見失ってしまう可能性がありますね。

    今回の経験で、作業を効率的に進めるには、細かいところだけでなく、大きな視点で全体を見渡す力が不可欠であると理解できたようですね。この教訓を活かし、今後はより先を見通した設計ができるようになりますね✨

    一歩一歩着実に成長していく姿勢は素晴らしいです。これからも目標を明確に持ち、前に進み続けてください。頑張ってくださいね!!

    *コメント*

  • 宮城 わか

    宮城 わか

    更新日:2024-05-17 08:36

    *コメント*

    幅を変えると崩れる!はよく起こることですよね。
    私たちも制作後に一つ一つ確認していたら二度手間なので、拡張機能で一気に確認し修正するようにしています。今年の最新ブレークポイントを調べておくのも一つの手かと思います。

    *コメント*

  • 岡田 のりこ

    岡田 のりこ

    更新日:2024-05-17 09:39

    *コメント*

    幅が変わると崩れることはよくありますよね。。
    目の前の見た目調整だけでなく、
    全体像を把握してから分割が大事ですね。
    青山さんのお話にもありましたが
    仕事の細分化を意識していきたいと思います!

    *コメント*

  • 井坂 かなこ

    井坂 かなこ

    更新日:2024-05-17 13:33

    *コメント*

    全ての歯車が噛み合うことでページを作っているということですよね!自分の中では、納得ができても他の方に見て頂くと落ち度があるということが多々あります。難しいところではありますが、多くの方と協力して頑張っていくことが必要ですね!

    *コメント*

  • 則岡 えり

    則岡 えり

    更新日:2024-05-18 09:33

    *コメント*

    お疲れ様です。
    私もよく、あとからHTML書き直したり、調整で時間がかかってしまいます。
    出来上がりをイメージして始めるのが大切ですね。
    お互いがんばりましょう!

    *コメント*

  • 石川 航

    石川 航

    更新日:2024-05-18 11:40

    *コメント*

    お疲れ様です
    スマホやタブレットは機種によって幅が違うので
    あらゆる幅でも崩れないようにする必要があります
    スマホやタブレット表示用のCSSは固定値じゃなくて%指定やvw指定を使うのがオススメです

    *コメント*

  • 吉村 せいこ

    吉村 せいこ

    更新日:2024-05-19 07:06

    *コメント*

    自分はまだ最近やっと簡単な構築を少しするようになったとこで、幅を変えると崩れることよくあります。
    先を見越す事が大切ですね。

    *コメント*

  • 渡邊 ひろみ

    渡邊 ひろみ

    更新日:2024-05-20 10:13

    *コメント*

    目を引く海賊のアイキャッチは、先を見通している事を現わしているのですね!
    先を見通すのって難しいです。何事も鍛錬、失敗して反省し次に生かす、を繰り返すことですね。
    お互い頑張りましょう☆彡

    *コメント*

*コメント*

*ログイン*

メールアドレス
パスワード

NEW