HTMLの基礎の基礎09
作成日：
簡単なHTMLを書き、実際に無料サーバーにアップロードして、ホームページを作るまでをやりましょう。
実際にやってみることで、本当の基礎の基礎、HTMLの規則が実体験として理解できます。
【37】センターで揃える。
- cssにclassを作り、divやspanで囲んで使います。
- 初心者の間はつい<center></center>をHTMLで使いがちですが、cssでclassを作るべきです。
.mannaka {
text-align: center;
}
- .mannaka というのは自作名なので、ここは自分が使いやすいアルファベット名で構いません。
- 右寄せ用のclassは下記です。
- .migi は自作名なので、自分が使いやすい名前で構いません。
.migi {
text-align: right;
}
【38】改行させずに割り込ませるspan
- 文章中で改行させず、部分的に色を変更したりフォントサイズ変更などに使います。
- その他、改行させずに割り込ませるために使います。
文章中で改行させず、部分的に色を変更したり、フォントサイズ変更などに使います。
<p>
文章中で改行させず、<span class="red">部分的に色を変更</span>したり、
<span class="font140 fontfantasy">フォントサイズ変更</span>などに使います。
</p>
.red { color: red;}
.font140 { font-size: 140%;}
.fontfantasy { font-family: fantasy;}
- .red は自作名なので使いやすい名前にして下さい。
- color ←文字の色を指定するためのcss
- color:red はカラーネームです。カラーコードは#ff0000 です。
- font140 ←自作名なので変更OK!
- fontfantasy ←自作名なので変更OK!
- class は複数個同時に適用させることが可能です。半角スペースで区切るだけです。
- ただし、内容に重複があったりすると表示される結果が期待した通りにならず、混乱の原因になったりします。
【39】枠の角を丸めるcss
.kadomarubox { ←自作名なので、自分がわかりやすい名前にしてOK！
max-width: 800px;
margin: 1rem;
padding: 1rem;
border: 6px solid #ccc; ←borderは必須
border-radius: 20px/20px; ←角丸の大きさ
}
- border-radius: 20px/20px;
- border: 6px solid #ccc;
- この2行が必要です。
- .kadomarubox は自作名なので、自分がわかりやすい名前にしてOK！
.kadomarubox2 { ←自作名なので変更OK!
color: #666;
font-size: 1.2rem;
line-height: 1.5rem;
max-width: 500px;
margin: 1rem;
padding: 2rem;
border: 18px solid #eee;
border-radius: 40px/80px; ←上下、左右の角丸値
}
- kadomarubox2 ←自作名なので、わかりやすい名前でOK!
- border-radius: 40px/80px; ←この場合は40pxが上部の設定値、80pxが下部の設定値。
.kadomarubox3 {
color: #333;
font-size: 0.9rem;
line-height: 1.4rem;
max-width: 600px;
margin: 1rem;
padding: 2rem 2rem 4rem 2rem;
border: 8px solid #ccc;
border-radius: 10% 60% 40% 20%; ←左上、右上、右下、左下の角丸値
}
- kadomarubox3 ←自作名なので変更OK!
- border-radius: 10% 60% 40% 20% ←角丸の大きさの単位は％でもOK!
【今回はここまでです】
今回は「センターで揃える」「改行させずに割り込ませるspan」「枠の角を丸めるcss」を解説しました。
次回は「確認はブラウザで」「FTPでアップロード」を解説する予定です。