ポートフォリオサイトの作成

GithubPage でポートフォリオサイトを作っていこうと思います

とはいっても作成したことがないので、ざっくりつくり、今後カスタマイズすることで完成させていこうと思います

まずはベースとなるHTMLを作っておきます

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Snowpool | About</title>
    <!-- BootstrapのCSS読み込み -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery読み込み -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    
  </body>
</html>

注意点としては jQuery を bootstrap 関連より先にいれることです
この順番を間違えて後にすると、動きのある jQuery プラグインなどが動作しないことがあります

次に
link:css を展開することで

<link rel="stylesheet" href="style.css">

を展開

次に header と footer の領域を作成

footer には copyright を作成し
header にはナビゲーションを配置します

    <footer>
      &copy 2016 Snowpool
    </footer>

としてコピーライトを作成

css は

footer{
    font-size: 93%;
    text-align: center;
}

として中央寄せに

画像については twitter で使っているものを使用するため
同じフォルダに配置

次に　header にナビゲーションを配置

    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html" class="selected">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

として次に css の設定


nav{
    text-align: center;
    
}

nav ul li{
    margin: 0 20px;
    display: inline-block;
}

nav ul li a{
    text-decoration: none;
    font-weight: bold;
}

text-align:center で中央寄せ

text-decoration:none にして下線を削除
font-weight:bold で太字
display: inline-block;　で要素を横並びに

次に、アイコンをはりつける領域を作成
nav の下へ

        <div id="logo">
          <img src="Snowpooll.jpeg" alt="">
          <h1>Snowpool</h1>
        </div>

として、css の設定

#logo{
    text-align: center;
}

#logo img{
    max-width:300px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

#logo h1{
    letter-spacing: 0.15em;
}

#logo に対して
text-align:center にすることで
画像と名前を中央寄せに

なお、画像に対して
border-radius:100% にすると丸くなります

letter-spacing: は文字間隔の設定

ここまでで以下のような画面になります

次回はもう少し自己紹介文などを追加していきます

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル