HTML&CSS圧倒的初心者向けリンク集　"随時更新"

HTML&CSSの勉強を始めたい、もしくは始めたばかりという人(自分)向けのリンク集
・なるべく目的別、項目別
・重複あるかも
・良いものがあれば随時更新

#HTML&CSS全般
・[サルワカ｜HTML&CSS入門Webデザインをイチから学ぼう](https://saruwakakun.com/html-css/basic)
・[ドットインストール](https://dotinstall.com/)
・[Progate](https://prog-8.com/languages/html)
・[CODEPREP](https://codeprep.jp/)

#HTMLリファレンス
・[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Reference)
・[クロノドライブのHTML辞典(HTML5非対応)](https://html-coding.co.jp/annex/dictionary/html/)
・[HTMLタグリファレンス](http://www.htmq.com/)

#CSSセレクタ・プロパティ
・[CSSプロパティ一覧](https://weblan3.com/css/css_property)
・[スタイルシートリファレンス（目的別）](http://www.htmq.com/style/)
・[CSSセレクタのチートシート](https://webliker.info/css-selector-cheat-sheet/)

#CSS　ボックスモデル
・[CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう](https://saruwakakun.com/html-css/basic/width-height)
・[CSSのmarginとは？paddingとは？余白の指定方法まとめ](https://saruwakakun.com/html-css/basic/margin-padding)
#CSS display (block、inline、inline-block)
・[【CSS】displayの使い方を総まとめ！inlineやblockの違いは？](https://saruwakakun.com/html-css/basic/display)

#CSS FlexBox
・[【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。](https://www.plusdesign.co.jp/blog/?p=8747)
・[これからのCSSレイアウトはFlexboxで決まり！](https://www.webcreatorbox.com/tech/flexbox)
・[日本語対応！CSS Flexboxのチートシートを作ったので配布します](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

#CSS　疑似要素 (beforeとafter)
・[CSSの疑似要素とは？beforeとafterの使い方まとめ](https://saruwakakun.com/html-css/basic/before-after)
・[CSSの content プロパティーを使いこなそう！](https://www.webcreatorbox.com/tech/content-property)

#CSS　擬似クラス
・[first-of-typeが効かない原因&擬似クラスの詳細度について](https://teratail.com/questions/185872)

#CSS　背景画像
[CSSのbackground-imageを使いこなす! 使い方から調整まで徹底解説](https://www.sejuku.net/blog/55771)
[超簡単！スクロールしても背景画像を固定させるCSSテクニック](https://takafumimegumi.com/blog/background-attachment)
[background-sizeの４つの指定の違いと背景画像のCSSでよく使われがちなパターン３つ](https://haniwaman.com/background/)
[背景画像の比率を保ったまま、レスポンシブ対応する](https://taneppa.net/responsive_background_image/)

#CSS position (releative、absolute、fixed)
・[CSSのpositionを総まとめ！absoluteやfixedの使い方は？](https://saruwakakun.com/html-css/basic/relative-absolute-fixed)
・[top，left，right，bottom - 要素の配置位置を指定する](https://tech.nikkeibp.co.jp/it/article/Reference/20091124/340985/)
・[【CSS】意外と難しい「position」の使い方を詳しく解説してみた](http://ideahacker.net/2014/02/18/7744/)

#CSS 中央揃え
・[CSSで中央寄せする9つの方法（縦・横にセンタリング）](https://saruwakakun.com/html-css/basic/centering)
・[レイアウトの基本である.innerの中央寄せを覚えよう！](https://haniwaman.com/inner/)

#CSS 箇条書き(ul, ol)
[【CSS】list-style-typeの使い方：箇条書きのマーカー種類を変える](https://saruwakakun.com/html-css/reference/list-style-type)
[listのstyle指定がイマイチよくわかってなかった件](https://note.com/yukianemone07/n/nfa8be1ce168d)

#CSS vertical-align
・[画像（imgタグ）の下にできる隙間を無くす方法](https://technical-creator.com/img-tag-vertical-align/)

#HTML＆CSS フォーム
[【初心者向け】0からformがわかる｜HTMLでのフォーム作成](https://webliker.info/79009/)
[inputタグの使い方とtype属性の一覧をサンプル付きで紹介](https://webliker.info/39533/)
[フォーム周りで覚えておくと便利なCSS Snippets](https://www.nxworld.net/tips/15-useful-css-snippets-in-form-style.html)

#CSS　画像や円の上に文字
[画像の上におしゃれに文字やボタンをのせる方法（CSS）](https://saruwakakun.com/html-css/reference/image-text)
[CSSで円を描く方法：文字を中央配置するには？枠線のつけ方は？](https://saruwakakun.com/html-css/basic/circle)

#CSS　アニメーション
##1. 全般
・[CSSだけでアニメーションを作成する（CSS Transition・CSS Transform）](https://chot.design/css-design-technic/bb257db08896/)

##2. CSS keyframesとanimation
・[【CSS3】@keyframes と animation 関連のまとめ](https://qiita.com/7968/items/1d999354e00db53bcbd8)
・[CSSでアニメーション！「animation」と「keyframes」の使い方のおさらい](https://haniwaman.com/css-animation/)

##3. CSS Transition
・[【CSS3】Transition（変化）関連のまとめ](https://qiita.com/7968/items/812d6a21fc4dd9ae9c75)
・[移ろいゆくアニメーションを表現するCSS「transition」について解説](https://haniwaman.com/css-transition/)

#CSS Transform
・[【CSS3】Transform（変形）関連のまとめ](https://qiita.com/7968/items/eddfeb4b424d7c2d2d34)

#CSS　三角形の描写とその応用(吹き出しやリボン)
・[CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター](https://www.granfairs.com/blog/staff/make-triangle-with-css)
・[CSSだけで三角形を作ろう！その2：吹き出しやリボンをデザインする](https://www.granfairs.com/blog/staff/use-triangle-with-css)
・[CSSのみで三角形を作る方法を解説するよ！｜ついでに扇型や吹き出しも作ってみる](http://ideahacker.net/2013/07/26/5962/)
・[CSSで作る！吹き出しデザインのサンプル19選](https://saruwakakun.com/html-css/reference/speech-bubble)

#レスポンシブデザイン
・[レスポンシブの基本、メディアクエリの書き方](https://sole-color-blog.com/blog/71/)

#模写
・[Webサイトをコーディング模写するやり方と使用するツール](https://haniwaman.com/replication-coding/#)
・[初心者向け！HTML/CSSのコーディング手順をイチからしっかりと。](https://www.webcreatorbox.com/tech/html-css-coding-steps)
・[模写コーディングにおすすめのサイト集めました【理由も解説】](https://kutarosan.com/replication-cording-site/)

#おまけ
[Flat UI Color 2](https://flatuicolors.com/)

https://9elements.com/bem-cheat-sheet/