Secret 004 ふがふご

Secret 004 ふがふご


「ふがふご……」


 他のページへのリンクを用意しますね。さっきは、『お問合せ』と『会社案内』を一緒にしてしまったけれど、内容の濃さを調整する為に、別々にすることにしたわ。蕾音さんを見習わないと。

 それで、作るのは、『リスト』と呼ばれるものです。『li』各々で、『ホーム』、『製品紹介』、『会社案内』、『お問合せ』の順不同の三つのメニューがひとつのリストグループで、順は問わない『ul』で、まとまったリストだと示しているみたい。

 ――――――――――――――――

 <body>

 <h1>マシロデザインカンパニー</h1>


 <ul>

 <li>ホーム</li>

 <li>製品紹介</li>

 <li>会社案内</li>

 <li>お問合せ</li>

 </ul>


 <h2>新着情報</h2>

 <h3>新商品のご案内</h3>

 ――――――――――――――――


 後で分からなくならないように、『コメント』を入れましょう。これは、見られませんよ。

 ――――――――――――――――

 <body>

 <h1>マシロデザインカンパニー</h1>


 <!-- メインメニュー -->

 <ul>

 <li>ホーム</li>

 <li>製品紹介</li>

 <li>会社案内</li>

 <li>お問合せ</li>

 </ul>


 <h2>新着情報</h2>

 ――――――――――――――――


 メインメニューができました。

 ================

 マシロデザインカンパニー

 

 ・トップ

 ・製品紹介

 ・会社案内

 ・お問合せ


 新着情報

 ・・・

 ================

 参照

(http://uhi.sa-suke.com/md009-1.jpg)

(http://uhi.sa-suke.com/md009-2.jpg)


 リストマーカーを消した方がいいよね。

 ――――――――――――――――

  color:red; /* 段落の文字色を赤にする */

 }

 li {

  list-style-type:none; /* リストマーカー無しにする */

 }


 ――――――――――――――――

 参照 CSSを変えたため、HTMLに変化は最初からある。


 ================

 マシロデザインカンパニー


 トップ

 製品紹介

 会社案内

 お問合せ

 

 新着情報

 ・・・

 ================

 参照

(http://uhi.sa-suke.com/md010-1.jpg)

(http://uhi.sa-suke.com/md010-2.jpg)


 メニューが縦に並んでいるのを横にするわ。

 ――――――――――――――――

  color:red; /* 段落の文字色を赤にする */

 li {

list-style-type:none;      /* リストマーカー無しにする  */

  display:inline; /* リスト項目をインライン表示にする  */

 }


 ――――――――――――――――


「ん? なんでかしら? 上手くいかないわ」        (*5)

「ふがふごって何をなさっているの? 倉橋さん」

「ふがふご? 呼吸……呼吸……。そうか! 全角のスペースが入っているんだわ」


 さくさくと修正した。

 スタイルシートの形を整えるのって何だか楽しい。


 ================

 マシロデザインカンパニー


 ホーム 製品紹介 会社案内 お問合せ

 

 新着情報

 ・・・

 ================

 参照 http://caxap.life.coocan.jp/index_007.html

(http://uhi.sa-suke.com/md011-1.jpg)

(http://uhi.sa-suke.com/md011-2.jpg)

 

「やったわ。成功!」


 思わず声を上げてしまったわ。   (*6)

 雷音さんが、こちらをちらりと見る。


「えーと、もっとお話ししながらお仕事しませんか?」

「いえ……」


 あー! ツンデレだわツンツンだわ。室生さんにはあんなにべたべたなのにー。

 いいや、お仕事しようっと。


『index.html』、『style.css』のつながりを変えてみるわ。『menu』という『id名』が付けられた要素の下にある『li要素』にスタイルを適用させるのね。

 ――――――――――――――――

 <!-- メインメニュー -->

 <ul id="menu">

 <li>ホーム</li>

 <li>製品紹介</li>

 ――――――――――――――――

 ――――――――――――――――

  color:red; /* 段落の文字色を赤にする */

 }

 #menu li {

   list-style-type:none;  /* リストマーカー無しにする */

 display:inline; /* リスト項目をインライン表示にする */

 }

 ――――――――――――――――

 見た目の変化がなければ、オッケーっと。

 リンク先のページを作りましょう。『product.html』、『profile.html』、『contact.html』をそれぞれ、『製品紹介』、『会社案内』、『お問合せ』に仮の三ページ作ります。例えば初期画面として、こんな感じ。

 ――――――――――――――――

 <!DOCTYPE html>

 <html lang=“ja”>

 <head>

 <meta charset="UTF-8">

 <title>製品紹介|マシロ福祉部</title>

 </head>

 <body>

 <h1>製品紹介</h1>

 </body>

 </html>

 ――――――――――――――――

 これは『製品紹介』の基本となるページ。

 ================

 製品紹介


 ================

 参照 http://caxap.life.coocan.jp/product.html

(http://uhi.sa-suke.com/md012.jpg)


 『body』にはこれしか書いていないからね。『index.html』は、メインメニューにハイパーリンクをはります。

 ――――――――――――――――

 <!-- メインメニュー -->

 <ul id="menu">

 <li><a href="index.html">ホーム</a></li>

 <li><a href="product.html">製品紹介</a></li>

 <li><a href="profile.html">会社案内</a></li>

 <li><a href="contact.html">お問合せ</a></li>

 </ul>

 ――――――――――――――――

 ================

 ホーム 製品紹介 会社案内 お問合せ

 ――― ―――― ―――― ――――


 新着情報

 ・・・

 ================

 参照 http://caxap.life.coocan.jp/index_008.html

(http://uhi.sa-suke.com/md013.jpg)


 相対パスで、ファイル名だけでもリンクができたわ。絶対パスで、URLつまりは、Uniform Resource Locatorを指示してもいいみたい。四つの項目に下線が付いて、文字の色が青くなったわ。リンクがある証拠ね。ここで、『製品紹介』をクリックすると、『製品紹介』のページに行くの。一度行くと紫色に変わるわ。


「あー、お茶飲みたい。でも我慢よ。CSSをやっつけてしまいたいわ」

「やあ、倉橋さん。ちょっと見せてご覧? 進んでいるみたいだね。自力で偉いな」


「あら、兄さま、贔屓はよしてよ。私の会社案内とお問合せを分けるのを真似されて、ちょっとつまらないな」

「こーら、デコピンするぞ。皆、程々に休憩を取りながらやってな」


 では! と超人ネオみたいに素早くさって行かれてしまった。何をそんなに急いで行かれるのだろうか? もしかして、真白玉石社長の身に何かあったのでは……。それともお母様に何かありましたら、大変だわ……!

 ガタリと席を立ち、エレベーターホールにいた室生天結さんをつかまえた。


「何か?」

「ええ、何かあったのではないかと思いまして」

「大丈夫。君は、仕事を続けていて」

 ぽんぽん……。

 きゃああー! 今、肩に肩がいや、違っ、室生天結さんの大きな掌が私の頭を叩いたわ。きゃああー。今夜は、眠れないのかも知れませんよっ。ぷんすか。


「どうしたの? 顔色が悪くなったよ」

「そうですね。し、仕事がしたい病みたいです。行って参ります!」

「ほいほーい」


 CSSは、結構複雑みたいね。がんばらないと。

 ――――――――――――――――

 color:red; /*  段落の文字色を赤にする  */

 }


 /*============================================

 メインメニュー

 ============================================*/

 ul#menu {

 width:960px; height:50px; /*メインメニュー部分の幅と高さ*/

 }

 #menu li {

 list-style-type:none; /*リストマーカー無しにする*/

 display:inline; /*リスト項目をインライン表示にする*/

 float:left; /*リスト項目を横に並べる*/

 }

 #menu li a {

 display:block; /*リンク部分をブロック表示にする*/

 width:240px; height:35px; /*幅と高さ*/

 }


 ――――――――――――――――


 こうすると、リンクの項目が広がってリンクの配置がいいわ。

 ================

 ホーム   製品紹介   会社案内   お問合せ

 ―――   ――――   ――――   ――――


 新着情報

 ・・・

 ================

 参照 http://caxap.life.coocan.jp/index_009.html

(http://uhi.sa-suke.com/md014-1.jpg)

(http://uhi.sa-suke.com/md014-2,jpg)


 うふふ。カラム落ちもなしっと。240×4=960っと。


「CSSは、慣れると便利だとうかがったから、がんばらないとね! 万年コピー取り、脱出口見えたわ! 星まで。いや、夜空の星でした……」


 キラーン!




――――――――――――――――

脚注 (*5)、(*6)、初稿と異なります。

  • Xで共有
  • Facebookで共有
  • はてなブックマークでブックマーク

作者を応援しよう!

ハートをクリックで、簡単に応援の気持ちを伝えられます。(ログインが必要です)

応援したユーザー

応援すると応援コメントも書けます

新規登録で充実の読書を

マイページ
読書の状況から作品を自動で分類して簡単に管理できる
小説の未読話数がひと目でわかり前回の続きから読める
フォローしたユーザーの活動を追える
通知
小説の更新や作者の新作の情報を受け取れる
閲覧履歴
以前読んだ小説が一覧で見つけやすい
新規ユーザー登録無料

アカウントをお持ちの方はログイン

カクヨムで可能な読書体験をくわしく知る