月別: 2016年7月

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
<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 で中央揃えと文字間隔を揃えます

1
2
3
4
section{
    text-align: center;
    letter-spacing: 0.15em;
}

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

1
2
3
4
5
6
7
<nav>
    <ul>
        <li><a href="index.html" class="selected>Home">Home</a></li>
        <li><a href="https://snowpooll.github.io/">Github</a>&lt;/l>
        <li><a href="#">MyApp(作成中)</a></li>
    </ul>
</nav>

と変更しました

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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 を展開することで

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

を展開

次に header と footer の領域を作成

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

1
2
3
<footer>
  &copy 2016 Snowpool
</footer>

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

css は

1
2
3
4
footer{
    font-size: 93%;
    text-align: center;
}

として中央寄せに

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

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

1
2
3
4
5
6
7
8
9
<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 の設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 の下へ

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

として、css の設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#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

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

GithubPage の作成

GithubPage を作成し、ポートフォリオサイトにしてみようということで
まずはリポジトリを作成

ただし、リポジトリ名を間違えたため、一度リポジトリを削除します

Github でのリポジトリの削除は
リポジトリの画面で Setting タブをクリックします

Screenshot from 2016-07-05 01:05:17

次に、下にスクロールさせて　Delete this repository　をクリックします

Screenshot from 2016-07-05 01:06:53

そして、リポジトリ名を入力し

Screenshot from 2016-07-05 01:07:56

I understand the conceqenses delete this repository
をクリックすれば削除できます

これで新しくリポジトリを作り直します

New repository をクリックし、新しく作成します

Screenshot from 2016-07-05 01:10:59

作成するときに気をつけることは、リポジトリ名を
ユーザ名.github.io
となるようにすることです

あとは public を指定して、Create Repository をクリックすればリポジトリを作成できます

Screenshot from 2016-07-05 01:12:46

私の場合、Snowpooll.github.io とするのを snowpool.github.io としたため
githubPage が存在しませんとなってしまい、作りなおすことになりました

git のリモートリポジトリの修正

Github Page をつくるのに cloud9 を使おうとしたけど
cloud9 の端末操作でURLのコピペができなかったため、
手打ちですべてやったため、URLの間違いが発生

本来なら、

1
git remote add origin https://github.com/Snowpooll/snowpool.github.io.git

とするはずが

1
git remote rm https://github.com/Snowpool/snowpool.github.io.git

と１文字違いで登録してしまい、これが原因で修正することになりました

そのままリポジトリ登録すればいいかなと思っても

1
fatal: remote origin already exists.

となってしまうため、一度 origin を削除する必要があります

このため

1
git remote rm origin

を実行し、origin を削除

次に

1
git remote add origin https://github.com/Snowpooll/snowpool.github.io.git

で再度登録

1
git push origin master

とすることで解決しました