清水のブログ

「いち」大学生の日々

以前作ったサイトをUPできました!

www.shimizu-blog.com

以前記事に書いたサイトのアップロードが無事できたので、URLとHTML&CSSコードを貼っておきます。

今はあまり見ませんが、僕は「個人の運営するHP」の雰囲気が好きです。 「サイトを運営する」って、一国一城の主みたいでかっこよくないですか? いずれやってみたいです。

URL

https://ponchane.github.io/ikasho/

HTML

〜
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>イカ書</title>
    <link rel="stylesheet" href="ikasho.css">
    <script src="https://kit.fontawesome.com/6889865adb.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <!-- ここにコードを書いていきましょう -->
    <header>
      <div class="container">
        <div class=header-left>
          <img class="logo" src="C:\Users\Shimizu Toshiki\Desktop\html\イカ書\ikasho_logo.png">
        </div>
      </div>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>北海道大学 イカ墨書道サークル</h1>
        <h1>イカ書</h1>
        <p>「イカ書」は、イカ墨を用いた書道を行うサークルです。</p>
        <p>書道の他にも函館振興のための活動を行っています。</p>

        <div class="btn-wrapper"></div>
          <a href="https://twitter.com/ikasho_hakodate" class="btn twitter"><span class="fa fa-twitter"></span>Twitter
           </a>
        </div>

      </div>

    </div>
    <div class="activity-wrapper">
      <div class="container">
        <div class="heading">
          <h1>活動内容</h1>
        </div>
        <div class="activity">
          <div class="activity1">
            <div class="activity1-icon">
              <img src="C:\Users\Shimizu Toshiki\Desktop\html\イカ書\activity1_icon_ika.png">
              <h2>イカ墨書道とは?</h2>
              <p class="txt-contents"> 名の通り、イカ墨を使って書道を行うことです。部員は主にスーパーでイカを買ってきて、捌いて墨を取り出します。捌いたイカは美味しくいただいていますよ!</p>
            </div>
          </div>

          <div class="activity1">
            <div class="activity1-icon">
              <img src="C:\Users\Shimizu Toshiki\Desktop\html\イカ書\activity1_icon_ika.png">
              <h2>イカアレルギーでもOK?</h2>
              <p class="txt-contents"> 本サークルでは、イカ墨書道をしたい人はすればいいし、そうでなければ他のことに取り組めばよい、というスタンスをとっています。
              函館振興のための活動もしていますので、そちらに興味がある方の入部もお待ちしております!</p>

            </div>
           
          </div>

          <div class="activity1">
            <div class="activity1-icon">
              <img src="C:\Users\Shimizu Toshiki\Desktop\html\イカ書\activity1_icon_ika.png">
              <h2>書道が苦手でもOK?</h2>
              <p class="txt-contents"> 問題ありません!実は、部長でさえ書道は小中学校の授業で取り組んだっきりです(笑) 字の上手さどうこうというより、創作がしたい人に向いているかもしれません!</p>
            </div>
           
          </div>

          <div class="activity1">
            <div class="activity1-icon">
              <img src="C:\Users\Shimizu Toshiki\Desktop\html\イカ書\activity1_icon_tako.png">
              <h2>タコ墨も使いますか?</h2>
              <p class="txt-contents"> タコ墨はイカ墨に比べて粘度が低かったり、墨を取り出すのが難しい、などの理由で現在は使っていません。
              しかし、要望があれば部員で話し合って検討してみます!</p>
            </div>
            
          </div>
        </div>
      </div>
    </div>
    <div class="message-wrapper">
      <div class="container">
        <div class="heading">
          <h2>さあ、キミも入部しなイカ?</h2>
        </div>
        <span class="btn message">
          入部申請
        </span> 
    </div>
    <footer>
      <div class="container">
        <img src="C:\Users\Shimizu Toshiki\Desktop\html\イカ書\ikasho_logo.png">

        <p>※このサイトはジョークサイトです。実際に「イカ書」というサークルは存在しません。</p>
      </div>
    </footer>
  </body>
</html>
〜

CSS

〜
body {
  margin: 0;
  font-family: "游明朝";
}

a {
  text-decoration: none;
}

header{height:65px;background-color:white;
}
.header-left{float:left;}
.logo{height:40px;width:150px;margin-top:20px;}

.container{width:1170px;padding:0 15px;margin:0 auto}

.top-wrapper{padding:180px 0 100px  0;
background-image:url(https://1.bp.blogspot.com/-v29TEsOJ9PA/USyJ3Ha5AaI/AAAAAAAAOcU/euK7yFB2XOQ/s1600/sushi_ika.png);
color:#000;
background-size:;
text-align: center;
}

.top-wrapper h1{font-size:45px;letter-spacing:5px;}
.top-wrapper p{opacity:0.7;}

.btn{padding:8px 24px;color:#fff;
display:inline-block;
opacity:0.8;
border-radius: 4px;
text-align: center;
}
.btn:hover{opacity: 1;}

.twitter{background-color:#55acee;}

.btn-wrapper{text-align: center;}

.fa{margin-right: 5px}

.heading{padding:60px 0 30px 0;color:#5f5d60;}

.activity-wrapper{height:650px;padding-bottom:80px;background-color:#f7f7f7;
}

.heading h1{text-align: center}

.activity1{float:left;width:25%}

.txt-contents{width:80%;display:inline-block;margin-top:20px;font-size:16px;color:#666;}

.message{background-color:#111;padding:15px 40px;
cursor:pointer;box-shadow:0 7px #000;}

.message:active{box-shadow:none;position:relative;top:7px;}

.message-wrapper{border-bottom:1px solid #eee;padding-bottom:80px;text-align:center;}

footer img{float:left;}
footer p{float:left;}
footer{padding-top:100px;}
〜