七鍵＠楽天

コメント新着

うしまる＠ @ Re:タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技(08/21) タグの検索でぐぐってたらコチラに辿り着…

k.kyouka @ すきやき占い『しいたけ』の重要度27% 『しいたけ』…

なな@ Re:迷っています(11/01) レオ　がいいですよ☆★

マロン@ かわいいキュート

ｆｏｏｌｉｓｈ☆ｆｏｏ @ Re[1]:お久しぶりです。(07/15) ＞実演を踏まえてテストをしておりました…

バックナンバー

Dec , 2024
Nov , 2024

Oct , 2024

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Sep 14, 2004

前回の「タグってなに？」という話で、
「文字の大きさ、色、太字、見出し、画像表示、表、などなど、Ｗｅｂページに必要な命令はHTML タグにて命令する」
と解説を行いましたよね。
しかし実はこれ、正確な表現ではないのです(´･ω･`)
本来ＨＴＭＬは効率的に情報を発信できるように、
文書の構造を記述することが主な目的となっています。
ですから、そこに文字の色や形など見栄えに関する情報を記述してしまいますと、
せっかくの大事な情報が見栄えを表す記述（命令）に埋もれて不明確となり、
本来の趣旨から外れてしまうのです。

「ではどうやって、見栄えに関する命令を行えばいいの？」と当然思われるでしょう。
その答えがスタイルシートなのです(〃⌒▽⌒)
スタイルシートを使用することにより、
本文とは別に見栄えのルールを設定することができます。
そればかりではありません(￣▽￣人)
このスタイルシートを外部ファイルとして保存することにより、
Ｗｅｂサイト全体で統一した見栄えを実現することも可能ですし、
一度作成した見栄えを修正することも簡単となります。
早い話が、スタイルシートを使って文書のコンテンツや論理構造と表現のルールを分離することによって、
さまざまなメリットがうまれるというわけです。

ただ、残念ながら・・・
ここ「楽天」では外部ファイルとしてスタイルシートを保存することはできません(´･ω･`)
ページのスタイルを一括して指定する方法もとれません(´･ω･`)
ではなんのために？とおっしゃられるかもしれませんが
知っているにこしたことはありませんよね(〃⌒▽⌒)
見た目の効果だけでもタグだけで記述するよりはるかにいろいろなことができます。
しっかり基本を覚えましょう(〃⌒▽⌒)

まずは用語の定義からです。

{

color

#0000ff

;

font-size

20px

;

}

セレクタ

プロパティ

値

プロパティ

値

宣言

例として要素名「P」（段落を表すタグです）の文字色を「#0000ff」（青色）、
文字の大きさを「20px」のように表示するスタイルシートについて見てみましょう。
最初の「p」（要素名）のことをセレクタ（Selector）と呼び、
見栄え（スタイル）を適用する対象を記述します。
そして、「{」と「}」で囲まれた範囲を宣言（Declaration）と呼びます。
宣言の中にはプロパティとその値をコロン（ : ）で区切って記述します。
プロパティと値のペアはセミコロン（ ; ）で区切って複数記述することもできます。

ただし・・・
今のところ「楽天」では以上のような記述はできません(´･ω･`)
個々のタグ内に「style」属性として見栄え（スタイル）に関する情報を指定するしかないのです。
個々に見栄えを指定しますので・・・
同じ種類のタグ（要素タイプ）でも他の場所にあるタグ（要素）にはその見栄えが反映されることはありません。
また、見栄え（スタイル）を適用する対象は明らかなので、
以下のようにセレクタは記述せず、宣言のみを記述します。

□sample.html
<head> <title></title> </head> <body> <p style=" color:#0000ff;font-size:20px; "> ここの段落にスタイルが適用されます。 </p> </body> </html>

以上、楽天ではだめ、楽天ではだめ・・・ばかりの説明でしたが(´･ω･`)
理解できたでしょうか？
大事なのは・・・
HTMLは文書の構造を表すものであって見栄えを表すものでは無い、ということです。
見栄えはスタイルシートを使用し表現するものなのですね(〃⌒▽⌒)

では、また明日ー(ﾟ▽^*)ﾉ⌒☆

お気に入りの記事を「いいね！」で応援しよう