未経験から副業で稼げるWebデザイン講座 #5 CSSファイルを読み込もう

↓初回はこちら↓

未経験から副業で稼げるWebデザイン講座 #0 講座概要

前回の復習

前回はトップページの画像を<img>タグを使用して表示しました。ファイルの場所を示すsrc=””と説明文alt=””をタグの中に記述するの変わり種でしたね。

<img src="画像のパス" alt="画像の説明文">

未経験から副業で稼げるWebデザイン講座 #4 画像を表示しよう

今回はCSSファイルを読み込みましょう

今回はCSSファイルを読み込みます。
CSSファイルってなんだ？って思いましたよね。

まずは皆さんのVisutal Studio Codeをご覧ください。
style.cssを最初に作ったはずです。

あらかじめstyle.cssを作っておいた

そうです、これがCSSファイルです。

CSSは見た目を変えるためのファイル

まずはCSSについて説明します。

今まで皆さんがコーディングしてきた”index.html”はHTMLというファイルになります。
HTMLは”文字”だったり”画像”だったり、表示するものの中身を記述するファイルです。

一方で、CSS。
CSSは中身の見た目を変えるためのファイルになります。

たとえば下記のように入力すると

h2{
   font-size:100px;
}

<h2></h2>で囲まれた文字のサイズが100pxと大きくなります。

CSSで文字サイズなどを見た目を変更できる

文字サイズ
文字の色
画像のサイズ
画像の位置　などなど

これらはすべて、CSSに記述していく内容です。

CSSファイルを読み込もう

それではさっそく、index.htmlでCSSファイルを読み込んでいきます。
これは次回から書いていくCSSファイルを反映するための下準備だと思ってください。
下のコードを<title>タグの下に記述します。

<link rel="stylesheet" href="style.css">

<title>タグの下に記述する

href=””というのがcssファイルのパスを記述する場所です。
今回はindex.htmlとstyle.cssが同じ階層にあるので、パスはファイル名の”style.css”のみとなります。

リセットCSSを読み込もう

さらにCSSファイルを読み込みます。
最初のほうで”reset.css”というcssファイルも作成したのを覚えていますか？

それもあわせて読み込んでしまいます。
先ほどのstyle.cssの読み込みの上の行、<title>タグの下の行に記述してください。

<link rel="stylesheet" href="reset.css">

リセットCSSでブラウザによる差異をなくす

最後にreset.cssをVisual studio codeで開いて下記のコードをコピー＆ペーストします。

/***
    The new CSS reset - version 1.11.2 (last updated 15.11.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 */
 *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Fix mobile Safari increase font-size on landscape mode */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
  cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu, summary {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
  -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
  -webkit-appearance: revert;
  appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
  all: revert;
  box-sizing: border-box;
}

/* reset default text opacity of input placeholder */
::placeholder {
  color: unset;
}

/* fix the feature of 'hidden' attribute.
 display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
 - fix for the content editable attribute will work properly.
 - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
  -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}

/* Remove details summary webkit styles */
::-webkit-details-marker {
  display: none;
}

reset.cssに貼り付ける

貼り付けできたら上書き保存してreset.cssは閉じてもらってOKです。

このリセットCSSは何のためにあるのか？
答えは、ブラウザ間での表示の差異をなくすためにあります。

ブラウザは世の中にたくさんあります。

Google Chrome
Safari
Edge
Firefox　などなど

実は同じウェブサイトでも、使うブラウザによって表示のされ方が異なります。

一生懸命コーディングしたのに、ブラウザによって見え方が違うのは、困っちゃいますよね？

そこでリセットCSSです。
これを読み込んであげるだけで、どのブラウザを使用しても、同じように表示させることができるんです。

なのでWeb制作では、必ずリセットCSSを読み込みましょう。

今回のまとめ

CSSファイルは見た目を変えるためのファイル
CSSファイルを読み込む<link rel=”stylesheet” href=”style.css”>
リセットCSSを読み込む<link rel=”stylesheet” href=”reset.css”>

これらを頭に入れていただければOKです。
また今回の正確なコードが欲しい方は、記事の一番下にご用意いたしましたので、参考にしてみてください。

いかがでしたか？今回はCSSファイルの読み込みをマスターしていただきました。
これからはHTMLに加えてCSSファイルもたくさん触っていきますので、この機会にCSSとも仲良くなりましょう！

だんだんとできることが増えてきましたね！
次回はstyle.cssに記述をしていきます。

これからも皆さんの夢の実現に向けて頑張っていきましょう！

↓次の回はこちら↓

未経験から副業で稼げるWebデザイン講座 #6 要素をグループ化しよう

↓正確なコードはこちら↓

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Portfolio</h1>
    <p>Web designer</p>
    <p>小林 千晶</p>
    <p>Ⓒ Chiaki Kobayashi. All rights reserved.</p>
    <img src="images/top.jpg" alt="トップ画像">
</body>
</html>

reset.css

/***
    The new CSS reset - version 1.11.2 (last updated 15.11.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 */
 *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
  }
  
  /* Preferred box-sizing value */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Fix mobile Safari increase font-size on landscape mode */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  
  /* Reapply the pointer cursor for anchor tags */
  a, button {
    cursor: revert;
  }
  
  /* Remove list styles (bullets/numbers) */
  ol, ul, menu, summary {
    list-style: none;
  }
  
  /* For images to not be able to exceed their container */
  img {
    max-inline-size: 100%;
    max-block-size: 100%;
  }
  
  /* removes spacing between cells in tables */
  table {
    border-collapse: collapse;
  }
  
  /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
  input, textarea {
    -webkit-user-select: auto;
  }
  
  /* revert the 'white-space' property for textarea elements on Safari */
  textarea {
    white-space: revert;
  }
  
  /* minimum style to allow to style meter element */
  meter {
    -webkit-appearance: revert;
    appearance: revert;
  }
  
  /* preformatted text - use only for this feature */
  :where(pre) {
    all: revert;
    box-sizing: border-box;
  }
  
  /* reset default text opacity of input placeholder */
  ::placeholder {
    color: unset;
  }
  
  /* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
  :where([hidden]) {
    display: none;
  }
  
  /* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
  :where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
  }
  
  /* apply back the draggable feature - exist only in Chromium and Safari */
  :where([draggable="true"]) {
    -webkit-user-drag: element;
  }
  
  /* Revert Modal native behavior */
  :where(dialog:modal) {
    all: revert;
    box-sizing: border-box;
  }
  
  /* Remove details summary webkit styles */
  ::-webkit-details-marker {
    display: none;
  }/***
    The new CSS reset - version 1.11.2 (last updated 15.11.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 */
 *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
  }
  
  /* Preferred box-sizing value */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Fix mobile Safari increase font-size on landscape mode */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  
  /* Reapply the pointer cursor for anchor tags */
  a, button {
    cursor: revert;
  }
  
  /* Remove list styles (bullets/numbers) */
  ol, ul, menu, summary {
    list-style: none;
  }
  
  /* For images to not be able to exceed their container */
  img {
    max-inline-size: 100%;
    max-block-size: 100%;
  }
  
  /* removes spacing between cells in tables */
  table {
    border-collapse: collapse;
  }
  
  /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
  input, textarea {
    -webkit-user-select: auto;
  }
  
  /* revert the 'white-space' property for textarea elements on Safari */
  textarea {
    white-space: revert;
  }
  
  /* minimum style to allow to style meter element */
  meter {
    -webkit-appearance: revert;
    appearance: revert;
  }
  
  /* preformatted text - use only for this feature */
  :where(pre) {
    all: revert;
    box-sizing: border-box;
  }
  
  /* reset default text opacity of input placeholder */
  ::placeholder {
    color: unset;
  }
  
  /* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
  :where([hidden]) {
    display: none;
  }
  
  /* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
  :where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
  }
  
  /* apply back the draggable feature - exist only in Chromium and Safari */
  :where([draggable="true"]) {
    -webkit-user-drag: element;
  }
  
  /* Revert Modal native behavior */
  :where(dialog:modal) {
    all: revert;
    box-sizing: border-box;
  }
  
  /* Remove details summary webkit styles */
  ::-webkit-details-marker {
    display: none;
  }

未経験から副業で稼げるWebデザイン講座 #4 画像を表示しよう

未経験から副業で稼げるWebデザイン講座 #6 要素をグループ化しよう

motolog motolog

金沢・北陸の写真スポットをまとめたカメラ旅行ブログ

未経験から副業で稼げるWebデザイン講座 #5 CSSファイルを読み込もう

↓初回はこちら↓

前回の復習

今回はCSSファイルを読み込みましょう

CSSは見た目を変えるためのファイル

CSSファイルを読み込もう

リセットCSSを読み込もう

リセットCSSでブラウザによる差異をなくす

今回のまとめ

↓次の回はこちら↓

↓正確なコードはこちら↓

index.html

reset.css

関連記事

未経験から副業で稼げるWebデザイン講座 #0 講座概要

未経験から副業で稼げるWebデザイン講座 #6 要素をグループ化しよう

未経験から副業で稼げるWebデザイン講座 #12 プロフィールページを組もう①

未経験から副業で稼げるWebデザイン講座 #23 HTMLをPHP化しよう

未経験から副業で稼げるWebデザイン講座 #15 作品集部分を組もう②

未経験から副業で稼げるWebデザイン講座 #14 作品集部分を組もう①

コメント