test.htmlを編集していきます
Work①文字を書く
■Work①:test.htmlに文字を書いてLive Serverで確認してみましょう。(
動画:Live Serverの使い方)
段落など、塊ごとにdivタグで括るようにして、文字を書いていきましょう。
divはdivision(分割)の略です。
ああああああ
改行はbrタグを使います。
ああああああ
12345678
いいいいいい
Work②画像の挿入
■work②:test.htmlにimagesフォルダにあるtest.pngを挿入してみましょう
画像の表示にはimgタグを使います。(imageの略)
imgタグのsrcという属性にファイルパスを記載します。(srcはsourceの略です)
width属性は幅を設定します。%で指定するとスクリーンに対して何%の幅にするかを指定できます
【書き方】
画像を表示(30%)
画像を表示(40%)
画像を表示(30%)
画像を表示(40%)
画像サイズに関する注意
スマホやデジカメで撮影した写真は綺麗に印刷できるように、すごく解像度が高く、サイズが大きくなっています。
しかし、HPで表示するにはそれほどの大きなサイズは必要なく、むしろサイズが大きいと表示に時間がかかります。
今後写真をGitHubにプッシュする場合は写真のサイズを1MB(1024KB)以下に落としてください。
Macでの写真サイズの変更方法(
doyolab)
Windowsでの写真サイズの変更方法(
外部サイト)
Work③箇条書き
■work③:test.htmlに何か箇条書きをしてみましょう
番号付きの箇条書きはolタグ(ordered listの略です)
各項目はliタグで括ります(listの略です)
【書き方】
- ああああああ
- いいいいいい
【結果】
- ああああああ
- いいいいいい
番号なしの箇条書きはulタグ(Unordered listの略です)
【書き方】
【結果】
Work④リンク
外部サイトに関して
外部サイトにリンクを貼る場合は自分のサイトではないことを、明記しましょう。
動画に関して
動画ファイルは重いので、絶対にGitHubにプッシュしないでください。最悪、リポジトリが壊れます。
動画を表示したい場合は、動画をYouTubeにアップして、そこにリンクを貼るか、htmlに埋め込むコードを発行して、htmlファイルに貼り付けましょう。
参考:
YouTubeヘルプ
Work⑤タイトル
■work⑤:test.htmlのheadの部分のtitleを自分なりのタイトルに変更してみましょう。
【書き方】
XBPのページ
【結果】
ブラウザのタブの表示を確認してください。
Work⑥スタイルシートの設定
cssファイルはhtmlのいろんな書式を決めておいて、それを読み込めばタグごとの書式が反映されるファイルです。
■work⑥:headの部分でcssフォルダにあるstyle.cssをスタイルシートに設定してみましょう。
h1.htmlからある行をコピペしてくればOKです
スタイルシートの読み込みがうまくいけば、test.htmlの背景や右側の余白が整うはずです。
【結果】
背景や右側の余白が整うはずです。
宿題
次回授業までの宿題
■1.htmlというファイルを作ってください(test.htmlをコピーすると簡単です。)
■1.htmlに一回目の授業のポイントを画像やリンクなどを交えて、自分なりにできるだけ詳細&良いデザインでまとめてください。
(やったことは必ず忘れるので、自分で見返してわかるように)
■de12フォルダの直下にあるindex.htmlの演習ノートの下に番号なし箇条書きで、「第1回」と記述し、1.htmlにリンクさせてください。
イメージはこのような感じです。
■GitHubにプッシュしてください。
■余裕のある人は、インターネットなどを調べてデザインを自分なりのものに変更してみてください。
ただし、みなさんの課題を見つけられなくなるので、デザイン演習Ⅰ・Ⅱのトップページは今回の宿題のような箇条書きで各回のページに飛ぶようにしてください。
皆さんのまとめたものを見つけられないと成績をつけられません。