【挑戦企画】大学生のHTML&CSS入門!CSSの設定をしよう〜4日目だよ〜

 

どうも!HTMLを勉強しているはらくん(@harakunishere)です!

前回はHTMLで簡単なコードを書いて構造を作るまでやってみましたね。

【挑戦企画】大学生のHTML&CSS入門!基本的な構造を学ぼう〜3日目だよ〜 最近勉強にはまっているはらくん(@harakunishere)です! 今回はHTML&CSSに関して学んだことの続きを書い...

今回は、CSSというHTMLで書いたものを修飾するようなことを学んでいきたいと思います!

今回も前回、前々回と使っている「かえるファンクラブ入会申し込み」のフォームを使ってやっていきたいと思います!

 【前回までの復習】HTMLで簡単なコードを書く

では、最初に前回までの復習をやっていきましょう。

 

このようなWebページを作っていましたね!

このページは下のようなコードで作っています。

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width-device-width">
<title>かえるファンクラブ入会申し込み</title>
</head>
<body>
<h1>かえるファンクラブ入会申し込み</h1>
<p>入会するには以下のフォームにご記入ください!</p>
<p>お名前(あだ名でも大丈夫です。): <inputtype="text"name="text-name"placeholder="かえる大好きマン"></p>
<p>メールアドレス: <inputtype="email"name="mymail"placeholder="kaeru@uta.com"></p>
<p>パスワード: <inputtype="password"name="passcode"></p>
<p><button type="submit">登録する</button></p>
</body>
</html>
完成したページを見ると、なんか形にはなっていますが、白黒でダサいですよね。
なので今回はCSSという言語を使って修飾していきたいと思います。

初心者にオススメ!CSSの作り方

ではいよいよCSSを作っていきましょう。

CSSを書く前のファイル作成や設定など

まず メニュー → 新規ファイル より新しいファイルを作成しましょう。

 

作成したら メニュー → 名前を付けて保存 をクリックします。

style.cssというファイル名でHTMLの文章と同じところに保存します。

 

 

新しく作ったstyle.cssのファイルにCSSのコードを書いていきます。

 

 

ただこのままでは、HTMLのファイルと CSSのファイルの繋がりがない状態なので繋がりを作っていきます。

HTMLのファイルを開きましょう。

 

<head></head>タグのなかに

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

という要素を書き込みましょう。

 

これで、CSSのファイルとHTMLのファイルが繋がりました。

 

Webブラウザによって異なるスタイルをリセットする

 

Webブラウザは標準でCSSのような設定を持っています。

つまり各Webブラウザでそれぞれ違った修飾が元々されているということですね。

 

これではページを見るWebブラウザによってページのデザインが微妙に変わってきてしまいます。

これをリセットする設定をしなければいけません。

では、やっていきましょう。

 

まず、sanitize.cssをダウンロードしましょう。

このsanitize.cssによってWebブラウザ独自のスタイルをリセットすることができます。

コチラからダウンロードすることができます→sanitize.cssダウンロードページ

 

ダウンロードページを下に進んでいくと

 

上の画像のようにDownloadというボタンがあります。

Downloadボタンの上で右クリックをしましょう。

そしてリンク先を別名で保存というのをクリックします。

 

そしたらsanitize.cssという名前で保存しましょう。

今回はCSSというフォルダをあらかじめ作っておいたのでそこに保存していきます。

このCSSというフォルダには先ほど作成したstyle.cssというのも入れておきます。

 

次に、HTMLの文章を開きましょう。

 

先ほどstyle.cssをHTMLと繋げるために

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

という要素を書きました。

しかし、先ほどstyle.cssをCSSというフォルダを作ってsanitize.cssと一緒に入れましたね。

なので、style.cssはCSSというフォルダの中にあるわけです。

なので、この部分を修正します。

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

このような要素に変更します。

CSS/になっているところが変更して加えたところです!

 

 

style.cssをみていきます。

 

style.cssに上の画像のように

@import url(sanitize.css);

という風に打ち込みましょう。

 

これで保存すれば、各Webブラウザのスタイルに依存しないページを作ることができます。

 

以上がCSSを書く前の設定です!

是非参考にしてみてくださいね!