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; /* リストマーカー無しにする */
}
――――――――――――――――
参照 ＣＳＳを変えたため、ＨＴＭＬに変化は最初からある。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
マシロデザインカンパニー
トップ
製品紹介
会社案内
お問合せ
新着情報
・・・
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
参照
（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; /* リスト項目をインライン表示にする */
}
――――――――――――――――
「ん？ なんでかしら？ 上手くいかないわ」 （＊５）
「ふがふごって何をなさっているの？ 倉橋さん」
「ふがふご？ 呼吸……呼吸……。そうか！ 全角のスペースが入っているんだわ」
さくさくと修正した。
スタイルシートの形を整えるのって何だか楽しい。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
マシロデザインカンパニー
ホーム 製品紹介 会社案内 お問合せ
新着情報
・・・
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
参照 http://caxap.life.coocan.jp/index_007.html
（http://uhi.sa-suke.com/md011-1.jpg）
（http://uhi.sa-suke.com/md011-2.jpg）
「やったわ。成功！」
思わず声を上げてしまったわ。 （＊６）
雷音さんが、こちらをちらりと見る。
「えーと、もっとお話ししながらお仕事しませんか？」
「いえ……」
あー！ ツンデレだわツンツンだわ。室生さんにはあんなにべたべたなのにー。
いいや、お仕事しようっと。
『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)
相対パスで、ファイル名だけでもリンクができたわ。絶対パスで、ＵＲＬつまりは、Uniform Resource Locatorを指示してもいいみたい。四つの項目に下線が付いて、文字の色が青くなったわ。リンクがある証拠ね。ここで、『製品紹介』をクリックすると、『製品紹介』のページに行くの。一度行くと紫色に変わるわ。
「あー、お茶飲みたい。でも我慢よ。ＣＳＳをやっつけてしまいたいわ」
「やあ、倉橋さん。ちょっと見せてご覧？ 進んでいるみたいだね。自力で偉いな」
「あら、兄さま、贔屓はよしてよ。私の会社案内とお問合せを分けるのを真似されて、ちょっとつまらないな」
「こーら、デコピンするぞ。皆、程々に休憩を取りながらやってな」
では！ と超人ネオみたいに素早くさって行かれてしまった。何をそんなに急いで行かれるのだろうか？ もしかして、真白玉石社長の身に何かあったのでは……。それともお母様に何かありましたら、大変だわ……！
ガタリと席を立ち、エレベーターホールにいた室生天結さんをつかまえた。
「何か？」
「ええ、何かあったのではないかと思いまして」
「大丈夫。君は、仕事を続けていて」
ぽんぽん……。
きゃああー！ 今、肩に肩がいや、違っ、室生天結さんの大きな掌が私の頭を叩いたわ。きゃああー。今夜は、眠れないのかも知れませんよっ。ぷんすか。
「どうしたの？ 顔色が悪くなったよ」
「そうですね。し、仕事がしたい病みたいです。行って参ります！」
「ほいほーい」
ＣＳＳは、結構複雑みたいね。がんばらないと。
――――――――――――――――
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）
うふふ。カラム落ちもなしっと。２４０×４＝９６０っと。
「ＣＳＳは、慣れると便利だとうかがったから、がんばらないとね！ 万年コピー取り、脱出口見えたわ！ 星まで。いや、夜空の星でした……」
キラーン！
――――――――――――――――
脚注 （＊５）、（＊６）、初稿と異なります。
新規登録で充実の読書を
- マイページ
- 読書の状況から作品を自動で分類して簡単に管理できる
- 小説の未読話数がひと目でわかり前回の続きから読める
- フォローしたユーザーの活動を追える
- 通知
- 小説の更新や作者の新作の情報を受け取れる
- 閲覧履歴
- 以前読んだ小説が一覧で見つけやすい
アカウントをお持ちの方はログイン
ビューワー設定
文字サイズ
背景色
フォント
組み方向
機能をオンにすると、画面の下部をタップする度に自動的にスクロールして読み進められます。
応援すると応援コメントも書けます