見出し画像

初心者がコーディング勉強するときにこれを読めばとりあえずOKなリスト

制作初心者(素人)を採用して必ず教えるのがコーディング。デザイナー志望でもコーディングの基礎は学んでもらっている。

コーディングで一番品質高いなぁと思った会社さんはこちらのクロノドライブさん。

仕事を何回か依頼したことありますが、対応も良いです。親切丁寧。

クロノドライブさんがコーディングについて分かりやすくまとめてくれているので新人にはとりあえずこれ読んで理解してくださいと伝えてる。

そのリストが以下。

①コーディングの意味・基礎知識

■HTMLコーダーの「仕事」と「義務」
https://html-coding.co.jp/knowhow/about_coder/000001/

■綺麗なコードの書き方
https://html-coding.co.jp/knowhow/tips/000012/

■スタイルプロパティの記述順番ガイドライン
https://html-coding.co.jp/knowhow/tips/000008/

■今さら人に聞けない「idとclassの使い分け」
https://html-coding.co.jp/knowhow/tips/000300/

■新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]
https://html-coding.co.jp/knowhow/tips/naming-rule/

■CSSの優先順位について
https://html-coding.co.jp/knowhow/tips/000227/

■スタイルの優先順位のまとめ ~あなたはスタイルの優先順位について理解できてますか?~
https://html-coding.co.jp/knowhow/tips/000041/

■[HTML]今さら人に聞けない「左・右・中央寄せが出来ない時の対処法」
https://html-coding.co.jp/knowhow/tips/000304/

■dt要素やdd要素を横並びにする
https://html-coding.co.jp/knowhow/tips/000225/

■ブラウザスタイルの初期化
https://html-coding.co.jp/knowhow/tips/000268/

■CSSハック これだけ覚えておけば大丈夫
https://html-coding.co.jp/knowhow/tips/000010/

■コーディングスピードを上げるためにやっていることまとめ
https://html-coding.co.jp/knowhow/tips/000013/

■clearfixを使ってハッピーなコーディングライフを
https://html-coding.co.jp/knowhow/tips/000017/

 

②タグの意味を詳しく覚える<HTML編>

これだけ覚えればOKってわけではないので、業務しながら少しずつ覚える範囲を増やしていきましょう。
https://html-coding.co.jp/annex/dictionary/html/

↑ここから優先度の高いページをピックアップしました。

■<h1>~<h6>
文書中の見出しを設定
https://html-coding.co.jp/annex/dictionary/html/hx/

■<p>
段落の指定
https://html-coding.co.jp/annex/dictionary/html/p/

■<body>
ユーザに見せる(ブラウザに表示される)内容の指定
https://html-coding.co.jp/annex/dictionary/html/body/

■<!-- -->
HTMLソースの中のコメント(注釈)
https://html-coding.co.jp/annex/dictionary/html/html-comment/

■<title>
文書にタイトルをつける
https://html-coding.co.jp/annex/dictionary/html/title/

■<meta>
文書のメタ情報(文書の内容ではなく文書自体についての様々な情報)を指定
https://html-coding.co.jp/annex/dictionary/html/meta/

■<head>
文書自体の設定情報(普通画面上に表示されないもの)の指定
https://html-coding.co.jp/annex/dictionary/html/head/

■<html>
HTMLの文書全体を表す
https://html-coding.co.jp/annex/dictionary/html/html/

■<!DOCTYPE>
HTMLをブラウザにどう解釈させるかの指定
https://html-coding.co.jp/annex/dictionary/html/doctype/

■<ul>
順序(通し番号)なしの箇条書きリスト
https://html-coding.co.jp/annex/dictionary/html/ul/

■<li>
<ul>や<ol>の箇条書きリストの項目を表す
https://html-coding.co.jp/annex/dictionary/html/li/

■<dl>
定義リスト(用語と説明をセットで並べたリスト)
https://html-coding.co.jp/annex/dictionary/html/dl/

■<dt>
定義リスト(用語と説明をセットで並べたリスト)の定義用語部分
https://html-coding.co.jp/annex/dictionary/html/dt/

■<dd>
定義リスト(用語と説明をセットで並べたリスト)の説明部分
https://html-coding.co.jp/annex/dictionary/html/dd/

■<table>
表(テーブル)を作成
https://html-coding.co.jp/annex/dictionary/html/table/

■<tr>
表(テーブル)の行を指定
https://html-coding.co.jp/annex/dictionary/html/tr/

■<th>
表(テーブル)の見出し部分
https://html-coding.co.jp/annex/dictionary/html/th/

■<td>
表(テーブル)のセル内容
https://html-coding.co.jp/annex/dictionary/html/td/

■<a>
アンカー(リンクの出発点/到達点)の設
https://html-coding.co.jp/annex/dictionary/html/a/

■<div>
内容のグループ化
https://html-coding.co.jp/annex/dictionary/html/div/

■<span>
インライン要素をグループ化
https://html-coding.co.jp/annex/dictionary/html/span/

■<iframe>
インラインフレーム(個別にスクロールなどができるページ内の独立した領域)を作成
https://html-coding.co.jp/annex/dictionary/html/iframe/

③タグの意味を詳しく覚える<CSS編>

これだけ覚えればOKってわけではないので、業務しながら少しずつ覚える範囲を増やしていきましょう。
https://html-coding.co.jp/annex/dictionary/css/

↑ここから優先度の高いページをピックアップしました。

■text-align
テキストの水平方向への配置を指定
https://html-coding.co.jp/annex/dictionary/css/text-align/

■text-decoration
テキストの装飾を指定
https://html-coding.co.jp/annex/dictionary/css/text-decoration/

■text-indent
インデント(字下げ)の指定
https://html-coding.co.jp/annex/dictionary/css/text-indent/

■vertical-align
行中のテキストや画像などの内容の、上下方向の揃え位置を指定
https://html-coding.co.jp/annex/dictionary/css/vertical-align/

■list-style
リストのスタイルを一括で指定
https://html-coding.co.jp/annex/dictionary/css/list-style/

■height
要素の高さを指定
https://html-coding.co.jp/annex/dictionary/css/height/

■width
領域の幅を指定
https://html-coding.co.jp/annex/dictionary/css/width/

■max-height
高さの最大値を指定
https://html-coding.co.jp/annex/dictionary/css/max-height/

■max-width
幅の最大値を指定
https://html-coding.co.jp/annex/dictionary/css/max-width/

■min-height
高さの最小値
https://html-coding.co.jp/annex/dictionary/css/min-height/

■min-width
幅の最小値を指定
https://html-coding.co.jp/annex/dictionary/css/min-width/

■margin
上下左右のマージンを一括で指定
https://html-coding.co.jp/annex/dictionary/css/margin/

■padding
上下左右のパディングをまとめて指定
https://html-coding.co.jp/annex/dictionary/css/padding/

■float
フロート(後続する内容の回り込み)を指定
https://html-coding.co.jp/annex/dictionary/css/float/

■display
要素の表示形式を指定
https://html-coding.co.jp/annex/dictionary/css/display/

■clear
floatで設定した回り込み設定を解除
https://html-coding.co.jp/annex/dictionary/css/clear/

■visibility
表示/非表示の切り替え
https://html-coding.co.jp/annex/dictionary/css/visibility/

■z-index
ボックスの重なり順序を指定
https://html-coding.co.jp/annex/dictionary/css/z-index/

■background
背景の指定
https://html-coding.co.jp/annex/dictionary/css/background/

■font-weight
フォントの太さを指定
https://html-coding.co.jp/annex/dictionary/css/font-weight/

■font-style
フォントスタイルを指定
https://html-coding.co.jp/annex/dictionary/css/font-style/

■font-size
フォントサイズを指定
https://html-coding.co.jp/annex/dictionary/css/font-size/

■font-family
フォントファミリーを指定
https://html-coding.co.jp/annex/dictionary/css/font-family/

■font
フォントのスタイルや太さ、サイズなどをまとめて指定
https://html-coding.co.jp/annex/dictionary/css/font-2/

■color
テキストの色を指定
https://html-coding.co.jp/annex/dictionary/css/color/

デザインのまとめリストはこちら


この記事が気に入ったらサポートをしてみませんか?