Web サイトを作ってみよう！
-- Views
April 13, 26
スライド概要
開催時期：2024 年 5 月
新入生に向けて、HTML/CSS など web サイトに関する基本的なことを説明しました。 Web サイトを作ってみたいけど何から始めたらいいのか分からないという人を対象にしました。
https://memo.crashrt.work/docs/slides/web2024
関連スライド
各ページのテキスト
Webサイトを作ってみよう！ HTMLとCSS
そもそもWebサイトって？
Webサイトが見えるまでの流れ Youtubeみたい！ YouTubeの画面のデータ送るね！ 画面表示するね！
Webサイトが見えるまでの流れ Youtubeみたい！ Youtubeの画面のデータ送るね！ 画面表示するね！ 今日はこのデータの 作り方をやります
Webサイトが見えるまでの流れ このデータを投げる人が 受け取ったデータを いい感じに画面に表示する Youtubeみたい！ のがwebブラウザ Money Forwardさんと作った HTTPサーバー Youtubeの画面のデータ送るね！ 画面表示するね！ 今日はこのデータの 作り方をやります
HTMLとCSS HTML CSS • webサイトの文書の構造を表現 • Webサイトの見え方を決める • どれが見出しでどれが本文か • サイズ・色・レイアウトなど • 理系ならそのうち使うLaTeXの親戚
HTML
サンプルについて • SlackにサンプルのZIPファイルを貼ります • これをダウンロードして右クリック→ 全て展開 を押して下さい • 展開したフォルダの中にある index.html をダブルクリックする とブラウザで結果を確認できます • 右クリックしてメモ帳とかVSCodeで開くとコードが見れます • 自由に編集してみてください！！！！
タグと要素・属性 • HTMLは基本的にタグで囲まれた構造 body要素 • <○○○> ~ </○○○> • タグに囲まれたものを そのタグの要素と呼ぶ • 各タグには属性が指定されていることも • その要素がどのような特性を持つか指定 <body> ← 開始タグ ……… ……… ← 内容 </body> ← 終了タグ 属性 <div class=“ container” > …… </div>
HTMLの基本構造 <!DOCTYPE html> HTML文書は基本的に右のような構造 <html lang="ja"> <head> <meta charser=“utf-8”> <title>タイトル</title> </head> <body> <h1>Hello, World!</h1> </body> </html>
HTMLの基本構造 – おまじない • 日本語のHTMLファイルであることを 示す（ブラウザに伝える） • これはコピペで良い <!DOCTYPE html> <html lang="ja"> <head> <meta charser=“utf-8”> <title>タイトル</title> </head> <body> <h1>Hello, World!</h1> </body> </html>
HTMLの基本構造 – head要素 • ページの設定情報を書く • 画面には表示されない • <meta charset=“utf-8”> はとり あえず書いておく • title はタイトルのための要素 • ブラウザのタブに表示される <!DOCTYPE html> <html lang="ja"> <head> <meta charser=“utf-8”> <title>タイトル</title> </head> <body> <h1>Hello, World!</h1> </body> </html>
HTMLの基本構造 – body要素 • ページのコンテンツを書く • bodyの内容が画面に表示される • 以降でbodyの中で使うタグを紹介 <!DOCTYPE html> <html lang="ja"> <head> <meta charser=“utf-8”> <title>タイトル</title> </head> <body> <h1>Hello, World!</h1> </body> </html>
段落 – pタグ • 基本的に文章はpタグで囲む • 一つのp要素で一つの段落 <p> 部員の活動拠点となっているのが部室です。 特にイベントが無くとも誰かが… </p> <p> KMCの部室には約10台のサーバのほか… </p>
見出し – h1~h6タグ • 見出しは h1タグなどで囲む • 数字が大きくなるごとに 文字は小さくなる • ページ全体の内容をh1に、 それをh2でいくつかで分けて… という感じで書くことが多い <h1>KMCの活動</h1> <h2>普段の活動</h2> <p>週2回の例会で…</p> <h2>部室</h2> <p>部員の活動拠点と…</p>
リンク – aタグ • リンクはaタグで囲う • p要素などの中で使うことが多い • URLは href 属性に書く <p> <a href=“https://kmc.gr.jp”>KMC</a> は… </p>
箇条書き – liタグとulタグ • 箇条書きは全体をulタグで囲い、 各要素は liタグで囲う <h3>好きな分野</h3> <ul> <li>インフラ</li> <li>Web開発</li> <li>デザイン</li> <li>映像</li> </ul>
divタグ • 特に意味はありません • 複数の要素をまとめるのに 使います • CSSで見た目を整えるとき とかに使います • class属性をつけることが多い <div class="title"> <h1>crashRT</h1> <p>KMC45th </p> </div>
画像の挿入 – imgタグ • 画像を挿入する場合は imgタグ を使う • imgタグはタグ単体で使い、何も囲わない • 画像ファイルは src属性 で指定する • サンプルのimageファイル内のicon.jpgは下のように書いて挿入 <img src="./image/icon.jpg">
CSS
CSSおさらい • CSSはHTMLで書いた文書の見た目を変えるためのものです！ • HTMLのタグ名とか属性で指定するクラスとかを指定して、 対応するものの見た目を変更します
CSSの読み込み • HTMLのhead要素にCSSファイルの位置を指定して読み込みます <link rel="stylesheet" type="text/css" href="./css/style.css"> • サンプルはすでに指定してあります • css というフォルダの中にある style.css をメモ帳とかVSCodeで 編集してください
CSSの書き方 • CSSは基本的に右のような感じ のが並んでいます h2 { text-align: center; margin-top: 5rem; } .lead { font-size: 1.25rem; margin-top: 0.25rem; }
CSSの書き方 – 要素の指定 • 見た目を変更したい要素を指定 h2 { • 要素名(h1とかpとか)の場合 • そのまま h1 とかって書く • クラス名の場合 • .クラス名 のようにクラス名の text-align: center; margin-top: 5rem; } .lead { font-size: 1.25rem; 先頭にピリオドをつける • ある要素の中のこれだけ！とかで 使います margin-top: 0.25rem; }
クラス名の指定 – HTMLとCSS
• HTMLでは class = “ クラス名”
<p class="lead">KMC45th </p>
と開始タグ内に書くとクラス名を
指定できる
• 複数でもOK
• それをCSSでは .クラス名 と指定
.lead {
font-size: 1.25rem;
}
見た目の指定
• 要素名などの後に波括弧で囲った部分
で見た目を指定していきます
h2 {
text-align: center;
• <変更するもの>:<どう変更するか>;
という書き方です
• 書き方を今から見ていきます
margin-top: 5rem;
}
.lead {
font-size: 1.25rem;
margin-top: 0.25rem;
}
文字サイズの変更 – font-size • 文字サイズを変えるには font-size : 文字サイズ; と書きます • 文字サイズの単位はpxなどが あります • 色々試してみよう！ p { font-size: 18px; }
文字色の変更 – color • 文字の色を変えるには color: 色; と書きます • 色は blue などと書くか カラーコードで#f2f2f2 のように 指定する p { color: blue; }
文字の背景色の変更 – background• 文字の背景色を変えるには background-color: 色; と書きます • 色の指定は文字色の場合と一緒 p { background-color: #f2f2f2; }
罫線 - border • 罫線をつけるには p { border: 線の種類 太さ 色; と書きます • 線の種類にはsolid, double, dotted, dashed などがあります • 色は文字色などど一緒です • 太さは文字サイズと一緒です border: solid 1px black; }
罫線 - border • 罫線を上下左右どこにつけるか指定できます • 上下左右：border • 上：border-top • 下：border-bottom • 左：border-left • 右：border-right
Advanced（上級者向け） • 余裕がある人は余白を調整してみましょう • padding と margin という2種類のものがあります • ちょっと調べつつ色々試してみてください！ • サンプルでも一部で使っています • さらに余裕がある人は：レイアウトを変更してみましょう！
Webサイトを作りたい人へ
もっとwebサイトを作りたい人へ • 今日はwebサイトを作るならほぼ必須なHTMLとCSSの 基本について話しました • 自分でwebサイトを作りたい人向けに、次やってみたら 良さそうなことを紹介していきます
HTML/CSSをちゃんと勉強する • 今日は色々省いてHTML/CSSを話しています • 本とかを読んでみるとより理解できると思います • ルネとか三条の丸善でHTML/CSSって書かれている本をいくつか パラパラ見てみて、自分が一番読みやすいやつを読みましょう • 辞めずに続けることが大事です！ • 難しそうなのは慣れてきてからで大丈夫です
作りたいものを作る • 自分が作りたいサイトがあれば、それを作るのが一番です！！ • 実際に作っちゃいましょう！ • こういうの作りたい～って部員に聞けば方針は教えてもらえます • #begginersでもmemoでも対面でも、どこでもどうぞ！ • 意外と簡単だったり、地味に難しかったり、色々あります • 部員に聞けばその辺も分かるはずです
Webの世界の分野を一部紹介 • Webサイトの世界には大きく分けて4つの分野があります • デザイン • フロントエンド • バックエンド • インフラ
デザイン • XDとかFigmaとかを使ってwebサイトのデザインを考えます • そのデザインを元にHTMLとかCSSでサイトを作っていきます • 興味がある人： • Figmaを使ってみよう！ • デザインの勉強をしてみよう！
フロントエンド • Webサイトでユーザーが操作する部分を作る人です • J avaScript, TypeScriptを使って 動きをつけたりいろんな機能をつけたりもします • 興味がある人： • HTML, CSS, J avaScriptを勉強しよう！ • React, Nextなどを勉強しよう！
バックエンド • データベースと呼ばれるものなどを使って、たくさんのデータ を効率よく管理します （同じデザイン・構造で内容が違うものがたくさん、とか） • 興味がある人： • Djangoが多分手軽に色々できる • データベースの勉強をしてみよう！
インフラ • Webサイトを公開するためのサーバーを管理する人です • サーバーそのものの管理やインターネットに繋ぐための ネットワークの管理などもします • 興味がある人： • KMCのサーバーを使ってみよう！（日曜日来てね！！！） • Linux を使ってみよう！
参考資料 • 『作りながら学ぶHTML/CSS』高橋朋代/森智香子 • Webサービス勉強会2022 • Webサービス勉強会2023 • mdn web docs イラスト：https://loosedrawing.com/