HTML&CSSの勉強を始めたい、もしくは始めたばかりという人(自分)向けのリンク集
・なるべく目的別、項目別
・重複あるかも
・良いものがあれば随時更新
#HTML&CSS全般
・サルワカ|HTML&CSS入門Webデザインをイチから学ぼう
・ドットインストール
・Progate
・CODEPREP
#HTMLリファレンス
・MDN
・クロノドライブのHTML辞典(HTML5非対応)
・HTMLタグリファレンス
#CSSセレクタ・プロパティ
・CSSプロパティ一覧
・スタイルシートリファレンス(目的別)
・CSSセレクタのチートシート
#CSS ボックスモデル
・CSSのwidth(幅)とheight(高さ)の指定方法をマスターしよう
・CSSのmarginとは?paddingとは?余白の指定方法まとめ
#CSS display (block、inline、inline-block)
・【CSS】displayの使い方を総まとめ!inlineやblockの違いは?
#CSS FlexBox
・【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。
・これからのCSSレイアウトはFlexboxで決まり!
・日本語対応!CSS Flexboxのチートシートを作ったので配布します
#CSS 疑似要素 (beforeとafter)
・CSSの疑似要素とは?beforeとafterの使い方まとめ
・CSSの content プロパティーを使いこなそう!
#CSS 擬似クラス
・first-of-typeが効かない原因&擬似クラスの詳細度について
#CSS 背景画像
CSSのbackground-imageを使いこなす! 使い方から調整まで徹底解説
超簡単!スクロールしても背景画像を固定させるCSSテクニック
background-sizeの4つの指定の違いと背景画像のCSSでよく使われがちなパターン3つ
背景画像の比率を保ったまま、レスポンシブ対応する
#CSS position (releative、absolute、fixed)
・CSSのpositionを総まとめ!absoluteやfixedの使い方は?
・top,left,right,bottom - 要素の配置位置を指定する
・【CSS】意外と難しい「position」の使い方を詳しく解説してみた
#CSS 中央揃え
・CSSで中央寄せする9つの方法(縦・横にセンタリング)
・レイアウトの基本である.innerの中央寄せを覚えよう!
#CSS 箇条書き(ul, ol)
【CSS】list-style-typeの使い方:箇条書きのマーカー種類を変える
listのstyle指定がイマイチよくわかってなかった件
#CSS vertical-align
・画像(imgタグ)の下にできる隙間を無くす方法
#HTML&CSS フォーム
【初心者向け】0からformがわかる|HTMLでのフォーム作成
inputタグの使い方とtype属性の一覧をサンプル付きで紹介
フォーム周りで覚えておくと便利なCSS Snippets
#CSS 画像や円の上に文字
画像の上におしゃれに文字やボタンをのせる方法(CSS)
CSSで円を描く方法:文字を中央配置するには?枠線のつけ方は?
#CSS アニメーション
##1. 全般
・CSSだけでアニメーションを作成する(CSS Transition・CSS Transform)
##2. CSS keyframesとanimation
・【CSS3】@keyframes と animation 関連のまとめ
・CSSでアニメーション!「animation」と「keyframes」の使い方のおさらい
##3. CSS Transition
・【CSS3】Transition(変化)関連のまとめ
・移ろいゆくアニメーションを表現するCSS「transition」について解説
#CSS Transform
・【CSS3】Transform(変形)関連のまとめ
#CSS 三角形の描写とその応用(吹き出しやリボン)
・CSSだけで三角形を作ろう!その1:borderプロパティの仕組みをマスター
・CSSだけで三角形を作ろう!その2:吹き出しやリボンをデザインする
・CSSのみで三角形を作る方法を解説するよ!|ついでに扇型や吹き出しも作ってみる
・CSSで作る!吹き出しデザインのサンプル19選
#レスポンシブデザイン
・レスポンシブの基本、メディアクエリの書き方
#模写
・Webサイトをコーディング模写するやり方と使用するツール
・初心者向け!HTML/CSSのコーディング手順をイチからしっかりと。
・模写コーディングにおすすめのサイト集めました【理由も解説】
#おまけ
Flat UI Color 2