あらすじ
前回はhtmlとcssを使いブラウザ上に色のついた四角を作ることができた。宿題では要素の中に要素を入れる手段が浮かばず苦戦していましたね、見ててすごい楽しかったです(日記)。
前回の発展問題のポイント
<html>
<head>
<title>ウェブページのタイトル</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<!--要素の中に要素を入れるときは、body要素のようにシンプルに<要素></要素>の真ん中に入れてしまおう、下だとappleの中にバナナができる-->
<div class="apple">
<div class="banana"></div>
</div>
</body>
</html>
今回の目的
横並びや、位置調整を体験する。
相変わらず使用頻度が高いもの以外は省略してるので各自検索してください。
reset.css
リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。
今回の授業では意図せずcssが掛かってるような変化があったと思いますが、それはブラウザによるものです、それをリセットします。
下記のurlのcss部分をコピペし、reset.cssを作成してください。今後それを使いまわします。
http://html5doctor.com/html-5-reset-stylesheet/
display
htmlには型があり、大きく分けて二つある。
1.ブロック型 & 2.インライン型
ブロック型が一番頻度が高く、枠組みを定義する。
インライン型は主に文字に関わる、今回は省略。
3.インラインブロック型
cssで定義する、1,2の型が合わさった型、これを使うと複数のインラインブロック型の要素を横並びにすることができる。
ただし同じ親要素に属していることが条件、親子関係は注意してみてください。
親子関係が不安ならここ見て
/* displayで型の指定ができます。元々ブロック型やインライン型でも別の型に変更できることを意味します。 */
.apple{
height:100%;
width: 100%;
display: inline-block;
}
以下サンプル
<html>
<head>
<title>ウェブページのタイトル</title>
<!-- reset.cssは css定義の一番上に置きます。
すべてのプログラムは上から下に読み下の設定に上書きされる性質があるので、
もしこれを一番下に置くと書いたcssごとリセットされます。 -->
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div class="apple"></div>
<div class="banana"></div>
<div class="cheese"></div>
<h1>ウェブページの見出し</h1>
<p>ウェブページを作成しました！</p>
</body>
</html>
html{
height:100%;
width: 100%;
}
h1,p{
color: white;
}
.apple{
height: 200px;
width: 200px;
background-color: red;
display: inline-block;
}
.banana{
height: 300px;
width: 150px;
background-color: yellow;
display: inline-block;
}
.cheese{
height: 30px;
width: 30px;
background-color: white;
display: inline-block;
}
padding
要素の内側に余白を作ります。子要素に文章を入れるとき、親要素にpaddingをかけてやるとその分余白が生まれます、officeのwordをイメージしてください。
.1{
/* 値を1つ指定した場合： 記述した順に[上下左右]のパディングになります。 */
padding: 10px;
/* 値を２つ指定した場合： 記述した順に[上下][左右]のパディングになります。 */
padding: 10px 20px;
/* 値を３つ指定した場合： 記述した順に[上][左右][下]のパディングになります。 */
padding: 10px 20px 30px;
/* 値を4つ指定した場合： 記述した順に[上][右][下][左]のパディングになります。 */
padding: 10px 20px 30px 40px;
}
.2{
/* padding-top ,-right,-left,-bottom 一方向のみ設定するときはこっちの方が描きやすい*/
padding-right: 20px;
}
margin
paddingと似ていますが、逆に要素の外側に余白を作ります。余白を作るというよりは要素の位置を直接変えたいといった使い方の方が多いです。
書き方はpaddingの記述をmarginに変えるだけなので大半省略します。
詳細はここ見て
margin: 0 auto;
.1{
margin: 0 auto;
}
marginでよく使う記述です。二つの指定なので[上下][左右]の記述ですね。上下は0なので変えません。ついでに言うと0のときはpxを書かなくていいです。左右のautoは要素の幅に応じて左右の余白を自動で設定します。
つまり、左右中央揃えになります。便利ですね。
上下に関してはautoにしても中央揃えになってくれないようなので、別の書き方が必要です。
宿題とテンプレ
授業でやったことを思い出しながら以下の問題を答えること。
今回は動きを見てもらうのを重視した為htmlはすでに作っています。cssのみ編集して解答すること。
途中見たことない記述もあると思いますが、tips感覚で覚えておいてください。
<html>
<head>
<title>宿題その2</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="homework2.css">
</head>
<body>
<div class="exp1">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</div>
<div class="exp2">
<div class="word">
<div class="wordspace">
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</div>
</div>
<div class="exp3">
<div class="lever"></div>
</div>
<div class="exp4">
<div class="flame">
<div class="ballspace">
<div class="ball"></div>
</div>
</div>
</div>
</body>
</html>
body{
height:100%:
width:100%;
}
.hello{
height:200px;
width: 300px;
background-color:red;
}
.exp1,.exp2,.exp3{
height: 300px;
width: 100%;
}
.exp1{
background-color:#EEE;
}
.exp2{
background-color:#DDD;
}
.exp3{
background-color:#DDD;
overflow: hidden;
}
.exp4{
height:500px;
width:100%;
}
p{
color:white;
font-size:32px;
}
.block{
height:100px;
width:100px;
font-size:40px;
color: white;
}
/* nth-child(n) 同じ要素が複数並んでいる時に使います、使い方によっては偶数番と奇数番に色を指定して縞々にしたりできます*/
.block:nth-child(1){
background-color:red;
}
.block:nth-child(2){
background-color:green;
}
.block:nth-child(3){
background-color: blue;
}
.word{
width:100%;
height:100%;
background-color:red;
}
.wordspace{
width:100%;
height:100%;
background-color:green;
}
.lever{
height:100px;
width:100px;
/* border-radius 要素の角を丸めます、border-radius:50%とするとすべての角を50%,つまり丸くなります。*/
border-radius:50%;
background-color:blue;
}
.flame{
height:100%;
width: 100%;
background-color:blue;
}
.ballspace{
height:100%;
width:100%;
background-color: white;
overflow: hidden;
}
.ball{
height:100px;
width:100px;
border-radius:50%;
background-color:red;
}
クラスexp1の問題.1~3のブロックを横並びにしてください。
クラスexp２の問題.paddingを使い上下左右20pxの余白を作ってください。
クラスexp3の問題. marginを使いleverを上下左右中央に持って行ってください。今回はぴったし中央じゃなくて構いません。
クラスexp4の問題(発展)paddingとmarginを駆使し日本の国旗にしてみましょう。正解は一つではありませんので色々試してください。