1.XBP用のホームページを作成

XBPのHPの構成

ブートキャンプでホームディレクトリの中にmygitフォルダを作り、その中にxbpフォルダを作りました。
デザイン演習Ⅰ・Ⅱフォルダ(de12)の中を編集していきます。

■BootCampで作ったフォルダ
ホームディレクトリ
        |---mygit
           |---xbp


トップページはindex.html

例えば、
https://kuxbp.github.io/xbp/xbp2021/design_e12/
というURLをブラウザに入力すると、その階層にあるindex.htmlを表示させます。

2.テストページを編集してみる

test.htmlを編集していきます

Work①文字を書く

■Work①:test.htmlに文字を書いてLive Serverで確認してみましょう。(動画:Live Serverの使い方)

段落など、塊ごとにdivタグで括るようにして、文字を書いていきましょう。
divはdivision(分割)の略です。
<div> ああああああ </div> 改行はbrタグを使います。 <div> ああああああ<br> 12345678<br> いいいいいい </div>

Work②画像の挿入

■work②:test.htmlにimagesフォルダにあるtest.pngを挿入してみましょう

画像の表示にはimgタグを使います。(imageの略)
imgタグのsrcという属性にファイルパスを記載します。(srcはsourceの略です)
width属性は幅を設定します。%で指定するとスクリーンに対して何%の幅にするかを指定できます
【書き方】 画像を表示(30%)<br> <img src="images/testimage.png" width="30%"><br> 画像を表示(40%)<br> <img src="images/testimage.png" width="40%"><br>
画像を表示(30%)

画像を表示(40%)

画像サイズに関する注意

スマホやデジカメで撮影した写真は綺麗に印刷できるように、すごく解像度が高く、サイズが大きくなっています。
しかし、HPで表示するにはそれほどの大きなサイズは必要なく、むしろサイズが大きいと表示に時間がかかります。
今後写真をGitHubにプッシュする場合は写真のサイズを1MB(1024KB)以下に落としてください。
Macでの写真サイズの変更方法(doyolab)
Windowsでの写真サイズの変更方法(外部サイト)

Work③箇条書き

■work③:test.htmlに何か箇条書きをしてみましょう

番号付きの箇条書きはolタグ(ordered listの略です)
各項目はliタグで括ります(listの略です)
【書き方】 <ol> <li>ああああああ</li> <li>いいいいいい</li> </ol> 【結果】
  1. ああああああ
  2. いいいいいい
番号なしの箇条書きはulタグ(Unordered listの略です) 【書き方】 <ul> <li>あああああ</li> <li>いいいいいいい</li> </ul> 【結果】

Work④リンク

■work④:test.htmlにリンクを作成してみましょう。

リンクを作りたい時はaタグを使います(Anchorの略です)
href属性にリンク先を記載します(hypertext referenceの略です)
target属性に_blankを設定すると新しいタブでリンクが開きます。設定しないと、同じタブ
【書き方】 <a href="index.html">デザイン演習Ⅰ・Ⅱトップページ</a><br> <a href="../index.html">XBPトップページ</a><br> <a href="https://www.yahoo.co.jp/" target="_blank">Yahoo</a><br> <a href="files/test.pdf" target="_blank">pdfファイル</a> 【結果】
デザイン演習Ⅰ・Ⅱトップページ→同じ階層(フォルダ)にあるindex.htmlに移動
XBPトップページ→「../」はひとつ上の階層を意味する。
Yahoo→新しいタブでyahooを開く
pdfファイル→filesフォルダのtest.pdfを新しいタブで開く

外部サイトに関して

外部サイトにリンクを貼る場合は自分のサイトではないことを、明記しましょう。

動画に関して

動画ファイルは重いので、絶対にGitHubにプッシュしないでください。最悪、リポジトリが壊れます。
動画を表示したい場合は、動画をYouTubeにアップして、そこにリンクを貼るか、htmlに埋め込むコードを発行して、htmlファイルに貼り付けましょう。
参考:YouTubeヘルプ

Work⑤タイトル

■work⑤:test.htmlのheadの部分のtitleを自分なりのタイトルに変更してみましょう。

【書き方】 <title>XBPのページ</title> 【結果】 ブラウザのタブの表示を確認してください。

Work⑥スタイルシートの設定


cssファイルはhtmlのいろんな書式を決めておいて、それを読み込めばタグごとの書式が反映されるファイルです。
■work⑥:headの部分でcssフォルダにあるstyle.cssをスタイルシートに設定してみましょう。

h1.htmlからある行をコピペしてくればOKです

スタイルシートの読み込みがうまくいけば、test.htmlの背景や右側の余白が整うはずです。

<link rel="stylesheet" href="css/style.css"> 【結果】 背景や右側の余白が整うはずです。

Work⑦GitHubに反映させる

GitHubに反映させてくださいここを参考