どうも7noteです。HTML・CSS初心者のためのお役立ち記事１００本のまとめ
HTML・CSS初心者向けに毎日投稿を続けて、100本更新達成しました！
私の記事を読んでくださった方、ありがとうございます。
自分でもなんの記事書いたか管理が大変だったので、「いっそQiitaにまとめ記事として投稿してしまおう」と思ったのが今回の記事になります。
始めたての頃は1人で多くの問題にぶち当たっていかなければいけないので、そんな人のサポートが少しでもできれば幸いです。
また記事が溜まったらここにも追加する予定です！
今後も毎日更新していきますので、ぜひ見ていってください。
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
HTML・CSSの基本
HTMLの基本
・ 【初心者でもわかる】olとulの違いと使い分けの仕方
・ WEBサイトで大切な3つのパスの違いについて解説（絶対パス、相対パス、ルートパス）
・ 【初心者向けじゃない記事】ブロック要素でもインライン要素でもなくセクショニングルート要素
・ 【初心者でもわかる】HTML（HTML5）で閉じタグがいらない要素の一覧
・ 【初心者でもわかる】親子関係が予め決まっている要素一覧
・ 【初心者向け】検証：HTMLのブロック要素に効かないCSSはあるのか
・ 【初心者でもわかる】フォーム作りに必須！inputとlabelを紐づける方法
・ 【初心者でもわかる】tableのtr要素に効かないCSS
CSSの基本
・ 【初心者でもわかる】clearfixって結局何してるの？
・ 【初心者でもわかる】CSSのセレクタ3種類の書き方（隣接セレクタ・間接セレクタ・直下セレクタ）
・ 【初心者でもわかる】cssでよく使われる単位は「px, %, vw, vh」のこの4種類だけ！
・ 【初心者でもわかる】font-familyの正しいつけ方・ツールも紹介（2020年 秋版）
・ 【初心者でもわかる】テキストや文字に影を入れる方法（サンプルコード付き）
・ 【初心者でもわかる】:hoverとcursor: pointer;でボタンのホバー時の動きをいれる方法
・ 【初心者でもわかる】ネガティブマージンの使い方
・ 【初心者でもわかる】インライン要素に指定できないcss
・ 【初心者でもわかる】marginとpaddingの違い・使い分け方
・ 【初心者でもわかる】一部だけ角丸をつける方法（border-radius）
・ 【初心者でも分かる】CSSを書く場所は3箇所ある
・ 【初心者でもわかる】CSSで背景画像やグラデーションを2重や3重につける方法
・ 【初心者でもわかる】cssで文字を等間隔（均等割り付け）にしたり、数行の文章の右端がキッチリ揃う方法
・ 【初心者でもわかる】文字をグラデーションにする方法
・ 【初心者でもわかる】「display:inline-block」の使い分け方はこうだ！！
・ 【初心者でもわかる】classにできなくて、idならできること3つ
問題解決
・ 【初心者でもわかる】インライン要素の近くに謎の空白（スペース）ができる原因
・ 【初心者向け】marginが効かない時の理由と対処法・対策
・ 【初心者でもわかる】z-indexが効かない時に確認すること
・ 【初心者でもわかる】疑似要素が表示されない時に確認する7つの事 ＆ 確認方法
・ 【初心者でもわかる】疑似要素にも下線がついてしまう時に下線を消す2つの方法
tips（お役立ち・豆知識系）
大きいパーツ（ヘッダーとかテーブルとかボタンとか）作成
・ 【初心者でもわかる】HTMLとCSSだけで上部固定ヘッダーを作る方法（position: fixed;）
・ 【初心者でも分かる】定義リスト（dl）を使って、tableみたいな表組みデザインを作る方法（レスポンシブ対応）
・ 【初心者でもわかる】2カラム、3カラム、4カラム、5カラム以上を作る方法
・ tableを使わず、縦並びの表組みを作る。ついでにレスポンシブにも対応させる
・ 【初心者でもわかる】cssだけでスライドショー風の横スクロールできるカルーセルの作り方
・ 【初心者でもわかる】画像の上に半透明の背景と文字を乗せる方法
・ 【初心者でもわかる】hover時に、画像の上に半透明の背景と文字を乗せる方法
・ 【初心者でもわかる】ふちに模様がついてるデザインの時、模様の大きさをキープしたまま可変に対応させる方法
・ 【初心者でもわかる】CSSだけ。カーソルを載せたら補足説明のバルーンポップアップを出す方法
小さいパーツ（矢印とか三角）作成
・ 【初心者でもわかる】html・cssで作る、簡単な三角形の作り方3選。
・ 【初心者でもわかる】HTML・CSSで「 >（逆くの字矢印）」の5つの作り方
・ 【初心者でもわかる】CSSだけで6角形を作る方法
・ 【初心者でもわかる】CSSだけで8角形を作る方法
・ 【初心者でもわかる】簡単！ラベルデザインの作り方
・ 【初心者でもわかる】HTML・CSSで再現できるいろいろな矢印
CSSのちょいテク
・ ≪CSSデザイン案≫途中で色の変わる下線のもうワンランク上の下線「文字数分だけ色が変わる下線」
・ 【初心者でもわかる】CSSでボタン風のチェックボックス作る方法
・ 【初心者でもわかる】一部が欠けたborder（枠）の作り方
・ 【初心者でもわかる】CSSだけでアイコン画像の色を変える方法
・ 【初心者でもわかる】flexboxのjustify-content: space-between;で最後の行を左寄せにする方法
・ CSSだけで幅を自動調整できる、横並びナビゲーションメニューの作り方
・ 【初心者でもわかる】字下げ、字上げのインデント。リストを表示した時に、・の下に文字をもぐりこませないようにする方法
・ 【初心者でもわかる】フォームの必須項目に（*）や（※）を付ける方法
・ 【初心者向け】GoogleChromeのリニューアルで目立つようになった黒い線を消す方法
・ 画像高さをキープしたまま画面の幅いっぱいに背景画像を表示させる方法
中央寄せ
・ 【初心者でもわかる】インライン要素とブロック要素でそれぞれの中央寄せの方法と、中央寄せする時の考え方の違い
・ 【初心者でもわかる】文章全体は可変で中央揃えで、中の文字は左寄せにする方法
レスポンシブテクニック
・ 【初心者でもわかる】レスポンシブサイト作成時のCSSを切り分ける方法（@media screen）
・ 【初心者でもわかる】パソコンとスマホで改行の位置を調整する方法
・ 【初心者でもわかる】要素の順番をPCとスマホで変える方法（レスポンシブ）
・ 【初心者でもわかる】スマホの画像は、倍のサイズじゃないとボケる。
・ 【初心者でもわかる】PCとスマホで表示非表示を切り換える共通CSSを作ると効率UP！
品質保持、綺麗にソースを書く方法
・ 【Google HTML / CSSスタイルガイド】を初めて読んだので、一言で分かるようにまとめてみた -基本・HTML編-
・ 【Google HTML / CSSスタイルガイド】を初めて読んだので、一言で分かるようにまとめてみた -CSS編-
・ 【初心者でもわかる】line-heightのせいでデザインを崩さないためのコーディング方法
・ 【初心者でもわかる】cssで使ってはいけないclass名、使わない方がいいclass名
・ 【初心者でもわかる】cssを意味と見た目で分けて、綺麗に書く方法
・ 【初心者でもわかる】自分のホームぺージにメールアドレスをそのまま載せるのは危険！
・ 【初心者向け】初心者コーダーが陥りやすいHTML・CSSのトラップ4選
・ 【初心者でもわかる】「早い・綺麗・正確」なコーディングのためのオリジナルルール
・ 【初心者でもわかる】cssを共通化させて、短く書こう！
ブラウザ
・ IEさえ、、IEさえいなければ・・・こんなに便利な機能が・・・
開発サポート
便利ツール
・ 【初心者向け】1pxのズレもなくコーディングするための便利ツール
・ 【初心者におすすめ】WEB開発で重宝しているWEBサービス＆拡張機能たち5選
知っているとワンラックアップ！
・ 【初心者でもわかる】コピーライトは必須じゃない・・・だと？2020年最新の書き方をおさらい
・ 【初心者でもわかる】ファビコン（タブにあるアイコン）の簡単な作り方・設定方法
・ 【初心者でもわかる】簡単！ HTMLのタグをそのままテキスト（文字）として表示する方法
・ 【初心者でもわかる】別タブで開く時（外部リンク）だけ自動でマークを付ける方法
画像関連
・ 【初心者でもわかる】imgタグのaltの付け方
・ 【初心者でもわかる】web制作で使われる画像3種類。[.gif]と[.jpg]と[.png]の違い。
ネタ
料理
・ 【初心者でもわかる】position: absolute;を使ってチキンラーメンの卵をど真ん中（上下左右中央）に落とす方法
・ 【初心者でもわかる】border-radiusで円を作る方法。一緒にホールケーキを作ろう!
・ 【初心者でもわかる】border-radiusで長方形の左右を丸くして、エクレアを作る
・ 【初心者でもわかる】いちょう切り。part1（4つの要素を2×2に並べる方法-flexbox編-）
・ 【初心者でもわかる】いちょう切り。part2（2×2に並べた要素に隙間を作る-flexbox編-）
・ 【初心者でもわかる】calc()を使ってロールケーキをキッチリ3等分にする方法
・ 【初心者でもわかる】横並びにする3つの方法を、ナイフとフォークでやってみる
・ 【初心者でもわかる】擬似要素（::before,::after）でサンドイッチを作る方法
・ 【初心者でもわかる】グラデーションをつかって、コップに好きなジュースを注ぐ方法
・ 【初心者でもわかる】ラジオボタンのデザインを変更して、好きなケーキにしてしまう
作ってみた
・ 【作ってみた】js不使用。CSSだけでマウスホバーで動く自動ドア作った。
・ 【初心者でもわかる】ハンバーガーメニューをハンバーガーにする。
・ 【作ってみた】理容室の前にある赤と青のくるくる（サインポール）をCSSで再現してみた
クイズ
考え方・学習方法
・ 【初心者でもわかる】デザインからコーディングする時の考え方（実践例あり）
・ 【初心者でもわかる】cssで使えるショートハンドの書き方と、ショートハンドかロングハンドのどちらを使うべきかについての考察
・ 【初心者向け】学習サイト（プロゲートやドットインストール等）が講了したら次にすること
・ 【初心者向け】プログラミングを勉強したい！と思った時、HTMLとCSSから始めるのは適切なのか。
・ 【これからHTML・CSSを勉強する人向け】フロントエンジニアに必要な心構え
・ 【初心者向け】矢印(>)の位置でボタンの作り方を変えた方がいい話。
・ 【初心者向け】コーディングは難しい言葉を複雑に書く作業ではない。いかに綺麗に書けるかと頭を悩ませるものである。