ポートフォリオを制作する~htmlのあれこれ~
Shimbei0. 必要な技術
・HTML、CSS、JavaScript、
・Google App Script
・GitHub
GitHubはまだ使いこなせていないため、この制作活動でなれることを目指す。
Shimbei1. はじめに
1.1 なぜHTML？
高専からの進学や就職を見越してポートフォリオを作成するので忘れないようにまとめる。
1.2 設計の目標と開発フロー
本活動の設計目標を記す。
「見やすく、伝わりやすく、印象に強く残るポートフォリオ」
1.3 HTMLに含む要素
開発は以前作成していたポートフォリオの草案を叩き台とし、CSSやJSの拡充を行う。
・スライドショーを用いて省スペース化
・プルダウンメニュー＋初期状態をオープン
・色味調整
・WORKSの内容拡充（サブページの作成、Zennの活用）
Shimbei完成品：https://shimbeik.github.io/portfolio_2025/
２．技術まとめ
まず忘れていけないのは、親要素と子要素の関係である。以下のような要素構成があるとき、AにCSSをつけるかBにCSSをつけるかでHTMLの表示は全く異なる。そしてCSSのコマンド（関数）は親要素に作用するものと子要素に作用するものがある。これを混同すると沼るので注意。
具体例はあれば追記する。
<div class='A'>
<div class='B'>
</div>
</div>
divタグを入れ子構造にすればするほど親要素と子要素の関係が複雑になり、CSSの設定が難しくなるので、divタブはなるべくdivタグの中に入れないようにするべき。
画像の取り扱い
基本，画像を横並びで扱う場合は使用する画像のサイズを固定するべき．HTMLで変更は可能だが読み込むデバイスによって変わったりする恐れがあるので最初からやっておこう．
スライドショーの作成
いつかやると思う
フォントの選択
フォントはGoogleがWeb上で無償フォントを公開してくださっているのでそこを活用する．以下のサイトでウェブフォントを確認し，気に入ったフォントがあれば画面右上の「Get font」をクリックし「Get embed code」をクリックする．「@import」というラジオボタンを選択するとcssへの導入方法を教えてくれる
ShimbeiDevelop log
2025/03
・デザインの修正，サブページの追記
・今どきはスマートフォンが主流なので，スマートフォンに対応したcssの追記
2024/02
・大学進学にあたって自己紹介ついでにポートフォリオを使いたくなる
・プルダウンメニュー，スライドビューの作成
2024/03
・授業でポートフォリオを作る機会があったので第２弾制作
2023/06
・第１弾完成
2023/05
・インターンシップに向けてポートフォリオを作ろうと思い立ちHTML，cssを学ぶ