飛行機・空港 (32)
さて、前回は構造を考えながら上のメニューを作りました!

今回は、左側のメニューを作っていこうと思うんですが、上のメニューとはちょっと違います・・・

そう、ページ内でリンクを貼るんです。
これも覚えておくと 、最近流行りのスクロール型のホームページだって作れちゃうんですよ??

では、今回もサクッとやっていきましょう(^o^) 

スポンサードリンク


まず作業するページですが・・・

前回作った「info.html」を使用します。

と、言っても中身は今まで作ってきたindex.htmlのままなので見た目は変わりないと思います。

make071
 (見た目は変わらないけど・・・赤枠部分info.htmlです)

で、その中身を一回全部消しちゃいます!!

久々にコードをいじりますね?

コーソを見ていくと・・・

<div id="page_content" class="auto-style2">

というのが出てきます。きっとあるので探してください。
僕のコードだと70ー90行目あたりにあります。

そしたらその下をコードをずーーーーーっと、次に出てくる</div>の上まで消していきます。
※</div>は消さないでね。

消えたら、消した所に「これだけ消えました」など適当な文字を入れておきましょう。

make072
(スクショも入れておきました。79-81行目が今回の作業エリアです)

ここで、デザインを確認した時に、左側のメニューのおかしくなることがありますが、気にしなくて大丈夫です。
(何故か、info.htmlを見ると大丈夫だったりするので・・・)

次に、何か長い文章を打ち込みたいと思います。

今回は仮に・・・「日本国憲法」の一部を使いたいと思います。

では、適当なところから日本国憲法の全文から10条くらいまで探して打ち込んで見ましょう。
(まぁ、コピペでも良いんですが・・・)

make073

貼り付きました・・・なんかホームページって感じですよね?

実はここでテクニックがひとつあります。(最初に言え!!)
先ほど打ち込んだ「これだけ消えました」を消さずに、日本国憲法を挿入して、最後に「これだけ消えました」を消すという方法を使わないと、「あれ?入力できない!?」って事になったりします。

ちなみに、上の画像だと文章の回りが少し開いてますよね?
これも少し小細工がしてあって、文章内の好きなとろこをクリックしてから、左側のcssプロパティ→paddingのところに10pxと打ち込んでいます。

make074

(paddingは箱の内側にある余白を指定する部分です。)

さて、ここからコードを再びいじっていきます。
デザイン画面でもできるんですが・・・・まぁ、コードをいじっていきます。

ここでは大きく2つの場所を変えるので1つずつ見ていきます。

1つ目:本文内

コードを見ると、真ん中あたりに「お、日本国憲法だ!!」という部分があります。

ここに仕掛けを書き足していきます。※ちなみにこの仕掛は「アンカー」といいます。
基本は、
<a name="アンカー名">文字</a>
です。

分かりにくいと思うので、実際にやってみると、
<div id="page_content" class="auto-style2">
<a name="zenbun">日本国憲法</a><br />
(昭和二十一年十一月三日憲法)<br />
<br />
<br />
  日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。<br />
 日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上から永遠に除去しようと努めてゐる国際社会において、名誉ある地位を占めたいと思ふ。われらは、全世界の国民が、ひとしく恐怖と欠乏から免かれ、平和のうちに生存する権利を有することを確認する。<br />
 われらは、いづれの国家も、自国のことのみに専念して他国を無視してはならないのであつて、政治道徳の法則は、普遍的なものであり、この法則に従ふことは、自国の主権を維持し、他国と対等関係に立たうとする各国の責務であると信ずる。<br />
 日本国民は、国家の名誉にかけ、全力をあげてこの崇高な理想と目的を達成することを誓ふ。<br />
<br />
   <a name="j_1">第一章 天皇</a><br />
<br />
第一条  天皇は、日本国の象徴であり日本国民統合の象徴であつて、この地位は、主権の存する日本国民の総意に基く。<br />
第二条  皇位は、世襲のものであつて、国会の議決した皇室典範 の定めるところにより、これを継承する。<br />
第三条  天皇の国事に関するすべての行為には、内閣の助言と承認を必要とし、内閣が、その責任を負ふ。<br />
第四条  天皇は、この憲法の定める国事に関する行為のみを行ひ、国政に関する権能を有しない。<br />
○2  天皇は、法律の定めるところにより、その国事に関する行為を委任することができる。<br />
第五条  皇室典範 
の定めるところにより摂政を置くときは、摂政は、天皇の名でその国事に関する行為を行ふ。この場合には、前条第一項の規定を準用する。<br />
第六条  天皇は、国会の指名に基いて、内閣総理大臣を任命する。<br />
○2  天皇は、内閣の指名に基いて、最高裁判所の長たる裁判官を任命する。<br />
第七条  天皇は、内閣の助言と承認により、国民のために、左の国事に関する行為を行ふ。<br />
一  憲法改正、法律、政令及び条約を公布すること。<br />
二  国会を召集すること。<br />
三  衆議院を解散すること。<br />
四  国会議員の総選挙の施行を公示すること。<br />
五  国務大臣及び法律の定めるその他の官吏の任免並びに全権委任状及び大使及び公使の信任状を認証すること。<br />
六  大赦、特赦、減刑、刑の執行の免除及び復権を認証すること。<br />
七  栄典を授与すること。<br />
八  批准書及び法律の定めるその他の外交文書を認証すること。<br />
九  外国の大使及び公使を接受すること。<br />
十  儀式を行ふこと。<br />
第八条  皇室に財産を譲り渡し、又は皇室が、財産を譲り受け、若しくは賜与することは、国会の議決に基かなければならない。<br />
   <a name="j_2">第二章 戦争の放棄</a><br />
<br />
第九条 
 日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。<br />
○2  前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。国の交戦権は、これを認めない。<br />
   <a name="3">第三章 国民の権利及び義務</a><br />
<br />
第十条  日本国民たる要件は、法律でこれを定める。</div>
</div>
赤字の部分が追記した仕掛け(=アンカー)です。 なんとなくOKでしょうか?


2つ目;メニュー
続いて左側のメニューですが、今の状態だと6コ(6行目まで)表示されているので、3コにしてリンクも貼っていきますよー

いじるコードは、日本国憲法の上にある
<div id="left_col">
<ul>
<li class="left_col"><a href="#">一行</a></li>
<li class="left_col"><a href="#">二行目</a></li>
<li class="left_col"><a href="#">三行目</a></li>
<li class="left_col">四行目</li>
<li class="left_col">五行目</li>
<li class="left_col">六行目</li>
</ul>
</div>
の部分です。

これを・・・
<div id="container">
<div id="left_col">
<ul>
<li class="left_col"><a href="#前文">前文</a></li>
<li class="left_col"><a href="#j_1">第一章</a></li>
<li class="left_col"><a href="#j_2">第二章</a></li>
<li class="left_col"><a href="#j_3">第三章</a></li>
</ul>
</div>
に書き換えます。
なんかスッキリしましたねぇ

これで保存すると・・・
make075

こんな感じになって、左側のメニューを押すと、本文が移動するようになります。

これが、ページ内リンクです

ちなみに、アンカーのj1とかzenbunは好きな名前でいいのですが、
  • 半角英数字と_などの記号数種類
  • 最初の一文字目は必ずアルファベット
というお約束があるようです。

今回、久々にコードをいじりましたがいかがだったでしょうか??
やっぱりホームページ作りは「コードが基本!!」みたいです