CSSの使い方
HTMLにCSSを記述する
code:cssの記述
<style type="text/css">
/*リンクの部分の書式を変更*/
a {
font-family: "MS明朝", serif;
font-size: 24pt;
color: yellow;
background-color: red;
text-decoration: none;
font-weight: bolder;
}
/*カーソルを合わせると色が変わる*/
a:hover{
color:red;
background-color: yellow;
}
/*表に細い枠線をつける*/
table, tr, th, td {
border-collapse: collapse;
}
/*セル内の文字を右揃えにする*/
td{
text-align: right;
}
/*ここからあとで追加*/
body{
font-family: "MS明朝", serif;
font-size: 24pt;
color: yellow;
background-color: red;
text-decoration: none;
font-weight: bolder;
}
/*ここまであとで追加*/
</style>
<head>内に上記をコピーアンドペーストする
/*ここからあとで追加*/から/*ここまであとで追加*/までの部分を一旦削除
上書き保存
ブラウザを更新
a{}内の一行を削除して，上書き保存の上，ブラウザを更新して，見た目がどのように変化するか見てみる
さらに，</style>の前に，/*ここからあとで追加*/から/*ここまであとで追加*/までの部分を貼り付けて，上書き保存の上，ブラウザを更新して，見た目がどのように変化するか見てみる
https://gyazo.com/9a204f1d13ca757ad1d74fc8a9dd29f8
外部CSS
上の例ではCSSをHTMLファイルの中に記述している
1ページならそれでも問題ないが，10ページくらいHTMLファイルがあるとそれぞれのファイルを編集するのは面倒
→ 複数のHTMLファイルに一括でCSSを適用する方法があると便利
外部CSSの読み込み
index.htmlからスタイルシートの部分を削除する
<style>の中の部分（ /*リンクの部分の書式を変更*/～</style>の前の}まで）をコピーする
メモ帳を新しく開く
コピーした内容をメモ帳に貼り付ける
名前をつけて保存で，「ファイルの種類」を「すべてのファイル(*.*)」に変更して，フォルダに style.css という名前で保存する
index.htmlの<head>の中に<link rel="stylesheet" type="text/css" href="style.css">を貼り付け（コピーしたときに`が付いた場合は貼り付けたあとに削除しておく）
ファイルを上書き保存したら，ブラウザでindex.htmlを開く
https://gyazo.com/30a013043722bd99af31c0c83d2e8cd2
HTMLへの記述
○ 個別のページに合わせて対応が可能
✕ 大規模なサイトになると編集が大変
外部CSSの読み込み
○ 複数のページに一括で変更を適用できる
✕ ディレクトリ変更などによってリンク切れでスタイルが読み込まれない場合がある
CSSをはずす
Firefoxで「表示」→「スタイルシート」→「スタイルシートを使用しない」
Chromeは拡張機能を使わないとスタイルシートをはずすことができない
https://gyazo.com/05ff3de8dcbc82b563b21f6d0a26cc86
★★ idとclass
さらに難しいので，ここまでで詰まっている人は目を通すだけで大丈夫です
id属性やclass属性を使うことで，同じタグでも異なる特定のデザインを設定することや，特定の箇所だけ異なるデザインを設定することができる。
たとえばメニュー部分のリストは異なるデザインを設定したい，特定の色で表現したい部分がある，など
idとclassには以下の違いがある（miyayo.icon困ったらclassを使っておけば良いと思います）
table:idとclass
指定方法 特徴
class .class名 ページ中で何度も使用できる
idとclassの例
code:idclass.html
<!DOCTYPE html>
<html>
<head>
<title>CSSのクラス</title>
<meta charset="utf-8">
<style>
body {
margin: 0 auto;
width: 60%;
}
/* メインコンテンツの幅を60％で，中央揃えで表示 */
display: flex;
}
.flex-1 {
flex: 1
}
.flex-4 {
flex: 4
}
.menu {
font-family: "ＭＳ 明朝", serif;
}
/*classがmenuのものはフォントを明朝体にする*/
.red {
}
/*classがredのものは背景色を赤くする*/
text-align: center; /* 中央揃え */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
font-size: 48pt;
border-top: black solid 5px;
border-bottom: black solid 5px;
}
/*idがtitleのものには上記の書式を設定する*/
</style>
</head>
<body>
<header>
<h1 id="title">CSSのidとclassの例</h1>
</header>
<div id="container">
<nav class="flex-1">
<!--classを複数指定することもできる-->
<h1 class="menu red">メニュー</h1>
<ul>
<li class="menu">箇条書き1</li>
<li class="menu">箇条書き2</li>
<li class="menu">箇条書き3</li>
</ul>
</nav>
<main class="flex-4">
<section>
<h2 class="red">内容</h2>
<span class="red">ここに本文</span><br> ここに本文
<br> ここに本文
<br> <em class="red">ここに本文</em>
<br> ここに本文
<br> ここに本文
<br>
</section>
</main>
</div>
</body>
</html>
https://gyazo.com/df83059ae1132f33f29be125fddb94a6
解説
メニューと内容はCSSのflexboxという機能で幅を1:4に分けている（#container ～ .flex-4の部分）
ページのタイトルの部分は，#title（id）によって大きな文字で，中央揃え，上下に枠付きになっている（#titleの部分）
メニューの部分は，.menu（クラス）によって，明朝体になっている（miyayo.icon区別を分かりやすくするためだけで，メニューは明朝体が望ましいというわけではありません）
背景が赤くなっている部分は，.red（クラス）によって背景色が変えられている（特に意味はありません）
メニューの「メニュー」の部分は，.menuと.redの2つのクラスが指定されている（スペース区切りで並べれば良い）ので，明朝体かつ背景が赤字になっている