§06-07…＜span＞
(01) 重要なキーワードではないが特定の書式を設定したい、という場合には<strong>や<em>などのタグ付けをするのではなく、<span>タグを用います。<span>タグは、<strong>や<em>と使用方法は同じですが、重要度は設定されないので、検索エンジンには一般のテキストと...
§06-06…強調＜strong＞＜em＞
(01) 段落(ブロックレベル要素)の中の一部のテキストを、強調したり色を付けたりしたい場合にはそのテキストを強調用のタグで囲みます。強調したキーワードは検索キーワードとしても利用されます。強調用のタグは強い順に<strong><em>の二つがあります。Webページ内の「砂風呂」を<strong>タグで囲んでください。更新...
§06-05…クラスの指定
§06-05…クラスの指定 (01) pセレクタを利用して<p>内の背景色を設定した場合、全てのp要素内に色が付いてしまいます。今回は、「新撰旅館は…」と「栄泉館の…」の段落にのみ背景色を設定する方法(一部のp要素のみ)を学習します。このようにある要素の、特定の個所にのみCSSを設定する場合には、HTML側の要素開始タグに「クラス名」を設定しま...
§06-04…{border}の部分指定
(01) <h1>の下部分だけに「太線」「実線」「#FFCC00」の{border}を引きます。下だけにborderを設定するには「border-bottom」プロパティを使います。CSSファイルの<h1>に関する部分を以下のように更新してから、Webページをブラウジングしましょう。 h1{ background-color:#9...
§06-03…幅{width}
<h3>タグ内の幅を5文字分(5em)にします。幅を変更するプロパティは「width」プロパティです。CSSファイルの<h3>に関する部分を以下のように更新してから、Webページをブラウジングしましょう。 h3{ background-color:#33CCFF; color:#000000; width:5em; }
§06-02…セレクタのグループ化
見出しにした段落(ブロックレベル要素)内のテキストは自動的に太字になります。これを解除するために<h1><h2><h3>タグに関するCSSにそれぞれ 「h1 {font-weight:normal;}」のように記述するのは面倒です。 そこで<h1><h2><h3>に対してまとめて書式...
§06-01…CSSの基礎4と場所の特定・準備
(01) 次のようなソースのWebページ「re05.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="" x...
§05-09…文字実体参照
(01) 「クラス対抗縄跳び大会」を「クラス対抗<縄跳び大会>」のように、不等号で囲む予定です。しかし、不等号(<>)はタグとして使用するので、HTML文の中にそのまま書き込むことはできないのです(使うと「<>」内の文字が表示されなくなる)。そのため「<」と表記したい際には「<」と入力します(キーワード...