この記事では、ドットインストール の無料レッスンの中で、HTML、CSSの基礎の基礎を体験しながらWebサイト制作の流れを学べるレッスンの学習ノートを記録しています。全11回分のレッスンはじめてのWeb制作 で、HTMLとCSSが学べます。 また、学んだことを元に、自分でもアレンジを加えて行こうと思います。
レッスン動画はこちら です。
はじめてのWeb制作(HTML /CSS)に戻る ドットインストール無料レッスンのページへ トップページに戻る プログラミングの疲れ目対策と視力維持に向けて 自己紹介ページ
このレッスンの完成版は、こちらより確認できます。https://nekofolio.com/dotinstall/htmlcss/lesson7/index.html
今回は、太郎くんの画像と名前と紹介文の全体に、太さ1pxの枠線を付けて行きます。これらを囲っているのがbodyタグなので、bodyにスタイルを当てて行きます。前回のレッスンのimg{ }の下に、body{ }を追記します。
設定するのは、・枠線とその太さ1px ・枠線の色gray ・枠線のスタイルを実線 ・枠線の丸めを8px
の4つのプロパティを設定して行きます。
枠の太さ を指定するborder-width というプロパティを書きます。 枠線を付けるには、色やスタイルも付ける必要があるので、追記して行きます。色 はborder-color プロパティで指定して、色はgrayとします。枠線のスタイル は実線にするので、border-style プロパティで、 プロパティの値をsolid(実線) と指定します。
枠線を丸めることも出来るので今回は8pxで丸めて見ます。border-radius のプロパティの値を8pxにしました。
注意!複数のプロパティを指定した場合は、全ての行の末尾に「セミコロン」が付いていることを確認する。
今回追記したコードです。
body{
border-width: 1px;
border-color: gray;
border-style: solid;
border-radius: 8px;
}
ブラウザで確認します。
この様に、グレーの丸囲み線が付きました。 この値を変えれば、見た目も変わるので、ちょっと実験してみます。
・枠線の太さを5pxに ・枠線の色を紫に ・枠線を点線に ・枠線の丸めを20pxに
ここまで変えれば、だいぶ見た目も変わるでしょう。 私は点線にするやり方が分からないので、検索して調べてみます。
こちらのHTMLタグリファレンス を使ってみます。 検索ボックスに「点線」と入れると、こちらのサイト が見付かりました。 どうやら、「dotted」を使うみたいです。 他にも二重線とか、破線とか、立体的な線とかあるみたいですね。
では、この様に設定しました。
body{
border-width: 5px;
border-color: purple;
border-style: dotted;
border-radius: 20px;
}
ブラウザで確認すると
なんか、ケバいですね。 元に戻します。
ここまでのコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>My Site</title>
<style>
img{
border-radius: 50%;
}
body{
border-width: 1px;
border-color: gray;
border-style: solid;
border-radius: 8px;
}
</style>
</head>
<body>
<img src="icon.png" alt="太郎のアイコン画像です">
<h1>山田太郎</h1>
<p>UI/UXデザイナー見習いです。日々の勉強、がんばっています。</p>
</body>
</html>
お疲れ様でした。
はじめてのWeb制作(HTML /CSS)に戻る ドットインストール無料レッスンのページへ トップページに戻る プログラミングの疲れ目対策と視力維持に向けて 自己紹介ページ
←前のレッスン 次のレッスン→