20分で作る簡易的なウェブページ（GitHub + HTML）
はじめに
パパっと簡易的なウェブページを作りたいと思ったときのメモ。
完成度は二の次。参考程度にどうぞ。
あと、ウェブ系は完全に初心者なので 間違っている情報がある可能性が高い。
作成したウェブページはこんな感じ。 https://yusukekato.github.io/
環境
最新のブラウザで動作するような HTML と JavaScript と CSS。
（特に気にしなくても大丈夫だと思いたい）
目次
ウェブページ作成の流れ
GitHub 上にディレクトリを作成してファイルを置く
GitHub のアカウントをまだ持っていない場合はすぐに新規登録
GitHub とは、 git を利用できるウェブサービスのこと
- 新規のディレクトリを作成
- 作成したディレクトリの「Setting」を開く
- 設定項目の中から「GitHub pages」の項目を探す
- 「Source」のプルダウンを「None」から「master branch」に変更
これで 『https://アカウント名.github.io/リポジトリ名/』にアクセスできる
また、リポジトリ名を『アカウント名.github.io』にすると、 『https://アカウント名.github.io/』でアクセスできる
index.html を作成（とりあえず完成）
次に作成したディレクトリに「index.html」というファイルを置く
一応書いておくと、 ウェブページにアクセスすると「index.html」が自動的に呼び出される
「index.html」の中は以下のように記述。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>
<h1>ウェブサイト</h1>
</body>
</html>
これが最低限のHTML。
おまけ
HTML でよく使うタグ（主観）
見出し
文字の大きさは CSS でいじったほうがいいと思う（後述）
<h1>見出し、一番大きい</h1> <h2>見出し</h2> <h3>見出し</h3>
文章を書く
<p>ここに文章を書く</p>
改行
<br>
リンク
<a href="https://sample.sample/">sampleページ</a>
線を出す
<hr>
箇条書き
<ul>
<li>箇条書き１</li>
<li>箇条書き２</li>
<li>箇条書き３</li>
</ul>
グループを作る
<div>
<h1>たいとる</h1>
<hr>
<p>ここに文章を書いてみる</p>
<a href="URL">AAA</a>
</div>
スクリプトを読み込む
<script src="sample.js"></script>
スクリプトを書く
<script>
var a = 1;
console.log(a);
</script>
ボダンを設置
onclick="関数名" を付けると、 ボタンを押したときのイベントを設定することができる
<button onclick="button1()">ボタン</button>
CSS の導入
HTML のデザインは CSS で決める
CSS は以下のような感じ。参考程度に。本当はもっときれいに書くことが望まれる
まず、「style.css」というファイルを作成（名前は style ではなくてもいい）
そして、HTML の「head」の中に以下を記述
<link rel="stylesheet" href="style.css">
これで「index.html」のデザインを「style.css」で編集できるようになった
HTML における class と id
たとえば以下のように HTML を書く
<p class="test">文章を書いてみる</p>
こう書くと、この p タグのクラスが "test" になる
次に、style.css に以下のように書く
.test {
font-size: 24px;
}
こう書くと、class が "test" のタグはフォントサイズが「24px」になる
また、class はグループ、id は一つひとつ、みたいな使い方だと思う
フラットデザインをめざして
今どきのウェブサイトではフラットデザイン（ゴテゴテしていないやつ）が好まれている
フラットデザインのウェブサイトを作るために必要なのは色合いや配置
あと、単純に見やすいウェブサイトを作るために文字の大きさの調整などが必要
そのために、 HTML の「div」タグの使い方、また、前述した「class」と「id」の使い方、 さらに、CSS における「margin」と「padding」の使い方、が重要になってくると思う
一例として
index.html の body を以下のように記述
<body>
<div class="test">
<h1>タイトル<h1>
<p>ここに文章を書く</p>
<p>さらに文章を書く</p>
</div>
</body>
style.css に以下のように記述
body {
width: 100%;
background-color: #EEEEEE;
}
.test {
width: 80%;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
}
まず、背景の色を「灰色」にした
次に、「div」タグ内の色は「白色」して、 さらに横幅は画面の80%に、 そして「margin」を「auto」にすることで中央に配置した
こんな感じでできるはず
あくまで参考程度に。（以下も一例として）
その他
文字サイズがおかしいとき
文字サイズを変更しているはずなのにおかしいときは、 以下のコードを CSS ファイルの body に書く
-webkit-text-size-adjust: 100%;
文字のフォントを設定
文字のフォントを設定
以下のコードを CSS ファイルの body に書く
font-family: arial, sans-serif;
a タグの下線を消す
a {
text-decoration: none;
}
端末の画面サイズによって CSS を変更
CSS ファイル内に記述
@media screen and (min-width: 1000px) {
1000px以上の画面サイズを持つ端末の場合
}
@media screen and (max-width: 999px) {
999px以下の画面サイズを持つ端末の場合
}
a タグにマウスカーソルが乗っかっているときに色が変わる
マウスカーソルがのっかっている場合は、#0000FF に色が変わる
a:hover {
color: #0000FF;
}
おわりに
簡単なウェブページの作成方法をまとめた
さらに、HTML と CSS の簡単な説明も書いた
これからもフラットデザインをめざしてがんばりたい
