五回目ーーメイン構造、<span>ーー
今回はメインについて話します。
そろそろ初級編の終わりに近づいてきました。
今回学んだのはWebページのメイン内容とお問い合わせの画面作りです。
メイン内容については説明も不要でしょう。主要コンテンツの事です。
お問い合わせの画面は使ったことの無い人だと想像しにくいと思いますが、簡単に言うと運営に質問や批判などをするメールアドレス記載など必須の項目の事です。なろうでいう評価や感想の欄のような感じです。
では、先にメイン内容、その中でも構造についてお話していきたいと思います。
１．メインの構造
結論から言います。
ホームページ――サイトのTOP画面のこと――には
これ！ という形はないと言えます。
写真や画像だけが張られていたり、項目だけだったり、複雑なものまで様々です。
なので、このやり方、というのを私自身がよく理解できませんでした。
ですから、私が思いこれだな、というやり方を紹介したいと思います。
間違いがあると思いますがご容赦ください。
まずプログラムを考えるのではなく、どのような構造が良いのかグループ分けします。
例えば
中央に主要コンテンツのページへ飛ぶアイコンを複数置く、若しくは紹介をでかく乗せてインパクトを与えたい。
上下(左右でも)には細かいメニューを表示させておこう。
このように考えます。
私が使うゲームの攻略サイトは
中央：主だった攻略及び掲示板等の目次
左：全てのデータベースがずらり
右：関連サイト、ランキング(アクセス数)、関連情報等
後は定期的に広告が入っている感じです。
これをプログラミングして分類してみます。
例
<div class=”kouryaku-menu”>
～
</div>
<div class=”data-base”>
～
</div>
<div class=”information”>
～
</div>
まず三つの大きなグループに分けられ個別化されます。
この三つの中に
『a』を使ったリンク先へ飛ぶ文字やアイコン
『div』を使いさらに個別化
『p』で文字を表示させておくことも可能
クラス名は表示されることはないので、自分が分かりやすい名前を付けておけばいいと思います。
というより、攻略サイトなどの場合は三つに分けていても何処か重なり、同じプログラムをしないといけない時があります。その時にクラス名を同じにしていればグループが異なっても同じ変更が行われるはずなので、クラス名を付ける時は考えておくことが必要でしょう。打ち込む文字数も関わってきますからね。
今回は中身を書き込むとかなり長くなるので、全体の例に関しては省略させてもらいます。
２．一部の文字の色だけ変えたい
正しくは、一部だけ『CSS』を適用させたい、です。
『攻略メニュー』の攻略だけ赤くしたい、若しくは大きくしたい、などです。
Wordなら変更したい文字をドラッグしてフォントの色というボタンを押せば一発なんですが、プログラミングではそうもいきません。
そこで使うのが
『span』＝期間、短い時間等の意味がありますが
同じ意味ではなく、一部を切り取る感覚でしょうか。
これで一部の変更を行えるようになります。
使い方は
<h1><span>攻略</span>メニュー</h1>
<div class=”kouryaku”><span>攻略</span>メニュー</div>
このような形となり、『span』で囲んだ文字に対して『CSS』の効果を発揮します。
また、このような要素を【インライン要素】と呼び、逆に改行する『h1』や『div』は【ブロックレベル要素】と呼びます。
簡単に言うと、文章の一部に対して適用させる、若しくはブロックレベル要素の中にあるものをインライン要素と言います。
そして、この状態では初期状態の『赤』となるので、例えば『青』にしたい
『CSS』
h1 {
color: #0000ff;
}
.kouryaku span {
color: #0000ff;
}
上記の様にプログラミングすると色を指定できます。
今回は此処までとします。
次はコンテンツ、今回省いた『div』の中の表示方法について書きます。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
