書いてはいけないHTML、CSS

date_range 2024/05/29
エンジニアインターン
池田 駿
_94fb4695-74a7-4255-a69b-319b9a1acfd1

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

一つのWEBページを模写して提出しては新たなフィードバックをもらう、

最近はそういった感じです。

最初は何が何だか分からなかったHTMLやCSSの書き方が最近徐々に分かってきました。

書いてはいけないHTML

HTMLは基本どんな風に書いてもサイトの訪問者には美しく見せられます。

しかし、HTMLで心掛けるべき相手はお客様というよりむしろロボットとプログラマーです。

ブラウザ内にはクローラーというロボットが巡回していて、そいつがサイトの内容を正しく理解してくれると関連度の高い検索に対して適切に表示されるようになります。

またコードを読む他の開発者(または将来の自分自身)がページの構造と内容を理解しやすくなります。そして修正や拡張が必要な際に、適切なタグが使われているとどこを修正すべきかがすぐにわかります。

つまり書いてはいけないのは、「デザインのためだけのHTML」。何を書いているのか、どういう構造なのかを伝えないといけないわけです。

書いてはいけないCSS

書いてはいけないのはpositionなどで具体的な数値を与えて無理矢理見た目を整えたCSSコードです。

なぜいけないのかというと、そういったコードは環境が変わったとき(ほかの人がほかの人のPCやスマホで見るとき)に崩れやすいからです。


全てを論理的に、完璧にやるのは難しいかもしれませんが、できるだけ「書かれるべくして書かれたコード」を目指していきたいですね!

*COMMENT*

  • 菅谷 たかの

    菅谷 たかの

    更新日:2024-05-29 17:57

    *コメント*

    最適なコードは何なのかを考えながら記述する為には、情報収集や経験が必要ですね。HTMLやCSSの本を買っても、WEB業界はその内容がすぐに古くなってしますので、自身の知識やアップデートも大事ですね。

    *コメント*

  • 髙松 みすず

    髙松 みすず

    更新日:2024-05-29 18:00

    *コメント*

    コーディングを勉強中なのですごく参考になりました!
    position安易に使いがちなので、気を付けます!

    *コメント*

  • 永野 智成

    永野 智成

    更新日:2024-05-29 18:07

    *コメント*

    投稿お疲れ様です。
    「HTMLで心掛けるべき相手はお客様というよりむしろロボットとプログラマー」
    職業訓練校時代に知りたかったです笑
    次回の投稿も楽しみにしてます!

    *コメント*

  • 高橋 力都

    高橋 力都

    更新日:2024-05-29 21:50

    *コメント*

    お疲れ様です。

    『書いてはいけないCSS』、
    HTML/CSSの初学者である自分には、グサッとくる内容でした笑
    職業訓練校に通っていた際、下手に絶対単位で数値指定をして、
    レスポンシブ対応時に手間がかかったことが思い出されます。

    *コメント*

  • 松村 晶

    松村 晶

    更新日:2024-05-29 22:38

    *コメント*

    いずれAIが書いてAIが保守するようになると、
    「AIが保守しやすい」設計をする必要が出てくるのかもしれませんね〜

    *コメント*

  • 水落 えり

    水落 えり

    更新日:2024-05-29 23:25

    *コメント*

    駿くん、WEBページ制作の勉強を着実に進められていて素晴らしいですね。HTMLとCSSの書き方が理解できるようになってきたことは大きな前進です。

    HTMLとCSSの適切な記述方法についてのお話は大変勉強になります!!

    「書かれるべくして書かれたコード」を目指すという言葉が印象的です。コードを書くときは、単に見た目を整えるだけでなく、意味や役割、構造を考慮することが肝心なのですね。この点を意識することで、質の高いウェブサイトが作れるようになるんですね。

    これからも着実に学習を重ね、素晴らしいスキルを身に付けていってください。頑張っている姿に拍手を送ります👏

    *コメント*

  • 寺田 ゆり

    寺田 ゆり

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

    *コメント*

    お疲れ様です。
    業務をしていてもコーディングが上手な方が作ったパーツの構造は分かりやすく意図がつかみやすいです。私もそうなれるよう頑張りたいと思います…!

    *コメント*

  • 恩田 かおり

    恩田 かおり

    更新日:2024-05-30 08:04

    *コメント*

    クローラーやプログラマーにも優しいコードを書く意識、大切ですね!
    勉強になりました。

    *コメント*

  • 野村 健人

    野村 健人

    更新日:2024-05-30 08:08

    *コメント*

    WEBサイト制作ではある1つのパーツをベースにして、新たなパーツを作成するということがよくあります。
    その際に自分以外の人でも、内容がわかりやすく、編集が容易であることは大切ですよね。デザイン性が良いことももちろん重要なので、どちらも担保できるように鍛錬を重ねていきましょう!

    *コメント*

  • 水野 健太

    水野 健太

    更新日:2024-05-30 09:37

    *コメント*

    保守しやすいコードを意識し制作するよう取り組んでいますが、ほんとにデザインとの両立が難しく感じます。
    使い方や扱われ方など考えて制作する必要がありますね!自分も頑張ります!

    *コメント*

  • 岡田 のりこ

    岡田 のりこ

    更新日:2024-05-30 09:44

    *コメント*

    ロボットとプログラマー向けにHTMLを書く、
    というのがまだまだ自分には足りていないと思います。
    「デザインのためだけのHTML」にならぬよう、
    誰が見ても分かりやすいコードが書けるスキルを身につけたいと思います!

    *コメント*

  • 梅村 みづき

    梅村 みづき

    更新日:2024-05-30 10:17

    *コメント*

    適切なタグを選ぶとコード自体がキレイになりますし、可視化が良くなるので修正や拡張の際にとても助かりますね!
    気を付けるべきことはたくさんありますが、思うように実装ができたときの達成感は成長意欲にも繋がると思うのでお互い知識のアップデートを楽しみましょう!

    *コメント*

  • 石川 航

    石川 航

    更新日:2024-06-05 23:12

    *コメント*

    お疲れ様です
    webサイトは見栄えだけ良くしても検索エンジンの目はごまかせません

    検索エンジンのためだけでなく、お客様を勝たせるWebサイトにも繋がっていくので、
    それぞれのHTMLタグの意味を理解して、適切な構成で構築していきましょう

    *コメント*

*コメント*

*ログイン*

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