清水のブログ

「いち」大学生の日々

HTMLのお勉強④ とりあえずサイト完成

少し、前回から時間が経ってしまいました。 www.shimizu-blog.com いつもの調子だとやめそうだったのですが、こうしてブログに書いたことだし、どんなにしょうもなくてもいいから一つサイトを作るところまでいこう、と思い、作りました。

記録するのって大事ですね。

さて、前回、レンタルサーバーを利用し、サイト(HTML&CSSファイル)をアップできたけど、画像がネット上で見えない、という状況でした。

画像のURLは絶対パスにしたのになぜ・・・。と思っていたのですが、単にCSSファイルが読み込めていないだけでした。

無事、画像が見えるようになり、とりあえずのサイトができました。

ただ、クオリティ・ユーザーアビリティは非常に悪いです。(あと、単に内容が恥ずかしい。自作漫画まとめかぁ・・・。)

でも、拘るあまり形にならない、よりはましと思い、とりあえず完成とし、ここにアップすることにしました。

ただ、多分重すぎてスマホではロゴだけ表示されると思います。パソコンなら見れるはず。 (追記:読み込み速度は速いので、重いのではなくデザインがスマホに対応していないだけ?)

こちらから飛べます。

http://tonshimi.html.xdomain.jp/%E6%B8%85%E6%B0%B4%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AE%E6%BC%AB%E7%94%BB.html

見れない方のためにキャプチャ画像を貼っておくと、こんな感じです。 f:id:shimizu_blog:20200404162013j:plain 「昔のインターネット」感が否めませんね。

二つ文章を置いて、あとは折りたたみボタンが20個、その中に画像が貼ってあります。

次は、WordPressでブログを作ってみようかな、と思っております。

一応、HTMLとCSSを貼っておきます。

HTML

<!DOCTYPE html>
<html>
  <head>
    <!-- 雛形をコピーして、3つの要素を追加してください -->
    <!-- 文字コードを「utf-8」にしてください -->
    <meta charset="utf-8">
    
    <!-- タイトルを「Progate」にしてください -->
    <title>清水のブログの漫画</title>
    
    <!-- 「stylesheet.css」を読み込んでください -->
    <link rel="stylesheet" href="清水のブログの漫画.css">
  </head>
  <body>



    <h1>清水のブログの漫画</h1>
      <p>おもしろ漫画を大公開!</p>
      
<ul>



<li><div onclick="obj=document.getElementById('manga1').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 1. Boston Bake</a>
</div>
<div id="manga1" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga1.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga2').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 2. 指紋認証</a>
</div>
<div id="manga2" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga2.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga3').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 3. 親友</a>
</div>
<div id="manga3" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga3.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga4').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 4. S君の夢</a>
</div>
<div id="manga4" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga4-1.jpg">
<img src="http://tonshimi.html.xdomain.jp/manga4-2.jpg">
<img src="http://tonshimi.html.xdomain.jp/manga4-3.jpg">

</div></li>

<li><div onclick="obj=document.getElementById('manga5').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 5. 三角関係(?)</a>
</div>
<div id="manga5" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga5.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga6').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 6. Hello</a>
</div>
<div id="manga6" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga6.jpg">
</div></li>


<li><div onclick="obj=document.getElementById('manga7').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 7. あるある </a>
</div>
<div id="manga7" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga7.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga8').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 8. 仕草と人物像 </a>
</div>
<div id="manga8" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga8.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga9').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 9. 引っ越し </a>
</div>
<div id="manga9" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga9.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga10').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 10. 締めパフェ</a>
</div>
<div id="manga10" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga10.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga11').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 11. すます  </a>
</div>
<div id="manga11" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga11.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga12').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 12. 社会人 </a>
</div>
<div id="manga12" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga12.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga13').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 13. in ドつぼ </a>
</div>
<div id="manga13" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga13.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga14').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 14. ハイオク </a>
</div>
<div id="manga14" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga14.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga15').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 15. ゴキゲン笑顔 </a>
</div>
<div id="manga15" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga15.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga16').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 16. かくれんぼ </a>
</div>
<div id="manga16" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga16.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga17').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 17. ガム </a>
</div>
<div id="manga17" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga17.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga18').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 18. オノマトペ </a>
</div>
<div id="manga18" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga18.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga19').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 19. 一人三役 </a>
</div>
<div id="manga19" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga19.jpg">
</div></li>

<li><div onclick="obj=document.getElementById('manga20').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 20.「ハ」の字 </a>
</div>
<div id="manga20" style="display:none;clear:both;">
<img src="http://tonshimi.html.xdomain.jp/manga20.jpg">
</div></li>



</ul>

  </body>
</html>

CSS

h1{background-color: #000080;
    color:#ffffff;
font-family: serif;
font-size:100px;
padding:10px;
text-align:center;}

p{font-family: sans-serif;
    font-size:50px;
    font-style:italic;
    color:#ffffff;
    padding:20px;
text-align: center;}

li{list-style: none;
    float:left;
    font-size:20px;
color:#ffffff;}



body{background-image:url("http://tonshimi.html.xdomain.jp/universe.jpg")}