ホームページの作り方 ～応用編26～
2020年03月01日
みなさま、こんにちはー(*´ω｀*)ﾉ
花です(*´ω｀*)
いよいよ３月に入りましたね(*´ω｀*)
３月と言えば、私は３月４日に母の誕生日があるので、こんなときだからこそ盛大に家族みんなでお祝いしたいと思います(*´ω｀*)
さて、その１日前は３月３日ということで、ひな祭りがあります！
我が家はちゃんとした立派なひな人形はなかったですが、私が小さいころ母が手作りの工作キットで５段くらいの雛人形を作り飾っていました。
といっても、年中飾っていたので、ありがたみは正直なかったし、いまだに結婚できないのはもしかしてそれのせい！？なんて思うことがたまにあります(笑)
そんな思い出の薄い(笑)ひな祭りですが、小さいころからずっと思っていたことがあります。
菱餅ってどんな味なの！？
何故か特に理由もなく食べたことがなくて、大人になってから自分で買えばいいんですけど、なんか怖くて買う気になれず、結局私生きてきて一度も食べたことがないんです＞＜
一度食べてみたい＞＜
でも、美味しいイメージがあの見た目から湧かない＞＜
だから、買う気になれない＞＜
という感じです(笑)
そんなわけで一度も食べたことがない菱餅ですが、いつかチャレンジしようと思います！
それでは、本日もホームページのお話です。
今回紹介するプロパティの使用頻度は、上中下で言うと中といったところでしょうか。
なかなかに使う場面が見られるプロパティなので、こちらもぜひ覚えておきましょうね(*´ω｀*)
では、質問です。
今回は、ホームページにかかわりがないようでめちゃくちゃある内容の質問です。
ホームページを作る際、色というものはやはり大事です。
ホームページの作成依頼をしてきた依頼者の希望に沿うように作る事は当たり前ですが、基本的に依頼主は大まかに「こんな感じでー」のような依頼が多いのです。
そのとき、こちらでサンプルをいくつか用意することがあります。
そんなときに重要になるのが、「色」。
大まかに赤でーと言われて、全面赤なんてことをする人はまずいないでしょう。
と考えると、赤を際立たせるために他の色、具体的に言えば「反対色」を使うことも割と多いのです。
そこで、この反対色、正式な名前があります。
それは次の内どれでしょう？
①ほしょく ②かしょく ③ようしょく ④わしょく
正解は、最後に(*´ω｀*)ﾉ
さて、今回紹介するプロパティは、
text-decoration（テキストデコレーション）
というプロパティです。
このプロパティは、文字列に下線などの線を付けたり、その線種、色を指定するプロパティとなっています。
そのため、
線の内容 → text-decoration-line
線種 → text-decoration-style
線の色 → text-decoration-color
と分解して一つ一つ指定することもできます。
具体例を出すと、
p {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #ff0000;
}
と書いてもいいし、
p {
text-decoration: underline solid #ff0000;
}
とまとめて書いてもいいです。
さて、では具体的な説明に入ります。
まず、text-decoration-lineですが、値は５つあります。
none → 線を消す
underline → 下線を引く
overline → 上線を引く
line-through → 中央を通る線（取り消し線）を引く
blink → テキストが点滅する
以上５つですが、最後のblinkに関しては、サポートされていないブラウザが多いため使用しない方がいいというよりも使用しないでくださいと言った方がいいかもしれません。
じゃあ、文字列を点滅させたいときはどうしたらいいかという話になりますが、はっきり言います。
やめとけー(*´ω｀*)
目立つけど見る人に嫌われちゃうぞっ(´・ω・｀)
嫌われるとどうなるかというと、そのホームページを見てもらえる確率が減ります(´・ω・｀)
じゃあ、なんで嫌われるかという話ですが、わかりやすくいえば、鬱陶しいからです。
なので、本当におすすめしません。
話は戻って、underlineとoverlineとline-throughは意味がわかると思うのですが、問題はnoneです。
どういった時に使うかというと、リンクタグをご紹介したのを覚えているでしょうか？
それに使うのです。
リンクタグは、リンク先などの対象になる文字列などですが、これを書くと、必然的に下線が引かれたと思います。
これを強制的に消す方法として、このnoneが使われるということです。
以下に具体的なＨＴＭＬとＣＳＳのコードとどうブラウザで見えるかの画像を用意しました。
以上が、text-decoration-lineのお話です。
次回は、線種についてと色についてお話しますね(*´ω｀*)
それでは、今回はこの辺でー(*´ω｀*)ﾉ
質問の答えは、
①の補色でしたー(*´ω｀*)
~~~ヾ(*'▽'*)o マタネー♪
花です(*´ω｀*)
いよいよ３月に入りましたね(*´ω｀*)
３月と言えば、私は３月４日に母の誕生日があるので、こんなときだからこそ盛大に家族みんなでお祝いしたいと思います(*´ω｀*)
さて、その１日前は３月３日ということで、ひな祭りがあります！
我が家はちゃんとした立派なひな人形はなかったですが、私が小さいころ母が手作りの工作キットで５段くらいの雛人形を作り飾っていました。
といっても、年中飾っていたので、ありがたみは正直なかったし、いまだに結婚できないのはもしかしてそれのせい！？なんて思うことがたまにあります(笑)
そんな思い出の薄い(笑)ひな祭りですが、小さいころからずっと思っていたことがあります。
菱餅ってどんな味なの！？
何故か特に理由もなく食べたことがなくて、大人になってから自分で買えばいいんですけど、なんか怖くて買う気になれず、結局私生きてきて一度も食べたことがないんです＞＜
一度食べてみたい＞＜
でも、美味しいイメージがあの見た目から湧かない＞＜
だから、買う気になれない＞＜
という感じです(笑)
そんなわけで一度も食べたことがない菱餅ですが、いつかチャレンジしようと思います！
それでは、本日もホームページのお話です。
今回紹介するプロパティの使用頻度は、上中下で言うと中といったところでしょうか。
なかなかに使う場面が見られるプロパティなので、こちらもぜひ覚えておきましょうね(*´ω｀*)
では、質問です。
今回は、ホームページにかかわりがないようでめちゃくちゃある内容の質問です。
ホームページを作る際、色というものはやはり大事です。
ホームページの作成依頼をしてきた依頼者の希望に沿うように作る事は当たり前ですが、基本的に依頼主は大まかに「こんな感じでー」のような依頼が多いのです。
そのとき、こちらでサンプルをいくつか用意することがあります。
そんなときに重要になるのが、「色」。
大まかに赤でーと言われて、全面赤なんてことをする人はまずいないでしょう。
と考えると、赤を際立たせるために他の色、具体的に言えば「反対色」を使うことも割と多いのです。
そこで、この反対色、正式な名前があります。
それは次の内どれでしょう？
①ほしょく ②かしょく ③ようしょく ④わしょく
正解は、最後に(*´ω｀*)ﾉ
さて、今回紹介するプロパティは、
text-decoration（テキストデコレーション）
というプロパティです。
このプロパティは、文字列に下線などの線を付けたり、その線種、色を指定するプロパティとなっています。
そのため、
線の内容 → text-decoration-line
線種 → text-decoration-style
線の色 → text-decoration-color
と分解して一つ一つ指定することもできます。
具体例を出すと、
p {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #ff0000;
}
と書いてもいいし、
p {
text-decoration: underline solid #ff0000;
}
とまとめて書いてもいいです。
さて、では具体的な説明に入ります。
まず、text-decoration-lineですが、値は５つあります。
none → 線を消す
underline → 下線を引く
overline → 上線を引く
line-through → 中央を通る線（取り消し線）を引く
blink → テキストが点滅する
以上５つですが、最後のblinkに関しては、サポートされていないブラウザが多いため使用しない方がいいというよりも使用しないでくださいと言った方がいいかもしれません。
じゃあ、文字列を点滅させたいときはどうしたらいいかという話になりますが、はっきり言います。
やめとけー(*´ω｀*)
目立つけど見る人に嫌われちゃうぞっ(´・ω・｀)
嫌われるとどうなるかというと、そのホームページを見てもらえる確率が減ります(´・ω・｀)
じゃあ、なんで嫌われるかという話ですが、わかりやすくいえば、鬱陶しいからです。
なので、本当におすすめしません。
話は戻って、underlineとoverlineとline-throughは意味がわかると思うのですが、問題はnoneです。
どういった時に使うかというと、リンクタグをご紹介したのを覚えているでしょうか？
それに使うのです。
リンクタグは、リンク先などの対象になる文字列などですが、これを書くと、必然的に下線が引かれたと思います。
これを強制的に消す方法として、このnoneが使われるということです。
以下に具体的なＨＴＭＬとＣＳＳのコードとどうブラウザで見えるかの画像を用意しました。
以上が、text-decoration-lineのお話です。
次回は、線種についてと色についてお話しますね(*´ω｀*)
それでは、今回はこの辺でー(*´ω｀*)ﾉ
質問の答えは、
①の補色でしたー(*´ω｀*)
~~~ヾ(*'▽'*)o マタネー♪
タグ：CSS
この記事へのコメント
コメントを書く
