表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

ブックマーク機能を使うにはログインしてください。
15/45

六回目ーー『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-->



挿絵(By みてみん)


挿絵(By みてみん)



 画像を見てもらえれば分かるのですが、何故か『名無しの権兵衛二行下の日付の頭に空白』が出来てしまっています。プログラムを見た感じおかしくないと思うので、一体どういうことなのでしょうか。



 前回言ったか覚えていないのですが

 私が思ったのは『グループは全て図形で示した方がいい』ということです。


 同じ名前のクラス名なら『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-->



挿絵(By みてみん)



 以上が『HTML』のプログラムになります。

 最後にもう一度言いますが、かなりの変更点があります。

 まあ、表示を弄るわけではないのでプログラム自体を間違えているわけではありませんでした。多少手を加えたり内容を弄った場所はありますが。



 次回予告、悲報。

最終目的

 ・勿論手に職を付ける、若しくはお金を稼ぐ

 ・簡単なゲーム(リバーシや簡易シューティングなど)を作る

 ・フリーソフトで販売


短期目標

 ・大まかな流れを覚える

 ・プログラミングを理解する


上記の内容は覚える中で変わることがあると思います。

評価をするにはログインしてください。
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ