ホームページの作り方 〜応用編14〜
2019年11月09日
みなさま、こんにちはー(*´ω`*)ノ
花です(*´ω`*)
11月に入ってもう8日目ですね!
ほんと1年があっという間になって、私自身年を取ったなぁって感じます(´・ω・`)
ちなみに、1年があっという間に感じるようになるのは、日々の生活にときめきがなくなるからだそうです。
結局、日々の生活に慣れてしまって、「こなす」だけの生活になってしまった結果、あっという間に感じるようになるらしいです(´・ω・`)
さらに、体感と実際の月日が同じくらいに感じられるようになり、そこから加速していくわけですが、その同じ感覚になるのが19歳くらいらしいです。
つまり、年をとればとるほど「こなす」生活になっていくため時間の感覚は加速していくわけですね(´・ω・`)
逆に言えば、これってときめきを増やすことによって加速は緩められるということになります。
恋をしたり、育児をしたりってことなんでしょうね(*´ω`*)
ということで、「チコちゃんに叱られる!」からの受け売りでしたー(笑)
さて、本日は「ホームページの作り方 〜応用編14〜」となります。
今回は線の引き方のお話をしたいと思います。
では、質問です。
ちょっとだけ昨日の復習(*´ω`*)
横幅を決めるのは、width。
縦幅を決めるのは、height。
さて、それぞれの読み方はどう読むだったでしょうか?
正解は、横幅は、「ウィズ」もしくは「ウィズス」。
縦幅は、「ハイト」です。
みなさん覚えていたでしょうか?(*´ω`*)
ではここからが本題。
線を引くプロパティは、borderというプロパティになります。
ですが、線と一概に言っても、
太さ
線種
色
と3種類あります。
ということで、それぞれのプロパティを書いてみると、
線の太さ → border-width
線の線種 → border-style
線の色 → border-color
となります。
これを、実際に書いてみると、
となります。
border-widthに関しては、線の太さなので、px(ピクセル)単位で太さを指定してあげるとよいです。
また、border-styleは、色んな線種があります。
今回使った、solidって値は、普通の一本線。
ほかに、
double → 2本線
dashed → 破線
dotted → 点線
など、他にもあるので、興味がある方はぜひ調べてみてください。
border-colorはそのままですね。
色を指定します。
ただ、これを毎回全て書くとなると正直かなりめんどくさいと思いませんか?
実はこれ、まとめることができちゃうんです!
書き方は以下のようになります。
border: 1px solid #ff0000;
1pxとsolidと#ff0000の間はしっかり半角スペースをあけることを忘れないでくださいね!
とここまでが線の引き方になるのですが、じゃあ、右だけ線を引きたいとか、左だけもっと太くしたいとか上だけ色を変えたいとかそんな場合どうするかっていう方法は、また次回のお話になります(*´ω`*)
ということで、今回はこの辺でー(*´ω`*)ノ
~~~ヾ(*'▽'*)o マタネー♪
花です(*´ω`*)
11月に入ってもう8日目ですね!
ほんと1年があっという間になって、私自身年を取ったなぁって感じます(´・ω・`)
ちなみに、1年があっという間に感じるようになるのは、日々の生活にときめきがなくなるからだそうです。
結局、日々の生活に慣れてしまって、「こなす」だけの生活になってしまった結果、あっという間に感じるようになるらしいです(´・ω・`)
さらに、体感と実際の月日が同じくらいに感じられるようになり、そこから加速していくわけですが、その同じ感覚になるのが19歳くらいらしいです。
つまり、年をとればとるほど「こなす」生活になっていくため時間の感覚は加速していくわけですね(´・ω・`)
逆に言えば、これってときめきを増やすことによって加速は緩められるということになります。
恋をしたり、育児をしたりってことなんでしょうね(*´ω`*)
ということで、「チコちゃんに叱られる!」からの受け売りでしたー(笑)
さて、本日は「ホームページの作り方 〜応用編14〜」となります。
今回は線の引き方のお話をしたいと思います。
では、質問です。
ちょっとだけ昨日の復習(*´ω`*)
横幅を決めるのは、width。
縦幅を決めるのは、height。
さて、それぞれの読み方はどう読むだったでしょうか?
正解は、横幅は、「ウィズ」もしくは「ウィズス」。
縦幅は、「ハイト」です。
みなさん覚えていたでしょうか?(*´ω`*)
ではここからが本題。
線を引くプロパティは、borderというプロパティになります。
ですが、線と一概に言っても、
太さ
線種
色
と3種類あります。
ということで、それぞれのプロパティを書いてみると、
線の太さ → border-width
線の線種 → border-style
線の色 → border-color
となります。
これを、実際に書いてみると、
となります。
border-widthに関しては、線の太さなので、px(ピクセル)単位で太さを指定してあげるとよいです。
また、border-styleは、色んな線種があります。
今回使った、solidって値は、普通の一本線。
ほかに、
double → 2本線
dashed → 破線
dotted → 点線
など、他にもあるので、興味がある方はぜひ調べてみてください。
border-colorはそのままですね。
色を指定します。
ただ、これを毎回全て書くとなると正直かなりめんどくさいと思いませんか?
実はこれ、まとめることができちゃうんです!
書き方は以下のようになります。
border: 1px solid #ff0000;
1pxとsolidと#ff0000の間はしっかり半角スペースをあけることを忘れないでくださいね!
とここまでが線の引き方になるのですが、じゃあ、右だけ線を引きたいとか、左だけもっと太くしたいとか上だけ色を変えたいとかそんな場合どうするかっていう方法は、また次回のお話になります(*´ω`*)
ということで、今回はこの辺でー(*´ω`*)ノ
~~~ヾ(*'▽'*)o マタネー♪
タグ:CSS
この記事へのコメント
コメントを書く