CSSに気持ちが伝わらないときに参考になるサイト集

• HTMLのタグに属性を書く時に先頭に来るのはidとclassどちらか気になったのでいろいろ見てみた。
• Vuetifyの便利なCSSのクラス集 - Qiita

マークとかボタンを作りたい

• CSSで作る必須マーク - Qiita
• CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！ | JAJAAAN

IEでうまくいかない

• IEでmarginのautoが効かない時の対応方法 - Qiita

スマートフォンに対応したい時

• iPhone版Safariでフォントサイズがおかしくなる問題 - Web関連あれこれ
• -webkit-text-size-adjust: none を絶対に設定してはいけない理由 - てっく煮ブログ
• レスポンシブ対応で知ったメディアクエリの基本 - ponsuke_tarou’s blog
• viewportを理解して正しいレスポンシブデザインを設定しよう | tree
• blog.鶯梭庵/links/改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その１

スマホでデバックしたい!

• Android Studio のエミュレータで PC キーボードを使う／使わない – いろはにスマホ
• Chromeデベロッパーツールでスマホサイトをデバックする方法 | Tech2GO

要素の位置を調整したい時

• 【CSS】Flexboxの各プロパティを挙動を確認してみる | KuzLog
• ど真ん中
  • 【CSS】要素やテキストを上下左右に中央寄せする簡単な方法 | KuzLog
• 上下
  • vertical-align …… 縦方向の揃え位置を指定する
• 左右
  • CSSで要素を右寄せする方法の全て｜文字も画像も右寄せにしよう | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

<select>が上手くいかないときは

• スクロールできるダイアログでbootstrap-selectを使ったらリストが画面からはみ出して選択できなくなった時の対応方法 - Qiita

設定したスタイルが無視されたら

• {タグ}:first-childは「{タグ}の最初の子要素」ではなく「最初の子要素」なので「最初の子要素が{タグ}だったら」ということになる
  • CSS：勘違いしがちな:first-child | ARTICLE | goma
• <span>にheight:とvertical-align: middle;を指定するときはdisplay: table-cell;を添えないと無視される
  • SPAN要素の固定幅、高さのスタイル指定 - happynowの日記
  • vertical-alignが効かない時の対処法（テキストを縦中央揃えにするには）夏木メモ
• スタイル(CSS)の適用される優先順位を知る - Qiita
• CSSでheight:100%を使う方法について。 | Ginpen.com
• CSSでheight:autoの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
• CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう
• display:table-cell の親に display:table を指定しないと意味無い | ＊Web Design 覚え書き＊
• text-align:centerが効かない！text-alignは何に効くCSSかなつきメモ

子要素が親要素からはみ出してしまった時

• widthを使っていたら
  • width:100%なのにはみ出す理由と回避策。 | Ginpen.com
• positionを使っていたら
  • CSS - position
• floatを使っていたら
  • CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説 | コリス

tableをうまく設定できない時

• 行(tr)の高さ(height)を広げたいのにうまくいかない・・・
  • CSSプロパティ～表における幅と高さの基本～
• CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary

何だこれって思ったら

• 「vertical-align」を指定した場合と「valign」を指定した場合のChromeの開発ツールにおける表示の違い - Qiita

SASSを使おうと思ったら

• SASSを使ってみようと思った時に役立てそうなリンク集 - Qiita

セレクタの書き方を忘れたら

• セレクタの種類－CSSの基本
• エレメントで<input type="text">のみスタイルを変える

長い文字列を改行したい

• テーブルのセル内で改行したいとき

  • テーブル内で長い文字列を決まった長さで改行させる方法 - Qiita
  • CSS：CSSでボックス内の英語文字列等を折り返しさせる | raining

• テーブルの列幅を設定しないといけません。

  • CSSだけで表(テーブル)の列(縦方向)を一括装飾する [ホームページ作成] All About

• URLがはみ出して困ったとき

  • 【HTML】長い文字列の改行方法を指定する「word-wrap」プロパティ：初心者のためのHTMLとエクセル講座：HTML・CSSを使ったホームページ作成やエクセル(EXCEL)・フォトショップ(Photoshop)入門

• よく出てくるスタイル

  • colgroupって何？って思ったら
    • <COLGROUP>－HTMLタグリファレンス
  • word-breakって何？って思ったら
    • word-break－スタイルシートリファレンス
  • overflow-wrapって何？って思ったら
    • overflow-wrap - CSS | MDN
  • word-wrapって何？って思ったら
    • word-wrap－CSS3リファレンス
  • text-wrapって何？って思ったら
    • text-wrap－CSS3リファレンス

• 失敗事例 : とにかくうまくいかないとき

  • 上位の要素に white-space: nowrap が設定されていました
    • 折り返ししたい列で white-space: normal を設定してスタイルを上書きました。
    • white-space - CSS: カスケーディングスタイルシート | MDN
  • 連続した英字や数字が word-wrap: break-word で折り返されなかった・・・
    • word-break: break-all にしたら折り返されました

はまりポイントです。

word-wrapプロパティは、text-wrapプロパティの値がnormal、または、suppressのときにだけ有効となります。