tags: `HTML` `CSS`

ホームページ制作 - Aboutページ編

ここでは，Aboutページを作っていきます．

まずはtmp.htmlの内容をabout.htmlにコピペします．

目標物

まずはゴールの確認です．

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

HTML
1. タイトル(名前)
2. 自己紹介文
3. 使用したことある技術
  - 言語
  - 言語以外
  - フレームワーク
  - プラットフォーム等
4. プログラミング以外の趣味
5. 好きな画像を2枚
6. 好きなものについて
7. オリジナルの項目
8. 経歴
CSS
1. コンテンツ本体が中央配置
2. 上下に余白(padding)
3. コンテンツ本体の中の色は外側より明るめ
4. コンテンツ本体の最大幅は967px
5. コンテンツの周りは5px丸める
6. 好きな画像は横並び
7. 好きな画像はそれぞれコンテンツの幅の半分以下
8. 小見出しはアクセントカラーで話の区切りを明瞭に

HTML

about.htmlのheadタグ内に以下のlinkタグを追加します．


<link rel="stylesheet" href="styles/about.css">

about.htmlのmain要素を以下にします．

<main class="wrapper">
  <article class="content_wrapper">
    <h1>YOSSE95AI</h1>
    <h2>自己紹介</h2>
    <p>自己紹介１</p>
    <p>自己紹介２</p>
    <p>自己紹介３</p>
    <p>自己紹介４</p>

    <h2>使用技術</h2>
    <p>C/C++，C#，TypeScript，Python，Ruby，JavaScript</p>
    <p>HTML，Pug，CSS，SCSS</p>
    <p>React，Ruby on Rails，Django，Flask，Angular</p>
    <p>Windows，WSL2，Ubuntu，Unity</p>

    <h2>プログラミング以外の趣味</h2>
    <p>
      プログラミング以外の趣味１は「プログラミング以外の趣味１」です．
    </p>
    <p>
      プログラミング以外の趣味２は「プログラミング以外の趣味２」です．
    </p>
    <div class="img_container">
      <img src="https://2.bp.blogspot.com/-BBDUhqUqFxY/WUdZNRQOykI/AAAAAAABFDw/dHO4dZ-5-NQTyXy_8_mpy4c5y-mYlPvFACLcBGAs/s800/pop_gazouha_image_desu_shikaku.png" alt="趣味の画像1">
      <img src="https://2.bp.blogspot.com/-BBDUhqUqFxY/WUdZNRQOykI/AAAAAAABFDw/dHO4dZ-5-NQTyXy_8_mpy4c5y-mYlPvFACLcBGAs/s800/pop_gazouha_image_desu_shikaku.png" alt="趣味の画像２">
    </div>

    <h2>好きなもの</h2>
    <p>犬・猫！</p>
    <p>好きなものを記述しましょう！</p>

    <h2>自由枠</h2>
    <p>自由枠です！</p>
    <p>好きなことを書いてください！</p>

    <h2>経歴</h2>
    <p>九州工業大学 情報工学部 知能情報工学科 卒</p>
    <p>九州工業大学 情報工学府 先端情報工学専攻 在学</p>
  </article>
</main>

ここで，article要素とは，divのようなブロックレベル要素で，その要素内が文書であることをブラウザに伝えます．

文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。
引用：https://developer.mozilla.org/ja/docs/Web/HTML/Element/article

画像はサンプル画像です．
使いたい画像がある人は置き換えてください．
ない人は，後で好きな画像に置き換えてください！

現状

自己紹介

ご自身のものに置き換えてください！

<p>どうも！yosse95aiという名前でエンジニア(笑)をしている者です！</p>
<p>大学でプログラミングを学んで以来、研究や趣味，アルバイト業務で日々研鑽を積んでいるところです．</p>
<p>業務として，フロントエンドに関わることが多いですが，バックエンド技術も好きで，趣味でAPIを作ったりもしています．</p>
<p>Webの技術はもちろんのこと，研究で扱っている画像処理分野も好きです！</p>
<p>まだまだ修行の身ですが，どうぞよろしくお願いします！</p>

使用技術

ご自身のものに置き換えてください！

<p>C/C++，C#，TypeScript，Python，Ruby，JavaScript</p>
<p>HTML，Pug，CSS，SCSS</p>
<p>React，Ruby on Rails，Django，Flask，Angular</p>
<p>Windows，WSL2，Ubuntu，Unity</p>

プログラミング以外の趣味

ご自身のものに置き換えてください！

<p>
  カラオケで歌ったり・ドラムを演奏したり・フェスやライブに行ったりと，音楽関連のことが大好きです！<br>
  とにかく高音域を出すことに熱があり，今の最高音は <b>hihiA#</b> です！<br>
  よくカラオケで初見の人が驚いてくれてうれしいです！w
</p>
<p>
  主にアウトプットの場として，<a href="https://qiita.com/RoaaaA" target="_blank">Qiita</a> を利用しており，書くのも読むのも好きです！<br>
  ぜひフォローとLGTMをよろしくお願いします！w
</p>
<p>お菓子づくりも好きで，最近はカヌレとブールドネージュを作りました！</p>
<div class="img_container">
  <img src="img/kanure.jpg" alt="作ったカヌレ">
  <img src="img/snowball.jpg" alt="作ったブールドネージュ">
</div>

自由枠(例：このサイトについて)

ご自身で好きな内容に置き換えてください！
いらないひとは消してもOK

<h2>このサイトについて</h2>
<p>自身の簡易的なホームページとして作成いたしました．</p>
<p>個人的な理由から，HTMLとCSSのみで組みました．</p>

経歴

ご自身のものに置き換えてください！

<p>九州工業大学 情報工学部 知能情報工学科 卒</p>
<p>九州工業大学 情報工学府 先端情報工学専攻 在学</p>

CSS

今回のデザインは，縦長のカードの中に自己紹介があるようなデザインです．
about.cssに記述していきましょう．

main全体の宣言

もともとあるmainの定義に.wrapperの定義として追加の定義をします．

.wrapper {
  display: flex;
  justify-content: center;
  padding-top: 70px;
  padding-bottom: 50px;
  color: var(--text);
  background-color: black;
}

フレックスボックスの定義を追加し，中央に配置します．
上下に余白を設定します．

background-color: black;は後々消しますが，CSSの適用範囲が分かりやすいようにするために，色を付けます．

コンテンツ本体

.content_wrapper {
  width: 95%;
  max-width: 967px;
  padding: 20px;
  background-color: var(--base_light);
  border: 1px solid var(--main);
  border-radius: 5px;
}

コンテンツの幅は，常に表示領域の95%になります．
ただし，最大幅は967pxに設定しました．
PCなどの大きな画面では967pxになります．

コンテンツ内の文字の宣言

.content_wrapper h1 {
  margin: 20px 0 30px 0;
  font-size: 48px;
  font-weight: 800;
  color: var(--main);
}

.content_wrapper h2 {
  margin: 20px 0 10px 0;
  font-size: 24px;
  font-weight: 400;
  color: var(--acc);
}

.content_wrapper p {
  margin-bottom: 5px;
  font-weight: 300;
}

.content_wrapper a {
  color: var(--main_light);
}

.content_wrapper a:hover {
  color: var(--text);
}

画像領域の宣言

横並びを宣言します．

.img_container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  overflow: hidden;
  padding-top: 10px;
}

画像の宣言

常に幅を48%にします．
ただし，240 ≤ width ≤ 400です．

.img_container img {
  max-width: 400px;
  min-width: 240px;
  width: 48%;
  margin-bottom: 10px;
  border: 1px solid var(--main);
  background-color: var(--text);
}

完成状態

background-color: black;を消して完成です．
以下のようになりました！
(1xでは画像が横並びにならないので，0.5xで確認してもらえるとよくわかると思います．)

コミットとプッシュ

GitHubにコミット・プッシュして変更を反映させましょう！

# 変更をステージング
git add .

# 変更をコミット
git commit -m "Aboutページ完成"

# 変更をプッシュ
git push origin master

完了したら，アクセスしてみましょう！
ページ遷移がうまくいくのかも試してみましょう！

うまくいかない時は修正してコミット・プッシュしなおせばOKです！

まとめ

ここまでで，ホームページのエントランス(Index.html)と自己紹介ページ(About.html)を作ってきました．

本当にお疲れさまでした．

今後これをホームページ(英語的にはポートフォリオ?)として使っていくのも，使わないのも自由です！

この時点で，みなさんはHTML・CSSの初心者からは脱却したといってもいいかもしれません！
少なくとも，Googleなどで調べながらデザインを自由に組めるポテンシャルは持ち合わせていると思います！

将来的に，今回のGitHub Pagesの内容を消してしまって，オリジナルなものに置き換えても私は一向にかまいません！
むしろその方が新しいものを見れるので楽しいですね．

ここまでお付き合い本当にありがとうございました！
Web技術に少しでも興味を持ってくれたのであれば幸いです！

次のステップ

いくつかのステップが考えられます！
以下は一例ですので，これらに縛られなくてもいいですが，0. やってほしいことはやってください！お願いします！

0. やってほしいこと

画像や自己紹介，その他仮置きしているものをそれぞれオリジナルなものに書き換えてください！

外部の画像などを使用する場合は，その画像の著作権などには十分注意してください！

アイコン画像
自己紹介の文章
自己紹介の自由枠

この際，二つのHTMLファイルで共通している個所は両方とも編集してください！

1. `????`で置いていた部分のリンク先ページを作る

内容は完全自由です！
私の場合だと，大好きな愛犬・愛猫たちのギャラリーを作りました！
gallery.htmlとgallery.cssというファイルを作成しました！

もし完成したら(しなくてもOK)，私たちのDiscordサーバー九工大Web開発部の作品展示場に展示してください！
今回の講座を経て「どんなデザインが飛び交うのか？」が楽しみです！

「もうやらないよ！」って人は????の部分を消去して，再度コミット・プッシュしてください！
これだけでも一作品と楽しめるようなものになっていると思います！

2. デザインを変える

今回の講座ではみんな共通の色，レイアウトで作成しました．
これをベースに改良して，オリジナルのデザインに書き換えるのもいいでしょう！

同じデザインになることに特に抵抗がない方はこのままでいいですし，改良した方はぜひ教えてください！アクセスします！

3. JavaScriptを勉強する

ざっくりいうと，JavaScriptはWebページに動きを与えるための，プログラミング言語です．

例えば資料中の一部でも使っていました．
こことか ↓
https://hackmd.io/@kit-web-team/CSS2#Flexボックス

JavaScriptを勉強すれば，今回の講座と合わせてフロントエンドの主要技術を手に入れたことになります．

図書館などでなるべく出版年度が最近の入門書を1冊終わらせるといいかもしれません．

GitHub PagesでもJavaScriptはもちろん使えるので，さらに今回のホームページをパワーアップさせても面白いかもしれません！

4. Webフレームワークを学ぶ

いろいろな言語に，Web開発用のフレームワークはたくさんあります．

Angular
jQuery
React
Vue

などなど．

これらのフレームワークを使うことで，高速で信頼性の高いWebページを作成することも可能です．
JavaScriptに入門することもかねて，いきなりWebフレームワークの勉強からするのもまた1つの手かもしれません．

その場合は各フレームワークの公式が提供するGetting Startなどを進めていくのがいいです！
無料で勉強でき，内容の信用性が高いドキュメントになっているはずです．

5. バックエンド技術を学ぶ

今後「フロントエンドがあまり性に合わないかも…」と勉強していて思った方！
Webバックエンドもあります！

PythonやRubyといった言語と各フレームワークを用いて，Webサイトの裏側の仕組みを作るのがバックエンド開発です．
ユーザー登録されたデータの管理やページへのアクセス制御など，バックエンドのやっていることは直接目に見えるものではありませんが，確かにそこにあってとても重要なWebの要素です．

あまり多くのことは話せませんが，「バックエンド開発」等で検索をかければたくさんの記事が出てくると思います！

Webの裏側の仕組みに興味を持ったなら，ぜひバックエンド技術を学んでみてください！かなり楽しい！

6. この講座の後継者になる

今回の講座をさらに後輩たちに開講してくれる人を募集中！

資料などはすべてお渡するので，お声掛けください！

こういう活動(講座)はもしかしたら，就活のネタにできるかも！？

お待ちしております！

tags: HTML CSS

ホームページ制作 - Aboutページ編

もくじ

目標物

HTML

現状

自己紹介

使用技術

プログラミング以外の趣味

自由枠(例：このサイトについて)

経歴

CSS

main全体の宣言

コンテンツ本体

コンテンツ内の文字の宣言

画像領域の宣言

画像の宣言

完成状態

コミットとプッシュ

まとめ

次のステップ

0. やってほしいこと

1. ????で置いていた部分のリンク先ページを作る

2. デザインを変える

3. JavaScriptを勉強する

4. Webフレームワークを学ぶ

5. バックエンド技術を学ぶ

6. この講座の後継者になる

Read more

ホームページ制作 - テンプレート作成編

GitHub Pagesの準備

ホームページ制作 - Indexページ編

CSSを書いてみよう

tags: `HTML` `CSS`

1. `????`で置いていた部分のリンク先ページを作る