Devenia 学ぶ / 用語集
CSSのスタイルを理解する
CSSは、タイポグラフィ、色、余白、レイアウト、レスポンシブな動作など、HTMLコンテンツの見た目を決めます。このガイドでは、スタイルで変えられることと、CSSでは解決できないことを説明します。
まずはメールでご連絡ください。ページまたは質問を送っていただければ、わかりやすく回答します。
CSSをプレゼンテーション層として使う。
カフェのメニューでは、HTMLが見出し、料理、価格を示します。CSSはフォント、余白、配置を決めます。大きな画面では2つのメニュー列を横に並べ、スマートフォンでは縦に並べられます。料理と価格は同じままです。
スタイルで変えられること
大きな見出しにしても、欠けている営業時間を補ったり、分かりにくい案内を説明したりすることはできません。まず言葉を分かりやすく整え、その後でスタイルを使って見つけやすくします。最初のコード例は MDNのCSS入門。
なぜ一方のスタイルが別のスタイルを上書きするのか
同じ要素に複数のルールが適用されることがあります。ルールが競合すると、カスケードによってブラウザーが使う値が決まります。たとえば、サイト全体のリンク色と、ナビゲーションリンク用に別途指定した色の両方が、メニューリンクに適用されることがあります。
色を変更しても見た目が変わらない場合は、ブラウザーの開発者ツールで要素を確認してください。Stylesパネルには一致するルールと取り消し線の付いた宣言が表示されます。別の上書きを追加する前に、どのルールが優先されているか確認してください。
ページを使えるか確認する
スタイルを変更したら、実際のコンテンツでページを確認します。長い見出し、メニュー、価格は、短いプレースホルダーでは見えない問題を明らかにします。
適切なスタイルは、訪問者がページを読み、次の行動を取りやすくします。ただし、検索順位を保証するものではありません。 Googleのページ エクスペリエンスに関するガイダンスは、良い体験だけで上位表示が保証されるわけではないことを示しています。
CSS：よくある質問
CSSは何の略ですか？
CSSはCascading Style Sheets（カスケーディングスタイルシート）の略です。HTML要素の見た目、つまりタイポグラフィ、色、余白、レイアウトを決めます。
HTMLとCSSの違いは何ですか？
HTMLは見出し、段落、リストなどの構造と意味を提供します。CSSはプレゼンテーション、つまりそれらの見た目を提供します。
Webサイトを作るにはCSSを学ぶ必要がありますか？
必須ではありません。テーマやビジュアルエディターで色、タイポグラフィ、レイアウトを設定できます。まずはその設定を使い、関連するページの見た目をそろえます。用意された設定では対応できない表示ルールを理解したり変更したりするときに、CSSを学ぶと役立ちます。
レスポンシブデザインとは何ですか？
レスポンシブデザインとは、Webサイトがさまざまな画面サイズに合わせて変化することです。CSSはスマートフォン、タブレット、デスクトップに合わせてレイアウトと余白を調整します。
CSSはSEOに影響しますか？
CSSはページの表示や読み込み方に影響することがありますが、色や余白を変えるだけで検索順位が上がるわけではありません。有用なコンテンツを利用できる状態に保ち、スタイルを変更するときはモバイルレイアウトと読み込み動作を確認します。
CSSについて実用的な質問がありますか？
ページのアドレス、問題のある要素、問題が見える画面サイズを送ってください。どのように表示されると思っていたかも書いていただければ、必要なスタイル変更を特定できます。