この記事の対象読者
・cssをやった事がない人
※今回は記事を書く時間を少なくする為に前回作ったhtmlを流用します。
下準備
今回も毎度のごとくfinderで書類の中に新規のフォルダーを作成します。名前はなんでも良いですが、今回はcss-study_v1とします。次にBracketsを開き新規ファイルを二つ作りそれぞれ名前をindex.htmlとstyle.cssと言う名前で保存します。
※Bracketsて何それ美味しいのと思った人はこちらを見て見て下さい。
次にhtmlファイルを少しだけ編集して置きます。まず**!**と入力してからtobキーを押します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
と言うコードが自動で生成されるのでこれを少しだけ手直しします。一つ目はlangを変更します。lang="en"になっているので、jaに変更して下さい。これを変更する事で、検索エンジンがこれは日本語のサイトであると分かりやすくなります。二つ目にhead内にstyle.cssの設定を反映できるようにcssを関連付けをするコードを書きます。
<link rel="stylesheet" href="style.css">
headの中にこれをコピペなどで追加して下さい(cssの名前が違う場合はhrefの所を自分が作ったcssの名前に変えて下さい)。これで準備は完成です一旦コードを確認しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
</body>
</html>
これで下準備は終わりです。
実際にコードを書こう！！
CSSで文字をいじると言ったは良いものの、文章がありません。わざわざ練習の為に文章を作るのは時間の無駄なので今回も著作権がなさそうな日本国憲法9条を使っていきます。最後に引用したページを貼っておくので気になる方はそちらも見て下さい。bodyに貼り付けると
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
憲法第９条
第二章 戦争の放棄
第九条【戦争放棄、軍備及び交戦権の否認】
１ 日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、 国権の発動たる戦争と、
武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。
２ 前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。
国の交戦権は、これを認めない。
</body>
</html>
こんな感じです。それでは実際にブラウザで見て行きましょう。
htmlファイルとは違い見にくくなっているのが分かると思います。一旦タグ付けをして整理して行きます(前回のhtmlに置き換えただけ)。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>第２章 戦争の放棄</h1>
<p>〔戦争の放棄と戦力及び交戦権の否認〕</p>
<h2>第９条</h2>
<ol>
<li>日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、 国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。(MS ゴシック)</li>
<li class="Sawarabi Mincho">前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。国の交戦権は、これを認めない。(さわらびフォント)</li>
</ol>
</body>
</html>
ずいぶん見やすくなりましたね、それではcssでもっと綺麗にして行きまいしょう。
始めにタイトルが少し小さい気がするので少し大きくして見ましょう。
h1 {
font-size: 50px; /*指定した文字のサイズを変更できる*/
}
ピクセル数を変更する事で大きさが変更できます。この調子で一旦全てのタグの大きさを調整します。
少し見やすくなりましたね。次はフォントと文字の太さを変えて見ましょう。詳しくは前回の記事を参考にして下さい。始めにhtmlに戻ってhead内にこれをコピペして下さい。
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
次にcssでフォントを変えたい要素にこれをコピペするだけです。
font-family: 'Sawarabi Mincho', sans-serif;
少し文字がカッコよくなったのが分かると思います。
次に文字を真ん中に揃えましょう。text-align:にcenterと入れると真ん中へrightと入れると右に寄ります。
body{
text-align: center;
}
最後に本文をの文字を太くして見ます。太くするには太くしたい要素にこれをコピペするだけです。
font-weight:bold;
今回の最終的な見た目とコードがこれです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<h1>第２章 戦争の放棄</h1>
<p>〔戦争の放棄と戦力及び交戦権の否認〕</p>
<h2>第９条</h2>
<ol>
<li>日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、<br> 国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。</li>
<li class="Sawarabi Mincho">前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。<br>国の交戦権は、これを認めない。</li>
</ol>
</body>
</html>
body {
text-align: center;
}
h1 {
font-size: 64px; /*指定した文字のサイズを変更できる*/
font-family: 'Sawarabi Mincho', sans-serif;
}
p {
font-size: 32px;
font-weight:bold;
}
h2 {
font-size: 40px;
font-family: 'Sawarabi Mincho', sans-serif;
}
li {
font-size: 20px;
font-weight:bold;
}
最後に
最後まで記事を読んでくれてありがとうございました。まだ初心者なのでいたらいない点や憲法に著作権があるのか、コメントで教えてくれたら幸いです。
参考にしたwebサイト
google fonts
よく分からないサイト