【フリーランス】リモートに強いエージェント5社
10万円給付金で始められる無料プログラミングスクール5つ(就職可能)
50,000円がもらえる!フリーランスエージェントの紹介キャンペーン

【駆け出しエンジニアへ】未経験でもこれは覚えて入社しろ10のHTML

Web転職する

先日下記ツイートをしました。

 

【未経験でもこれは覚えて入社しろ】のHTMLをツイートしましたので補足と解説を書いていきます。

 

未経験や駆け出しのエンジニア、コーダーの方にとって有益になるように書いていきますので、宜しければ読み進めください。

 

また、コーダー以外でもWebデザイナーの方や個人でサービスを作るバックエンドの方にもおすすめな内容です!

 

では早速一つ目から補足します。

①a要素とbutton要素の使い分け

 

①a要素とbutton要素の使い分け

a要素はリンク、button要素は何らかのアクションが発動すると覚えれば使い分けはokです。見た目がボタンっぽくても機能で見極めましょう。ちなみにbuttonの初期値はsubmitなので必ずtype属性付与しましょう。

 

a要素とbutton要素がなぜわかりにくいかというと、見た目に騙されそうになるのとJSの機能としての要素選びに迷うという2点があると思います。

 

詳細は下記自分の技術ブログに書いてあるのですが、引用して簡潔にまとめます。

404 NOT FOUND | frontendmemo
JavaScript、Vue.js

見た目に騙されそうになる

例えばLPのフォームページにリンクするプルンプルンしてるボタンはa要素なわけでです。
そしてその後フォームを入力してから押すボタンはbutton要素です。

大事なのは見た目ではなく、セマンティクス(意味)だということを覚えましょう。

 

JSの機能の発火に使う

 

JSの機能でリンクやボタンをa要素かbutton要素にするか迷うかもしれません。

昨日の一覧を挙げましたので下記参照ください。

 

JSの機能でa要素をボタンにするべき

  • スムーススクロール
  • タブパネル
  • モーダルウィンドウ
  • メガドロップダウン

JSの機能でbutton要素をボタンにするべき

  • スマホメニュー
  • カルーセルのナビ
  • トグル
  • アコーディオンパネル
  • ツールチップ

 

②em要素とstrong要素の使い分け

 

②em要素とstrong要素の使い分け

どちらも強調ではあるのですが、その中でもstrongは重要性、緊急性を意味付けします。例えばformの必須など。emは文中のどこを強調したいか。例えば価格の数値部分のみemにするなどがよくある例です。

 

こちらは上記の通りです。

 

他にはフォームのエラー文言はstrongなど割とstrongの方が使い所は決まり切ってるイメージです。

ちなみに似たような要素でb要素もあるのですが、b要素はセマンティクス(意味付け)されない要素なのでemにもstrongにも当てはまらない最終手段で使うようにしましょう。

 

③dl要素

 

 

③dl要素

dl要素は割とくせ者でdtを見出しっぽくしてしまいがちなんですがあくまでddを説明するためのテキストで、さらにリストになってると尚良い使い方です。

また、ulはliしか直下に置けないですが、dlはdiv置けるので、横並びにする場合重宝しますよ。

 

こちらcodepenで実装しました。

dt、ddを横並びにする際、floatを使うしかありませんでしたが、divを親にすることでflexを親に付与すれば横並びます。

floatは排除です。floatは令和の時代に不要ですよ!

 

See the Pen
Yxxbyz
by funclur (@funclur)
on CodePen.

 

④ol要素

olはulと違って順序を伴うリストで使用しますが、それは番号あるなしに関わらずです。例えばパンクズリストは番号は通常つかないですが、olで組んだ方がセマンティックです。賛否はあるかも。 あとはstepもol使っちゃいましょう。

 

ぱんくずとは下記のような現在地を表すナビゲーションです。

 

例:home>会社概要>沿革

 

つまり上記は下記のような順番になっています。

 

①home>②会社概要>③沿革

 

この場合olを使って組んでしまいましょう。

 

考え方としては

リストであればulかol

〇順番があればol

×数字が付けばol

 

という感じです。

 

また話は変わりますが、パンくずで現在地である沿革をem要素にするのもありです。

 

⑤img要素のalt

 

⑤img要素のalt

alt入れる必要なくても空にしておく必要があります。

alt=”” ないとバリデートエラーになります。

 

× <img src=”hoge/hoge.jpg”>
〇 <img src=”hoge/hoge.jpg” alt=””>

⑥見出しを画像にする場合のalt

⑥見出しを画像にする場合のalt

画像を見出しにした場合altを入れないとバリデートエラーになります。

 

見出しを画像にする場合の例は下記になります。

 

× <h1><img src=”hoge/hoge.jpg”></h1>
〇 <h1><img src=”hoge/hoge.jpg” alt=”見出しを画像にする場合のalt”></h1>
またリンクも同様に画像だった場合、altは必ずいれるようにしましょう。

⑦label要素

⑦label要素

labelはフォームパーツと関連付けてください。
つまり、名前というラベルをクリックしたらフォーカスが当たるようにしてください

方法は2種類あります。2つとも覚えましょう!

See the Pen
bXMZBm
by funclur (@funclur)
on CodePen.

こちらはどちらも覚える必要があります。

基本的には1つ目のinputをラベルで囲む方法で囲むパターンで良いです。

しかしテーブルなどlabelで囲めないパターンがあるのでその場合、forとidで紐づけます。

ラベル要素を付けた場合、ラベルをクリックするとフォーカスするのでやってみてください。

 

input以外でもselect、textarea、radio、checkbox全て同じ考え方です。

 

⑧colgroup要素

 

⑧colgroup要素

tableはcolgroup要素で列の幅は思い通りです。

 

こちらも意外と知られてないですが、テーブルの幅はcoulgroup要素のcol要素に指定することで幅が決まります。

thやtdに幅を指定する必要はありません。

 

codepenにて実装しました。

 

See the Pen
PMeLyx
by funclur (@funclur)
on CodePen.

⑨統一しよう命名ルール

⑨統一しよう命名ルール

ハイフンあり、ローワーキャメル、0ありなしの連番などは最初に決めましょう。既存サイトの修正であれば命名ルールをきっちり頭に入れましょう。

 

命名ルールは最初の内はいろんなサイトを真似てみることが大事です。

その時も重要なのはルールを統一すること

 

ただ、どうしてもぶれてしまうと思うのでレビューしてもらうと良いです。

 

⑩なくそうスペルミス

⑩なくそうスペルミス

spnaとかクラス名のスペルミスはありがちです。
はじめのうちは急いでコーディングする必要ありません。それより慎重で不安なら英単語合ってるか検索するくらいの人の方がその後伸びます。

 

こちらはその通り、翻訳ツール使いましょう。

自分はchromeのブックマークバーにgoogle翻訳あります。

もちろんアドオンなどでも構いません。

 

 

以上、【駆け出しエンジニアへ】未経験でもこれは覚えて入社しろ10のHTMLの解説でした。

 

もし不明点あればtwitterでDMください。

 

駆け出しの頃は覚えること一杯で大変だと思いますが、焦らず一つずつ覚えれば問題なしです。

 

また、忘れたら「未経験でもこれは覚えて入社しろ10のHTML」で検索したら上位にこの記事があるはず。。なので見返していただけるとありがたいです。

 

では引き続き頑張りましょう!

 

【無料】WebIT系優良就活・転職サイトまとめ
レバテックキャリア
レバテック キャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

Tech Stars Agent

1. エンジニア経験のあるコンサルタントのみ担当!
2. IT・WEB・ゲーム業界特化の専門エージェント
3. 転職だけでなく、独立の支援も行っています
4. エンジニア限定イベントへのご招待も!
厳しい審査を通過した、厳選された求人のみを紹介しているので、
安心して転職を行うことができます。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

Web転職する 未経験でもこれは覚えて入社しろ10のTIPS
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業

Webデザイナー(アルバイト)

Webデザイナー(正社員)

フロントエンドエンジニア(正社員)

フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。

【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshilog

コメント

タイトルとURLをコピーしました