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

今回は自己紹介部分を作成します

今回は section タグを使用します

これについては
HTML5のお勉強 articleとsectionとか
を参考にしました

section を使うときには、このタグの中に h1 が必要になります

今回、letter-spacing を使うことで文字の間隔を調整しています

詳しくは
文字と文字の間隔を変更できるletter-spacingプロパティ
を参考に

では
div#container>section
として
この中に自己紹介を書いてみました

    <div class="container">
      <section>
        <h1>About</h1>
        <h3>自己紹介</h3>
        <p>メインマシンは Ubuntu 14.04 たまに Mac 使います</p>
        <p>Wordpress でブログ運営中(興味のある方は <a href="https://wp.developapp.net/">こちらを</a>)</p>
        <p>kindle で ubuntu の使い方を書いた本を出版しました(<a href="https://www.amazon.co.jp/%E3%81%8A%E8%A9%A6%E3%81%97-Ubuntu-%E3%81%99%E3%81%AE%E3%81%86%E3%81%BD%E3%83%BC%E3%82%8B-ebook/dp/B00WZQN7XO">お試し Ubuntu</a>)</p>
        <p>写真から位置情報を読み出し、ナビするアプリを作りました(<a href="https://play.google.com/store/apps/details?id=net.developapp.photonavi">PhotoNavi</a>)</p>
        <p>最近は ruby on rails の Web アプリを公開するべく学習中</p>
        <p>年末にはAndroid クライアントアプリ作成予定</p>
      </section>
    </div>

次に css で中央揃えと文字間隔を揃えます

section{
    text-align: center;
    letter-spacing: 0.15em;
}

また、ナビゲーション部分は現在作成中ということで

        <nav>
            <ul>
                <li><a href="index.html" class="selected>Home">Home</a></li>
                <li><a href="https://snowpooll.github.io/">Github</a></l>
                <li><a href="#">MyApp(作成中)</a></li>
            </ul>
        </nav>

と変更しました

これでプレビューをみると、以下のようになります

Screenshot from 2016-07-06 23:09:58

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

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: は文字間隔の設定

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

Screenshot from 2016-07-06 01:00:31

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