ご無沙汰しております。
アババイ制作部ヘタレ代表のYです。
暑い日が続きますが、いかがお過ごしでしょうか。
昨日は立秋だったというのに、全く秋の気配が感じられないですね・・・
この暑い時に涼しくなるようなネタも思い浮かばず、今日も懲りずに
頭がヒートアップしそうなネタをご用意致しました。
【本日のお題：スタイルについて】
スタイル…言わずもがな、体型や服装などのことではありません。
今日は「CSS：Cascading Style Sheets(カスケーディング・スタイル・シート)」について
お話を致します。
早速、長ったらしい横文字が出てきて嫌な気分になった方もいることと思います。
大層な名前が付いていますが、物凄く噛み砕いて大雑把に説明をしますと
「web上に表示する文字や画像の大きさ・色などを設定するもの」です。
(#´Д｀) ＜こんな説明じゃ解らん！
という方の為にもう少々お話を・・・
前々回の私の記事でHTMLのマークアップについてお話を致しました。
CSSはHTMLで書いたものに修飾をするものです。
(；´Д｀) ＜そんなん言われても、難しそうやん…
って思われた方。
実は、アメブロや他のブログサービスなどを使用されている方は、既に近いことをやっておられます。
ブログサービスなどで文字の色を変えるとき、マウスドラッグで色・大きさを変更したい文字を
指定して、ツールバーから使用するツールを選びますよね。
＜例＞
文字の色を青くする
文字を太くする
文字にアンダーラインを入れる
上記の操作を行うと編集画面上で、「font color」「strong」「u」という文字が出てきます。
残念ながらこれらはHTMLの一種なので、CSSではありませんが…
上記のことをCSSで行うと、こんな風になります。
＜html＞
＜body＞
＜style type="text/css"＞
/*文字の色を青くする*/
p#ex1 {
color:#0000cc;
}
/*文字を太くする*/
p#ex2 {
font-weight:bold;
}
/*文字にアンダーラインを入れる*/
p#ex3 {
text-decoration:underline;
}
＜/style＞
＜p id="ex1"＞文字の色を青くする＜/p＞
＜p id="ex2"＞文字を太くする＜/p＞
＜p id="ex3"＞文字にアンダーラインを入れる＜/p＞
＜/body＞
＜/html＞
※＜＞を半角に直してからブラウザでご確認下さい。
上記をコピペしてメモ帳などに貼り付け、拡張子を「.html」にして保存→プレビュー
一般的に、ウェブページを作成する際、CSSとHTMLは別々に編集をして、
HTMLからCSSを読み込んで表示をさせています。
(上記の例のように、同じファイル内で記述をすることも出来ます。)
これで何となくでも伝わったと思いたい…
もっと詳しく知りたい方は、g△△gle先生や、書籍の力を借りてみて下さい(笑；)
相変わらず長々と失礼致しました；
最後までお付き合い頂き、ありがとうございます。