六回目ーー『HTML』実践後編、なろうホームページ参考ーー
前回の続きです。
少しおかしく表示されています。
何故か空白が生まれて文字がずれてしまっているのです。
では、後編を始めます。
もう一度言っておきますが
『HTML』のプログラム――特にクラス名の多くが変更され、レイアウトの関係上順番を変更して『CSS』を書いている最中です。
現段階の『HTML』が変更前のもので、後程変更点を書くことを了承してください。
メイン後半(サイドのメニュー項目)
<div class="sougou-kikaku">
<div class="jikkou-kikaku">
<div class="title-jikkou">
<div class="jikkou-title">実行中の企画</div>
</div>
<div class="koumoku-kikaku">
<a href="URL">手始めにHTML&CSSを学ぶ</a>
<a href="URL">ゲームを作る為にRPGツクールを使う</a>
<a href="URL">休憩に小説も書く(シナリオ練習)</a>
<a href="URL">目指せ! フリーソフト</a>
</div>
</div>
<div class="jikkou-kikaku">
<div class="title-jikkou">
<div class="jikkou-title">公式企画</div>
</div>
<div class="koumoku-kikaku">
<a href="URL">クリスマスイベント</a>
<a href="URL">冬の感謝祭</a>
<a href="URL">プログラマーになりたい人!</a>
<a href="URL">年末イベント予告</a>
</div><!-- koumo-kikaku-->
</div><!-- jikkou-kikaku-->
<div class="kako-kikaku"><a href="URL">これまでの公式企画一覧</a></div>
<a href="URL">049活動報告</a>
<div class="jikkou-kikaku">
<div class="title-jikkou">
<div class="jikkou-title">新着レビュー</div>
</div>
<a href="URL" class="review">
<span class="jikan">2018/12/15 11:00</span>
<h4 class="kansou">○○</h4>
<p class="review-nusi">名無しの権兵衛</p>
<p class="title"><span>△△</span></p>
</a>
<a href="URL" class="review">
<span class="jikan">2018/12/15 10:00</span>
<h4 class="kansou">○○</h4>
<p class="review-nusi">ジョン・スミス</p>
<p class="title"><span>□□</span></p>
</a>
<a href="URL" class="review">
<span class="jikan">2018/12/15 9:00</span>
<h4 class="kansou">○○</h4>
<p class="review-nusi">ジョン・ドゥ</p>
<p class="title"><span>××</span></p>
</a>
<div class="kako-kikaku"><a href="URL">レビュー一覧</a></div>
</div><!-- jikkou-kikaku-->
<div class="jikkou-kikaku">
<div class="title-jikkou">
<div class="jikkou-title">関連サイト</div>
</div>
<div class="zentai">
▼交流サイト
<div class="box">
<a href="URL">○○</a>
<p>○○運営</p>
</div>
<div class="box">
<a href="URL">○○</a>
<p>△△運営</p>
</div>
<div class="box">
<a href="URL">○○</a>
<p>□□運営</p>
</div>
<div class="box">
<a href="URL">○○</a>
<p>××運営</p>
</div>
</div><!-- zentai-->
</div><!-- jikkou-kikaku-->
</div><!--sougou-kikaku-->
画像を見てもらえれば分かるのですが、何故か『名無しの権兵衛二行下の日付の頭に空白』が出来てしまっています。プログラムを見た感じおかしくないと思うので、一体どういうことなのでしょうか。
前回言ったか覚えていないのですが
私が思ったのは『グループは全て図形で示した方がいい』ということです。
同じ名前のクラス名なら『CSS』で同じ変更がされる。
中身の内容が異なっても、枠(横幅や線の色)やタイトル名のデザインが同じならプログラムを省けるのです。
その辺もこんがらがって来るので
どのようなデザインでレイアウトなのか
どんな図形(ヘッダーの長方形、サイドの縦長長方形)の配置なのか
内部の内容がどんな順番で表示されるのか序列を決める
今はこのような感じでイメージしています。
<div class="jikkou-kikaku">
<div class="title-jikkou">
<div class="jikkou-title">グループ</div>
</div>
<ul>
<li>
<a href="URL">
<img src="URL">
</a>
</li>
</ul>
<div class="kako-log"><a href="URL">レビュー一覧</a></div>
</div><!-- jikkou-kikaku-->
</div><!--sougou-kikaku-->
<div class="sub">
<div class="sub-box">
<div class="jikkou-kikaku">
<div class="jikkou-title">サイト概要</div>
</div>
<ul>
<li><a href="URL">サイトについて</a></li>
<li><a href="URL">マニュアル</a></li>
</ul>
</div><!-- sub-box-->
<div class="search">
<p>キーワードを入力</p>
<input>
<p>ジャンル</p>
<input>
<p>種別</p>
<input type="submit" value="検索">
</div><!-- search-->
<div class="sub-kensaku">
<div class="jikkou-kikaku">
<div class="sub-title">特殊検索</div>
</div>
<ul>
<li><a href="URL">未評価作品</a></li>
<li><a href="URL">未感想作品</a></li>
<li><a href="URL">平均点順作者</a></li>
<li><a href="URL">閲覧履歴</a></li>
</ul>
</div><!-- sub-kensaku-->
</div><!-- sub-->
<div class="sub">
<div class="jikkou-kikaku">
<div class="jikkou-title">QRコード</div>
</div>
<div>
<a href="URL">
プログラムを作ろう!携帯版
<img scr="URL">
URLを携帯に送信
</a>
</div>
</div><!-- sub-->
</div><!-- pickup-->
以上が『HTML』のプログラムになります。
最後にもう一度言いますが、かなりの変更点があります。
まあ、表示を弄るわけではないのでプログラム自体を間違えているわけではありませんでした。多少手を加えたり内容を弄った場所はありますが。
次回予告、悲報。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。