html入門 - Lesson7
CSSでまずやること
(CSSを使ってみましょう。)◆CSSの必ず最初に書く処理
左と上に空白が空いてしまっていますね。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<img src='http://hukumoto.pe-gawa.com/club/img/comingsoon1.png'>
</body>
</html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
</style>
<title>初めてのページ！</title>html,body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<img src='http://hukumoto.pe-gawa.com/club/img/comingsoon1.png'>
</body>
</html>
このコードをエディタへ書いてみると、空白が消えています。
この処理を一つずつ見ていきましょう！
<style type="text/css">
ここには、CSSを記述します。
</style>
ここには、CSSを記述します。
</style>
html,body{
ここには、htmlタグとbodyタグに指定される,CSS要素を記述します。
}
ここには、htmlタグとbodyタグに指定される,CSS要素を記述します。
}
margin:0;//マージンを0pxにします。
padding:0;//パディングを0pxにします。
html,body要素には、初期値として余白が指定されているため、それを０にしてあげます。padding:0;//パディングを0pxにします。
そうして、余白が消えたわけです。
これで、HTMLとCSSの基本はできたようなものです！
画像の表示、リンクの作成、余白の削除、文字コードの設定、タイトルの付け方、を学びましたね。
次のレッスンからは実戦的なサイトの作り方を学んでいきましょう！