Web勉強会

前回のおさらい

ここまで作ったんでしたね

• ページ制作を通して,
  • 文字や文章, 画像の配置方法
  • 画像をクリックできるリンクにする方法
  • コンテナの概念
  • コンテンツの大きさを固定させる方法
  • CSSを効率的に記述する方法
• を勉強しました.

今回はここまで作ります

おしらせセクション

まずはおしらせを表示する領域を用意しましょう.

つまり, コンテナを用意するということです.

sectionタグの直下にコンテナを作り, h2タグを入れ込みます.

「div.information_container」と入力してみてください.
すると,information_containerクラスが自動で付与されますよ

<section id="information">
  <div class="information_container">
    <h2>おしらせ</h2>
  </div>
</section>

おしらせセクション

枠線を作りましょう

cssでこちらを記述してみましょう.

.information_container{
  border: #00EDFF 3px solid;
}

「お知らせ」の周りに枠線が出来たと思います.

値の意味は, 順番に 色 ‐> 太さ ‐> 線の種類 です.

線の種類は, 点線や二重線など,他にもいろいろあります.
詳しくはこちら(公式リファレンス)

補足

box-sizing: border-box

前回に解説するには難しいと感じたため, あえて触れていませんでした.
リセットCSSに追加したこれは,
要素の大きさ(高さや幅)に, paddingや枠線を含めるという意味です.
開発者ツールで確認してみると,
「おしらせ」のh2の横幅は930pxですが,
それ以外のh2の横幅は936pxになっていると思います.
これは, h2要素の横幅は936pxだと決まっているので, 枠線を足したことでコンテンツの表示幅がその分狭くなったということです.
レイアウト崩れを防ぐことができるので, よく用いられるプロパティです.

おしらせセクション

枠線の角に丸みを付けましょう

先ほどのクラスセレクタにこちらを追加してみてください.

border-radius: 10px;

値のピクセルを大きくするほど, 角の丸みが強くなります.
値をいじって確認してみてください.

おしらせセクション

課題

「おしらせ」を横軸の中心に配置してください.

ヒント : 前回どこかで使用したスタイルと全く同じです.

おしらせセクション

模範解答

.information_container h2{
  text-align: center;
}

おしらせを作る

おしらせの中に, こんな感じで各おしらせのタイトルを表示します.

おしらせを作る

まずはこのように要素を作りましょう.

<div class="information_container">
  <h2>おしらせ</h2>
  <div class="subject_container">
    <p class="date">2025/7/4</p>
    <p class="genre">総会</p>
    <p class="title">7月16日に総会を行います.</p>
  </div>
</div>

subjectクラスの中で, date : genre : title を 1 : 1 : 4 の比率で横に並べたいです.

割合を指定して分割

そうするには, subject_containerに対してこのようなスタイルを適用します.

.subject_container{
  display: grid;
  grid-template-columns: 1fr 1fr 4fr;
}

順番に解説します.

display

CSSにおける, 要素の種類

大きく分けて, HTML要素には3種類の並べ方が存在します.

display: block;

デフォルトの並べ方. 縦に並べていきます.

display: flex;

横に並べていきます. 要素が大きすぎたり, 多すぎたりするとはみ出る.

display: grid;

一行に並べる要素数を固定し, 割合を分割して配置します.

gridの割合の指定方法

grid-template-colums

これが, grid要素の横に並べる要素数と, その幅の割合を指定するプロバティです.

「fr」というのが, 要素の横幅の割合を指定する値です.
例えば, 1fr 1fr の場合は 1 : 1 です.
横幅を12分割して考えることが多いです.
1 : 1 : 2 とか 3 : 3 : 3 : 3 とか

もう一度さっきのスタイルを見てみよう

.subject_container{
  display: grid;
  grid-template-columns: 1fr 1fr 4fr;
}

コンテナ内の3つの要素を, 1 : 1 : 4 で横並びに分割するという意味なのが分かりますか?

続いて, 各要素のスタイルを変更します.

おしらせを作る

課題1

左詰めになっている日付を, 中心に配置されるようにしてください.

課題2

おしらせのジャンルを, 中心に配置されるようにし, 背景色を#00ffc3に変更してください. また, 角を20pxで丸くしてください. そして, 上下に2px, 左右に20pxのマージンを与えてください.

おしらせを作る

模範解答

.date{
  text-align: center;
}

.genre{
  text-align: center;
  background-color: #00ffc3;
  border-radius: 20px;
  margin: 2px 20px;
}

おしらせを作る

お知らせ欄っぽくするためにお知らせを増やします.

<section id="information">
  <div class="information_container">
    <h2>おしらせ</h2>
    <div class="subject_container">
      <p class="date">2025/7/4</p>
      <p class="genre">総会</p>
      <p class="title">7月16日に総会を行います.</p>
    </div>
    <div class="subject_container">
      <p class="date">2025/7/4</p>
      <p class="genre">購入品</p>
      <p class="title">本を新しく購入しました.</p>
    </div>
    <div class="subject_container">
      <p class="date">2025/7/3</p>
      <p class="genre">受賞報告</p>
      <p class="title">技育CAMPハッカソン Vol.4にて最優秀賞を受賞しました.</p>
    </div>
  </div>
</section>

おしらせを作る

スタイルを整える

おしらせがたくさんあると見づらいので, 少し手を加えます.

h2要素と, subjectコンテナに対して,

border-bottom: rgb(165, 165, 165) 1px solid;

を適用します.
続いて, なんか窮屈なので, subjectコンテナの上下にpaddingを与えます.

padding: 5px 0;

おしらせを作る

スタイルを整える

隙間が一切なくてダサいので, informationコンテナに対して,このようなpaddingを与えます.

padding: 10px 20px;

paddingを追加したことで, h2の上下のバランスが崩れたので, h2の下に上と同じ高さのpaddingを与えます.

padding-bottom: 10px;

おしらせを作る

一応載せておきます.

.information_container{
  border: #00EDFF 3px solid;
  border-radius: 10px;
  padding: 10px 20px;
}

.information_container h2{
  text-align: center;
  border-bottom: rgb(165, 165, 165) 1px solid;
  padding-bottom: 10px;
}

.subject_container{
  display: grid;
  grid-template-columns: 1fr 1fr 4fr;
  border-bottom: rgb(165, 165, 165) 1px solid;
  padding: 5px 0;
}

おしらせを作る

いい感じになりました!

団体概要を作る

こちらも最初にコンテナを作ります.

左側にテキストを配置するので,名前を
「section_left_container」とします.
続いて,文などを置くための
「sentence_container」と,画像を置くための「section_image」コンテナを用意します.

団体概要を作る

左に文章を,右に画像を表示出来るようにします.

.section_left_container{
  display: grid;
  grid-template-columns: 3fr 2fr;
  column-gap: 30px;
}

コンテナ内の2つの要素の横幅を3:2で分割します.
そして,column-gapで横に並ぶ要素の間隔を30px離しました.

団体概要を作る

<section id="about">
  <h2>団体概要</h2>
  <div class="section_left_container">
    <div class="sentence_container">
    </div>
    <div class="section_image">
    </div>
  </div>
</section>

次はsentence_containerの中にコンテンツを記述していきます.

団体概要を作る

表を使う

こんな感じで基本情報をまとめた表を作ります.

団体概要を作る

<table>
  <tbody>
    <tr>
      <td>サークル名</td>
      <td>システム工学研究会(通称シス研)</td>
    </tr>
    <tr>
      <td>創設年</td>
      <td>1976年</td>
    </tr>
    <tr>
      <td>会員数</td>
      <td>267名(2025年)</td>
    </tr>
  </tbody>
</table>

団体概要を作る

この状態だと非常に見づらいので,スタイルを適用します.

.sentence_container table{
  width: 100%;
  border-collapse: collapse;
}

.sentence_container table tr{
  border-top: rgb(165, 165, 165) 1px solid;
  border-bottom: rgb(165, 165, 165) 1px solid;
}

.sentence_container table td{
  padding: 4px 0;
}

団体概要を作る

説明文を追加する

<p>シス研は,愛知工業大学公認の情報系サークルです.</p>
<p>
  所属している学生は,情報科学部が大多数を占めますが,工学部の学生も2割ほど加入しています.
</p>
<p>
  サークルのメンバーでチームを組んでハッカソンに挑戦したり,放課後に集まって一緒に課題をやったりして,技術に触れながら自由に活動しています.
</p>

このままコピーして,テーブルの下に貼り付けてください.

団体概要を作る

説明文を追加する

読みづらいので,文と文の間に少し上下の余白が欲しいです.
よって,コンテナ内のpタグにスタイルを追加します.

.sentence_container p{
  padding: 4px 0;
}

団体概要を作る

画像を追加する

さっき用意した「section_image」の中に画像を入れます.

<div class="section_image">
  <img
    src="./images/busitu.jpg"
    alt="busitu"
    width="300"
    height="200"
  />
</div>

団体概要を作る

画像を追加する

.section_image{
  align-content: center;
}

.section_image img{
  width: 100%;
  height: auto;
}

団体概要を作る

aline-content:

自身の持つ要素を,どこに配置するかを決めます.
ブロック要素は何も設定しない場合,勝手に一番上に配置されますが,これを使うと,中心や一番下に置くことができます.
(実は間違った説明ですが,簡単のためにこう説明させてください.)

start; 一番上に配置します.

center; 中心の高さに配置します.

end; 一番下に配置します.

団体概要を作る

こんな感じになりましたか?

活動内容を作る

今回も最初にコンテナを用意するのですが,今回は左に画像を,右に文章を配置したいので,名前を
「section_right_container」とします.
そして,中にさっきとは逆の順番で,
「section_image」と「sentence_container」を用意します.

<section id="activity">
  <h2>活動について</h2>
  <div class="section_right_container">
    <div class="section_image">
    </div>
    <div class="sentence_container">
    </div>
  </div>
</section>

活動内容を作る

さっき使った,「section_left_container」は
文章3 : 画像2 でしたが,今そのままこのコンテナのスタイルを使うと,
文章2 : 画像3 になってしまうので,比率をさっきとは逆にします.

.section_right_container{
  display: grid;
  grid-template-columns: 2fr 3fr;
  column-gap: 30px;
}

活動内容を作る

画像を追加する

<div class="section_image">
  <img
    src="./images/benkyoukai.jpg"
    alt="benkyoukai"
    width="300"
    height="200"
  />
</div>

スタイルもさっきと同じなので,手を加える必要はありません.

活動内容を作る

文章を追加する

「sentence_container」内に,文を追加します.

<div class="sentence_container">
  <p>
    4号館1階にある部室を午前9時から午後10時まで自由に利用することができ,気軽に集まって活動しています.
  </p>
  <p>
    活動内容は,ハッカソンへの参加や工科展･TOKYO GAME
    SHOWへの出展,勉強会の開催,BBQやクリスマス会等のの交流会,サーバーの管理など多岐にわたります.
  </p>
</div>

活動内容を作る

リストを追加する

シス研部員が使用している技術たちをまとめて紹介したいので,リストを追加します.

<h3>使用技術</h3>
<div class="list_container">
</div>

最後のpタグの下にこれを追加してください.
やってきましたh3です.こんな感じで,見出しを更に追加した方がいいと思ったところでheadingは使います.

活動内容を作る

リストを追加する

「list_container」の中にリストを作ります.

<div class="list_container">
  <ul>
    <li>Webサイト･Webアプリケーションの制作</li>
    <li>Unityを用いたゲーム開発</li>
    <li>BlenderやMayaを用いた3Dモデリング</li>
    <li>
      Raspberry
      PiやAruduino,ESP32などを使った組み込みシステムの開発
    </li>
    <li>モバイルアプリの開発</li>
    <li>サーバー運用</li>
  </ul>
  <p>など</p>
</div>

活動内容を作る

このままだと,普通に考えて「など」の位置がおかしいですよね?
あと,こういうときは箇条書きの点が欲しいものです.
よって,このようなスタイルを追加します.

.list_container{
  display: flex;
}

.sentence_container ul{
  padding-bottom: 1rem;
}

.sentence_container li{
  list-style-type: disc;
  list-style-position: inside;
  margin-left: 24px;
  text-indent: -22px;
}

.list_container p{
  align-content: end;
  padding: 0;
  width: 48px;
}

活動内容を作る

一つずつ解説します.

.list_container{
  display: flex;
}

先ほど紹介した,自身の持つ要素を横に並ぶように変更するスタイルです.

ここでは,「ul」と「p」を横並びにしています.

活動内容を作る

.sentence_container ul{
  padding-bottom: 1rem;
}

「など」を配置する位置を,リストの右下に配置させたいので(画像参照),リストの高さを一文字分追加しました.

活動内容を作る

.sentence_container li{
  list-style-type: disc;
  list-style-position: inside;
  margin-left: 24px;
  text-indent: -22px;
}

liタグ全体に対して,list-style-type: none;を書いているため,コンテナ内のみdiscで上書きしました.また,点を付けると,デフォルトは要素の外につけてしまうので,list-style-position: inside;で,要素の内側になるように設定しました.しかし,それだと一つのデータのテキストが長い時に変なことになるので,おなじないをかけています.

活動内容を作る

.list_container p{
  align-content: end;
  padding: 0;
  width: 48px;
}

「など」を右下に配置するためのスタイルです.
要素を一番下に配置しています.
sentence_container内のpには,上下に4pxのpaddingをかけているので,0で上書きします.
また,要素幅によっては,「など」が縦になってしまうので,横幅を固定させています.

魅力の紹介

残りは特に新しいことがありません

<section id="attraction">
  <h2>シス研の魅力</h2>
  <div class="section_left_container">
    <div class="sentence_container">
      <p>
        シス研の魅力は,先輩や自分の学科以外の人とも気楽に交流できることです.
      </p>
      <p>
        KKならWeb, KXならデザインやゲーム,
        EVなら組込みといったように,学科ごとに得意な分野が異なります.
        それぞれの専門分野を活かして協力し合うことで,様々なプロダクトを制作することができます.
        また,技術力の高い先輩から技術を教えてもらうこともできます.
      </p>
      <p>
        また,様々なジャンルの技術本を備えており,自由に閲覧することができます.先輩が選んだ本がほとんどなので,良い本で効率的に学ぶことができます.
      </p>
    </div>
    <div class="section_image">
      <img
        src="./images/books.jpg"
        alt="books"
        width="300"
        height="200"
      />
    </div>
  </div>
</section>

備品の紹介

<section id="fixtures">
  <h2>備品一覧</h2>
  <div class="section_right_container">
    <div class="section_image">
      <img
        src="./images/bihin.jpg"
        alt="bihin"
        width="300"
        height="200"
      />
    </div>
    <div class="sentence_container">
      <p>
        シス研の部室には様々な物品が備わっており,技術に触れるための環境が整っています.
      </p>
      <div class="list_container">
        <ul>
          <li>プロジェクター</li>
          <li>ACアダプタ</li>
          <li>ケーブル</li>
          <li>本</li>
          <li>工具各種</li>
          <li>モバイルモニター</li>
          <li>ホワイトボード</li>
          <li>プリンター</li>
          <li>電子工作キット</li>
          <li>WindowsPC</li>
          <li>Macbook(intelプロセッサー)</li>
          <li>調理器具</li>
        </ul>
        <p>など</p>
      </div>
    </div>
  </div>
</section>

SNSリスト

リストを横向きに変更します.

.sns_container ul{
  display: flex;
}

このままだと窮屈過ぎるので,左にだけ余白を追加しましょう.

.sns_container li{
  margin-left: 8px;
}

SNSリスト

選択していることを分かりやすくする

今,各SNSのアイコンにカーソルを合わせると,矢印から指に変わりますよね?
これは,aタグに対して当てられているスタイルによる効果です.
しかし,これだけでは自分が選んでいるSNSが何なのかよく分かりません.
そこで,次のようなスタイルを追加してみます.

SNSリスト

選択していることを分かりやすくする

.sns_container img{
  transition: all 0.3s;
}

.sns_container img:hover{
  transform: scale(1.2);
}

SNSリスト

選択していることを分かりやすくする

.sns_container img:hover

は,img要素にカーソルが合っている(ホバーされている)間だけ,このスタイルを適用するという意味です.

transform: scale(1.2);

は,要素の大きさを1.2倍に変形させる(トランスフォームする)という意味です.

SNSリスト

選択していることを分かりやすくする

.sns_container img{
  transition: all 0.3s;
}

これは,自身に当てられているtransformを,どのように変化させるかを指定するためのプロパティです.
1つ目の値が,対象です.今回は一つしかありませんが,allを使用しています.
2つ目の値が,どのぐらいの時間を掛けて変化させるかです.
今回は,ホバーされてから0.3秒掛けて大きくさせています.

大きな画像を載せる

Webサイトでは,サイトを訪れた際に一番最初に画面いっぱいに画像を表示させるといった手法をよく取ります.

mainタグ内の一番上に,
「welcome_container」を追加します.
続いて,コンテナ内に画像を配置します.

<div class="welcome_container">
  <img src="./images/welcome.jpg" alt="welcome" />
</div>

大きな画像を載せる

画像の大きさを調整します.

.welcome_container img{
  width: 100%;
  height: auto;
}

大きな画像を載せる

続いて,文字を用意します.imgタグの下にこれを追加してください.

<p>Welcome to Sysken!</p>

スタイルを追加してください.

.welcome_container p{
  width: 100%;
  color: white;
  font-size: 50px;
  margin: 0;
  text-align: center;
}

大きな画像を載せる

文字を画像の上に重ねるために,このようなスタイルを当てます.

.welcome_container{
  position: relative;
}

.welcome_container img{
  width: 100%;
  height: auto;
}

.welcome_container p{
  width: 100%;
  color: white;
  font-size: 50px;
  margin: 0;
  text-align: center;
  position: absolute;
  top: 50%;
}

大きな画像を載せる

position; relative, absolute

かなり難しいですが頑張ってください.

position: absolute;が適用された要素は,〇〇の要素から左右上下,~~離れた場所に配置する.といった,他要素からの相対的な位置を指定して配置することができます.何も設定されなかった場合,ページの左上になりますが,position: relative;が適用されている要素の中にabsoluteの要素が入ると,relativeの要素が相対的な基準となります.

簡単に言うと,absoluteっていう便利な機能を使うためにrelativeが必要ということです.

大きな画像を載せる

.welcome_container p{
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
}

つまり,この部分で重ねるためのスタイルと,テキストを中心に配置するためのスタイルを当てており,コンテナに対して
position: relative;を適用させているので,
コンテナの中心の高さの位置に横幅いっぱいのp要素を配置させています.

ナビゲーションバーを作る

今はヘッダーにシス研のロゴしか置かれていないので,ナビゲーションバーとメニューボタンを追加します.

ナビゲーションバー

自分のサイトの他ページに画面遷移させるためのリンク集です.
(今回は勉強会の進行の都合上,あまり見たこと無いような使い方をします.ご了承ください.)

ナビゲーションバーを作る

header内にコンテナを用意します.その中に「nav」タグを作ります.

<header>
  <img/>
  <div class="navigation_container">
    <nav>
    </nav>
  </div>
</header>

divを用意したのは,左端にロゴを,右端にナビゲーションバーとメニューボタンを配置させたいので,右に配置する2つを1要素内にまとめてしまった方が楽だからです.

ナビゲーションバーを作る

headerに対してこのようなスタイルを適用します.

header{
  display: flex;
  justify-content: space-between;
}

flex要素に対して,
justify-content: space-between;を当てると,
2つの要素を左端と右端に配置してくれます.

ナビゲーションバーを作る

nav内に,これだけのリンクを追加してください.

<a href="#about">団体概要</a>
<a href="#activity">活動</a>
<a href="#attraction">魅力</a>
<a href="#fixtures">備品</a>
<a href="./pages/access.html">アクセス</a>
<a href="./pages/inquiry.html">お問い合わせ</a>

後半2つの別ページは後で追加します.

ナビゲーションバーを作る

href="#"

これはページ内の特定のidの場所へ飛ばすことの出来るリンクです.
sectionを設定した時に,classではなくidで名前を付けました.
なので,今の例のように,#id名をパス(URL)に指定することで,自分の設定した見出しの場所まで飛ばすことができます.
(先ほど述べた通り,あまりナビゲーションバーにこれを付けることはありません.後半2つの用に,別ページに飛ばすために使うのが一般的です.)

ナビゲーションバーを作る

スタイルは特に新しく学ぶことがないので以下をペーストしてください.

nav{
  display: flex;
  color: black;
  align-items: center;
}

nav a{
  margin: 0 10px;
  padding: 3px 10px;
  background-color: #0000A0;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}

nav a:hover{
  color: #dfbbff;
}

Material Iconを使う

Material Icon

無意識の内に,よく見ているはずのアイコン.多分ほとんどはこのMaterial Iconです.
Googleが「これ全部自由に使っていいよ!」って配布してくれています.
下のリンク先に載っているもの全部です.

Material Symbols & Icons

Material Iconを使う

今回は「Menu」を使いたいので,サイトの中から「Menu」アイコンを探します.
選択すると,右サイドバーに色々出てきます.
分かりづらいですが,そこにあるコードブロック内のテキストを貼り付けたら使えるよ!って書いてあります.
ですが,実はそんなに長いコードを貼り付ける必要はありません.

Material Iconを使う

headタグ内にこれを貼り付けてください.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

続いて,aタグの下に

<span class="material-icons">menu</span>

このように「material-icons」クラスの付いたspanタグを追加し,値をアイコン名にしてください.
これだけで使うことができます.

Material Iconを使う

スタイルの指定

span.material-icons{
  font-size: 40px;
  color: #0000A0;
  cursor: pointer;
}

通常のテキストと同じ様にスタイルの指定ができます.

通常であれば,メニューボタンを押したらサイドバーが出るようにしますが,今回は見た目までに留めておきます.

ヘッダーを完成させる

.navigation_container{
  display: flex;
  align-items: center;
}

navとspanが横並び,中心揃えになるようにスタイルをあてます.

ヘッダーを完成させる

ヘッダーを画面最上部に固定させます.

headerのスタイルに,以下のプロパティを追加してください.

position: fixed;

positionの値は,absolute,relative以外にもあります.このfixedは,表示領域から見てどこに配置するかを固定する値です.

fixedだけ適用して,位置を何も指定しなかった場合,自動的に画面左上に固定されます.

ヘッダーを完成させる

スタイルを整えます

以下をペーストしてください.

header{
  padding: 0 10px 0 2rem;
  background-color: rgb(210, 255, 255);
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

header img{
  width: 140px;
  height: auto;
  margin: 8px 0;
}

ヘッダーを完成させる

この状態でスクロールさせてみてください.
すると,下の大きい画像がheaderを隠す様に通って行くと思います.
これではおかしいですよね.

これは,imgに適用されているposition:relativeが悪さをしています.
retativeの付いた要素は,描画の優先順位が高いためこうなっています.

実はWebページは,縦横だけでなく,レイヤー分けもすることができます.
言い換えると,x,y軸だけでなく,z軸の指定も出来ます.

なので,z軸の設定を弄って,無理やりheaderの優先順位を上げます.

ヘッダーを完成させる

まずは,画像を表示させているコンテナに対して,
z-index: 1; を指定します.

.welcome_container{
  position: relative;
  z-index: 1;
}

続いて,headerに対して z-index: 2;を追加してください.

スクロールして,画像がヘッダーの下を通ることを確認しましょう.

z-indexの値が大きいほうが,上のレイヤーとなります.

ヘッダーを完成させる

今のままだと画像の上の方が隠れていると思います.
main要素に対して,上にmarginを与えてあげましょう.

main{
  padding-top: 66px;
}

ヘッダーを完成させる

また,ナビゲーションバーから見出しに飛ぶと,なんか位置がズレていますね
これも直します.sectionに対するスタイルを追加してあげます.

section{
  padding: 20px 0;
  scroll-margin-top: 56px;
}

scroll-margin-topで,aタグから飛んだ時,上にmarginを追加するようにしました.
ついでに,窮屈感を無くしました.

別ページを追加する

index.htmlと同階層にpagesフォルダを作成してください.
また,cssフォルダも作成してください.

フォルダ内に入れるファイルはここに用意してあるので,ダウンロードして,移動させてください.

配布用GDriveストレージ

このように, 同一拡張子のファイルはまとめて管理するのが一般的です.

index.cssもcssフォルダの中に移動させて,index.htmlのlinkタグ内のhrefを書き換えてください.

フッターに情報を追加する

この部分を作ります.headerのときと同じ手法を使います.

ulタグの下に以下を追加してください.

<div class="support_container">
  <a href="https://www.sysken.net/" target="_blank"
    >シス研本家サイトはこちら</a
  >
  <a href="./pages/inquiry.html">お問い合わせ</a>
</div>

フッターに情報を追加する

SNSアカウントの紹介の部分を,コンテナで囲います.
h3タグからulの閉じタグまでを,「sns_container」の中に入れてください.

<div class="sns_container">
  <h3>シス研公式アカウント</h3>
  <p>日々の活動を発信中!</p>
  <ul>
    ⋮
  </ul>
</div>

フッターに情報を追加する

続いて,フッター内にコンテナを追加します.
snsコンテナとsupportコンテナを「footer_container」に入れてください.

<footer>
  <div class="contents_container">
    <h2>システム工学研究会</h2>
    <div class="footer_container">
      <div class="sns_container">
        <h3>シス研公式アカウント</h3>
        <p>日々の活動を発信中!</p>
        <ul>
          ⋮
        </ul>
      </div>
      <div class="support_container">
        <a href="https://www.sysken.net/" target="_blank"
          >シス研本家サイトはこちら</a
        >
        <a href="./pages/inquiry.html">お問い合わせ</a>
      </div>
    </div>
    <p class="copyright">&copy 2025 sysken</p>
  </div>
</footer>

フッターに情報を追加する

.footer_container{
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0 44px;
}

.support_container{
  display: flex;
  flex-direction: column;
}

.support_container a{
  color: white;
  text-decoration: none;
}

.support_container a:hover{
  color: #dfbbff;
}

.support_container a:first-child{
  font-size: 20px;
  font-weight: bold;
}

.support_container a:last-child{
  text-align: end;
}

フッターに情報を追加する

:first-child, last-child

これは,その要素内で◯番目の要素にのみスタイルを当てるというセレクタの指定方法です.
first-childで最初の,last-childで最後の.です.
今回は2個しか無いので使い所が無いですが,
:nth-child(n)
でn番目の要素
という指定方法もあります.

一応紹介しておきました.

フォントを変更する

トップ画像に表示されているテキストのフォントを変えてみましょう.
Webページのフォントを選ぶ際には,大抵Google Fontsが使用されます.
Google Fonts

Material Iconと同じく,サイト内のフォントは自由に使用することができます.
今回は,この中から「Dela Gothic One」を使ってみます.

フォントを変更する

headタグ内に,以下を追加します.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap"
/>

フォントを変更する

続いて,welcome_container内のpに以下のスタイルを追加します.

font-family: "Dela Gothic One", sans-serif;
font-weight: 400;
font-style: normal;
text-shadow: 3px 3px rgba(0, 0, 160, 0.6);

上3つがフォントに関するスタイルです.
使用するフォントと,フォントに関する情報を与えています.
これはフォントによっても異なるので,自分でフォントに必要な情報を確認する必要があります.
見づらいので,おまけに影を付けてあります.

ファビコンを追加する

ファビコン

ブラウザのタブに書かれた,ページタイトルの左にあるアイコンのことです.原則iconファイルである必要があります.(.ico拡張子)
推奨サイズは48px✕48pxです.

配布用GDriveストレージ

「favicon.ico」をimgフォルダに追加し,headタグ内に以下を追加してください.

<link rel="icon" href="./images/favicon.ico" />

見た目の調整

画面遷移時にヘッダーが若干ズレるので,以下を追加します

html{
  overflow-y: scroll;
}

スクロールバーを表示領域の右に必ず表示されるようにしました.アクセスページとお問い合わせページに適用するためのスタイルです.

おまけ① レスポンシブデザイン

このコードをCSSファイルの一番下に貼り付けてください.

@media screen and (1600px < width){
  .contents_container{
    width: 1280px;
  }
}

@media screen and (1440px < width <= 1600px){
  .contents_container{
    width: 1152px;
  }
}

@media screen and (1024px < width <= 1440px){
  .contents_container{
    width: 1010px;
  }
}

@media screen and (768px < width <= 1024px){
  .contents_container{
    padding: 0 2rem;
    width: 100%;
  }
  nav a{
    margin: 0 5px;
    padding: 2px 8px;
  }
}

おまけ① レスポンシブデザイン

この状態で,開発者ツールを開き,画面幅を変動させてみてください.
コンテンツの幅が,画面幅によって段階的に切り替わります.

• 大まかに説明すると,
  • 4kディスプレイ
  • wqhdディスプレイ
  • フルHDディスプレイ
  • タブレット

によってコンテンツ幅を変動させています.
スマホまでは面倒くさいので書いてません...

おまけ②

作ったサイトを公開する(デプロイ)

デプロイする方法(利用できるホスティングサービス)には色々あります.
GitHub PagesやCloudeflareなど

僕はVercelが好きなのでこちらを利用していきます.

Vercel

おまけ②

作ったサイトを公開する(デプロイ)

必要なもの

GitHubのアカウントのみ

Git･GitHubについてはこちらで勉強してください.

https://docs.google.com/presentation/d/10PzsAQfzo6dk5GTsI8KyVx8B06mnmTRhWNJOT6kSSfs/edit?slide=id.p#slide=id.p

おまけ②

作ったサイトを公開する(デプロイ)

VercelとGitHubアカウントを紐づけます.
すると,ダッシュボード画面がこんな感じになります.

おまけ②

作ったサイトを公開する(デプロイ)

左上の「Add New...」を選択すると,下に「Project」が出てきます.
選択するとこのようなページに遷移します.

おまけ②

作ったサイトを公開する(デプロイ)

Import Git Repositoryから,デプロイしたいリポジトリを選択します.
選択後の遷移先がこれです.あとはDeployを押すだけで公開されます.