この記事の監修者
独学でコーディングを学習していると、アクセシビリティや命名規則など高度な技術に悩んでどこまで何を意識すれば良いかわからなくて困っていませんか？
実は、この記事で紹介する「未経験からコーディングを10サイトするまでのポイント」を実践すると誰でもコーディングの初学者が理解しておくべき項目がわかるようになります。
この記事を読み終えると、コーディング学習を今後一切悩まずに実施することができます。
未経験からコーディングを10サイトするまでのポイント
結論から述べると下記の5点です。
・命名規則やアクセシビリティなどの高度なことは気にしない
・デザイン通り(カンプ通りに制作する)
・レスポンシブに対応させる(どの画面幅でもレイアウトが崩れない)
・コーディング後にhtmlの入れ子のルールは確認する
・インデントを整える
それぞれ説明していきます。
命名規則やアクセシビリティなどの高度なことは気にしない
命名規則とは
命名規則とは、クラス名やid名に指定する名前に規則を持たせて名前をつけることで、誰が見てもわかりやすくすい規則性を持たせることを意味します。
1人の場合は、自分自身がわかれば良いですが、企業でチームで行う場合は規則を持たせることで効率的にコーディングを行います。
なぜ、初学者は命名規則を気にしなくて良いのか
結論から述べると、「1つのサイトを制作するコーディング速度がとても遅くなり、非効率な学習手順となるから」です。
コーディングは、だいたい10サイトくらい模写やカンプのコーディングを行うと「調べれば何でもコーディングできる」状態になります。(もっと早い人もいます)
まずは、とにかく早く10サイトをコーディングして、なんでもできる状態になってしまった方がフリーランスや転職活動に早く入ることができるのでおすすめです。
「調べれば何でもコーディングできる」状態になった後に、命名規則を意識していくようにしましょう！！
それでも気になっちゃう方へ
それでもクラス名の付け方に悩んで、もやもやしちゃう方がいるかと思うので下記の点だけは守ってクラス名をつけるようにしましょう！
・必ず英語でつける
○ center ×chuo
・単語をつなぐ時は、ハイフンかアンダーバーを使用する
○ text_center , text-center × text.center
・どこのクラス名かすぐにわかる
○ about_text , × text
アクセシビリティとは
アクセシビリティーとは、「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できること」です。
なぜ、初学者はアクセシビリティを気にしなくて良いのか
結論から述べると、命名規則と同様で「1つのサイトを制作するコーディング速度がとても遅くなり、非効率な学習手順となるから」です。
例えば、目の見えない人は、HTMLの内容を機械が読んでウェブサイトから情報を取得します。その際にウェブサイトで使用されている画像は、altの中のテキスト機械が読みます。そのため、しっかりとaltの中には画像を説明する内容を入力することがアクセシビリティを意識すると必要になります。
このようにレイアウトを制作するためのコーディング、以外のことに時間をかけてしまうと、「調べれば何でもコーディングできる」状態になることに時間がかかってしまうので、「調べれば何でもコーディングできる」状態になった後に、アクセシビリティも意識していくようにしましょう！！
それでも気になっちゃう方へ
それでもアクセシビリティに悩んで、もやもやしちゃう方がいるかと思うので下記の点だけは守ってマークアップをするようにしましょう！
・alt属性を入れる。文章的に説明が必要な画像はテキストを記述する（不要な場合は空白(” “)でもOK ）
<img src="./images/img.png" alt="黒い背景の前で左を向いて黒いスーツをきた男性がiphoneを操作している">
デザインカンプ通りに制作する
コーディングの最初のゴールは、デザイナーが制作したデザインと1pxもずらさずにコーディングを完成させることです。
デザイナーの人が強いこだわりを持って妥協せずに制作したデザインをしっかりと完成させるのがコード書く人にとってとても大切なので意識していきましょう！！
1pxもずらさないコーディングの練習方法
1pxもずらさないコーディングを身に着ける方法は、デザインカンプからのコーディングの経験をなんども積むことです！
デザインカンプからコーディングをする
基本的に実際の案件では、photoshopやXD,Figmaなどのデザインカンプからコーディングをしていきます。その本番さながらにデザインカンプからのコーディングを繰り返すことが1pxもずらさないコーディングを身に着ける方法としてとてもおすすめです！
クリスタでは、無料でデザインカンプの配布・コーディング方法の解説を行なっていますので挑戦してみてください！
レスポンシブに対応させる(どの画面幅でもレイアウトが崩れない)
今の世の中には、様々なデバイスが存在しています。そのどれもで綺麗なレイアウトでwebサイトが見れるようにコーディングすることはとても重要となります。
とはいっても最初から全ての画面幅で綺麗にすることの難易度はとても高いので以下の画面幅では、確実に綺麗なレイアウトになっていることを確認するようにしましょう！
1920px以上
1440px/1366px…PC
1024px…iPad Pro
768px…iPad
414px…iPhone/8/7/6 Plus
375px…iPhoneX/8/7/6
320px…iPhone5/SE
コーディング後にhtmlの入れ子のルールは確認する
独学でコーディングの学習をしている時に「自分のコードってこれで良いのかな。。。」と気になる方も多いかと思います。
そのような時には、「htmlのルールだけ守れているか」の確認をしましょう！
コーディングは何を重要視するかによって記述が大きく異なるので、守らないといけないものだけを最初は確認するようにしてください！
htmlの入れ子のルールの確認方法
有名なもので２つあるので、そのどちらかを使用して確認してみてください！
HTML5 入れ子チートシート | 吉川ウェブ
【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
インデントを整える
全ての確認が終えたら最後に行うのが、「インデントの整列」です。
インデントが汚いと自分や他の人もコードを見づらくなってしまい、ストレスになってしまします。とても簡単にできるのでしっかり整えるようにしましょう！
ＨＴＭＬのインデントを整える(VS code)
インデントは、整列したい範囲を選択をしてcommand K+command Fを順番に押すことで自動整列してくれます。
CSSのインデントを整える(VS code)
HTMLと同様にCSSのインデントも、整列したい範囲を選択をしてcommand K+command Fを順番に押すことで自動整列してくれます。
まとめ
未経験からコーディングを10サイトするまでのポイントは、下記になります！
・命名規則やアクセシビリティなどの高度なことは気にしない
・デザイン通り(カンプ通りに制作する)
・レスポンシブに対応させる(どの画面幅でもレイアウトが崩れない)
・コーディング後にhtmlの入れ子のルールは確認する
・インデントを整える
しっかりと意識してコーディングを効率的に学習していきましょう！！
この記事がいいと思ってくださった方は、SNSでのシェアをお願いします！
Youtubeでは動画学習コンテンツを配信しています！
動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。
ぜひチャンネル登録お願いします🙇♂️→クリ★スタYoutubeチャンネル
