date_range
2025/06/06
先を見通したHTML
date_range
2024/05/16
エンジニアインターン
こんにちは、WEBプログラマーコースの池田駿です。
今日は昨日作ったサイトに対し、ブラウザの幅を変えた
ときにも対応できるような調整とホバーの実装をしました。
昨日は一旦一定の幅で完成させて、明日ちょっといじるだけかな～
と、昨日の私は思っていましたがそんなことはなくて、
CSSだけでなくHTMLコードも書き直しました。
というのも昨日は一定のブラウザの幅に対して手作業で変化を見ながら
CSSを書いていたので、幅が変わるとサイトが途端にぐしゃっとなってしまいました。
HTMLのほうも適切にクラスを配置できていたとはいえず、何度も組み直しました。
さて、ここからどんな教訓が得られるでしょうか。
HTMLやCSSに限らず、「先を見通すこと」の大切さです。
昨日は「困難を分割せよ」という記事を書きましたが、
分割したからと言って全体の目的や全体像がまったく見えていなくて
よいわけではありません。
あくまで最終目標を忘れずに、分割するときに「形だけ」ではなく
きちんと最終目標につながる道として分割することが大切だと学びました。
-------------------------------------------------------------------------------------------------
池田駿の紹介ページ
＊コメント＊
NEW
-
-
date_range 2025/06/06
【長期インターン】HTML...
-
date_range 2025/06/06
【長期インターン】大学...
-
date_range 2025/06/05
【長期インターン】本日...
-
date_range 2025/06/05
【長期インターン】WEB...
＊COMMENT＊
下川 春樹
＊コメント＊
コード書いて色んな幅で確認する時は、拡張機能のResponsive viewer 入れておくとめちゃ便利ですよ！
制作ではよく見る画面幅を7つ登録していて、それが1つの画面で見れるので崩れなどがあっと言う間に見つかります。
お試しあれー٩( 'ω' )و
＊コメント＊
宮城 わか
＊コメント＊
私たちも制作後に一つ一つ確認していたら二度手間なので、拡張機能で一気に確認し修正するようにしています。今年の最新ブレークポイントを調べておくのも一つの手かと思います。
＊コメント＊
岡田 のりこ
＊コメント＊
目の前の見た目調整だけでなく、
全体像を把握してから分割が大事ですね。
青山さんのお話にもありましたが
仕事の細分化を意識していきたいと思います！
＊コメント＊
井坂 かなこ
＊コメント＊
＊コメント＊
則岡 えり
＊コメント＊
私もよく、あとからHTML書き直したり、調整で時間がかかってしまいます。
出来上がりをイメージして始めるのが大切ですね。
お互いがんばりましょう！
＊コメント＊
石川 航
＊コメント＊
スマホやタブレットは機種によって幅が違うので
あらゆる幅でも崩れないようにする必要があります
スマホやタブレット表示用のCSSは固定値じゃなくて%指定やvw指定を使うのがオススメです
＊コメント＊
吉村 せいこ
＊コメント＊
先を見越す事が大切ですね。
＊コメント＊