#12ゼロからwebの基本「HTML」「CSS」編 〜12日目〜 『画像を貼ってみよう』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
文字だけのサイトは見ずらいですよね、今回は少し進歩して画像を貼ってみましょう！
- 画像を用意する
まずは画像を用意しましょう。
ファイル形式は、GIF、JPEG、PNG、自分で撮った写真とか何でもいいので用意してみましょう。
※ちなみにこの記事のサンプルでは下の「2563.jpg」を使用。JPEGファイルです。
サイズは、480px x 350pxです。
スマホなどの高解像度ディスプレイだと、上のサイズだと小さすぎてボケる場合があるので幅が600〜1000pxくらいあるほうが、ほんとはいいみたいです。
- わかりやすい様にフォルダを作り画像を保存する
「image」というフォルダを作って、その中に入れましょう。
ちなみに「image」でも「img」でも、「画像が保存されているフォルダだな」と分かる名前にしてあればOKです。
そうしておけば他の人が作ったサイトを編集する際などにそのフォルダを探せば見つかるので便利です。
この記事では下の画像のように、フォルダ名「image」というフォルダの中に「2563.jpg」を置いた状況で説明します。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
HTMKのファイルは、わかりやすい様に「ゆーたろ.HTML」にしています。
ちなみに、「index」という名前にすると「デフォルトドキュメント」と言って、ファイル名を省略してもブラウザが表示するので、フォルダ内で最初に表示したいファイルはこの名前にするみたいです。アクセシビリティ的にもSEO的にもこうするクセをつけるといいって見かけました。
- <img>要素を使い、HTML上に画像を指定しよう
<img> →終了タグは無く、イメージ（image）画像という意味です。
使用する属性 →<img src="URL" width="幅" height="高さ" alt="代替えテキスト">
属性の「src」→「ソース（source）」
「ウィズ(width)」→幅。
「ハイト(height)」→高さ。
「alt」は「オルティネイト(alternate)」で「代替えの」という意味。オルトと読みます。
まず、画像をHTMLに配置するとき、その画像が置いてある場所（URL）が重要になります。
このURLが間違っていると画像は表示されません。
さっそく画像をHTML上で配置してみましょう。
前回保存したファイルに <img>要素を入れます。
下の（ <img src="image/2563.jpg" alt="" width="480" height="350"> ）をコピペして、src・alt・width・height はご自分の画像ファイルに合わせて変更してください。
<img src="image/2563.jpg" alt="" width="480" height="350">
出来たらファイルを保存してブラウザでプレビューしてみましょう。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ちゃんと<h1>の下に画像が来ていますね。
src属性やalt属性など説明しないといけない事があるのですが、それは次回にしましょう。
- 最後に
今回はここまでにしましょう。
画像を貼ってまた一歩ぽくなった気がします！笑
次回 →今回の事の振り返りで結構大切な説明をします。
#11ゼロからwebの基本「HTML」「CSS」編 〜11日目〜 『<div>要素<span>要素』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
今回は<div>や<span>などの要素を使いましょう。
- <div>要素
<div>要素とはブロックレベルです。
スタイル上での分類で、ブロックレベルという名前の通り前後が自動的に改行され、一つのブロックとしてブラウザで表示されます。
※div →ディビジョン（division）の略で分割といった意味です。
ちなみに以前やった<h1>や<p>もブロックレベルの要素です。
<div>はブロックレベルである事を示す以外には、特にHTML上の意味は持ってません。
例えば、画面全体を囲んでセンター合わせにする等スタイル指定する時など
他の要素で示すことの出来ない範囲の指定などに使います。
- <span>要素
<span>要素とはインラインです。
<div>同様スタイル上の分類で、<span>の場合前後が改行されるずブロックになりません。
※span →そのままスパンで、期間・感覚といった意味です。
インラインである事を示す以外は、特にHTML上の意味はありません。
文中の特定のテキストだけ色や書体を変えたい時など、スタイルを指定する時によく使います。
- 実際に<div>要素と<span>要素を使ってみよう
前回保存したファイルに下の様に<div>要素と<span>要素を入れてみましょう。
<div>要素は <body>要素の中身全部を指定しており。
<div> を <body>のすぐ後、</div> を </body> の直前に入れていますね。
<span>要素は文章の最後の1行だけを囲んでいます。
上の画像で言えば15、25、27ですね。
ここまで出来たら,CSSを入れてみましょう。
下の様に<div>要素と<span>要素に対するCSSを書き、
<h1>要素にも色やサイズの指定をしてみましょう。
邪魔だったので<h2>などは消しました。
前回も言った通り<head>要素の中に直接書く方法を使いましたが、
CSSは HTML上に書かずに 独立したCSSファイル にして読み込む方法が標準の様です。
↑意外と重要
では、ファイルを保存してブラウザでプレビューしてみましょう。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
結構変わりましたね。
ブロックがセンターに来ていたり<h1>の色が変わったりして、
本文との区別がつく様になりました。
- 最後に
今日はここまでです。
結構進んだ気がしませんか？
まだまだ先は長いですが一緒にゆっくりやって行きましょう。
次回 →画像を貼ってみる
#10ゼロからwebの基本「HTML」「CSS」編 〜10日目〜 『CSSを少しだけ使ってみる』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
今回は本来なら他の要素もやる予定だったのですが、まだ自分の理解が追いついてないので
予定変更をして今日は少しだけCSSを使ってみましょう！
- CSSを少しだけ使ってみよう
前回まで作ってきた物のブラウザのウィンドウを変更してみましょう。
合わせて段落の幅も変わって来ます。
そうする事によって段落の幅を固定でき、読みやすくすることが出来ますね！
早速下の様にHTML要素ではなく、（CSS)スタイルシートを使います。
<style>〜</style>の内容を<head>〜</head>の中に入力してみてください。
保存してブラウザでプレビューしてみます。
画像ではわかりにくいですが本文がブラウザウィンドウの80％幅になりました。
ついでに文字色も指定しているのでグレーになっています。
※＃の数字のところを色番号などを見て変えると他の色にも出来ますし、
80％の所の数字を変えればブラウザウィンドウの幅も変えることが出来ます。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
今回はCSSでスタイルはするということをやってみたかったので
<head>要素の中に直接書く方法を使いましたが、CSSは HTML上に書かずに 独立したCSSファイル にして読み込む方法が標準の様です。
- 最後に
今日はすごく短くなってしまいすみません。
仕事と家事の間時間で勉強しているので、極端に時間が取れない日は
今日の様な事になってしまうかも知れないです。
次回 →次こそは<div>・<span>要素をCSSを取り入れつつやって行きましょう。
#9ゼロからwebの基本「HTML」「CSS」編 〜９日目〜 『p要素』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
今回は前回少しだけ紹介した、<p>要素についてやって行きたいと思います。
- <p>要素の必要性
まずは、前回までのHTMLコードを見てみてください。
９行目と16行目をみると、この２行だけなんの要素にも囲まれていないですね。
勉強していてわかったのですが、この状態は非常に良くない状態みたいです。
よくよく考えているとわかるのですがどういう状態なのかというと、HTML文法的には
このテキストはなんの役割かわからない状態です。
ブラウザでは一応本文テキストとして表示していますが、役割わからないからとりあえずという感じに過ぎないのでまずいですね。
スタイル的にも問題ありです。
このテキストの親要素は <body>要素なので、これらのテキストのサイズを大きくしたい、または小さくしたいときは <body>要素のスタイルシートを変更するしかないく、
同じ兄弟の <h1>から<h6> の大きさも相対的に変わってしまい、それをまた修正しないといけなくなるので、めっちゃだるいことになります。
なので、本文テキストは必ず <p>要素で囲みましょう。
※本文ではないテキストで、役割を何にすればわからないものは <div>要素で囲み、裸のまま（親要素が <body>のまま）の部品は置かない のが鉄則みたいです。
- <p>要素はひとまとまりのブロックとして...
早速下のように長い文章を入れて、<p></p>で囲んでみてください。
できたら保存して、保存してプレビューしてみてください。
下の様に<p>要素で囲んだところがまとまって表示されていると思います。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
こんな感じになっていたら成功です。
- 最後に
今回はここまでです。
一つの事なのですが大切な要素なので少し長く説明しました。
毎回進む量が少ないと思うかも知れませんが仕事と家事と掛け持ちなので許して欲しいです、
次回 →<div>など他の要素も見てみよう
#8ゼロからwebの基本「HTML」「CSS」編 〜8日目〜 『br要素』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
前回は<h1>など見出しについてやりました。
今回は本文を改行する要素<br>を使って行きましょう。
今日はひとつの要素しかやらないので、一緒にしっかり覚えて行きましょう！
今回の勉強のオトモ曲👇
- provided courtesy of iTunes
- br要素
※「br」は「break」の略で、折る、切る、断つと言った意味らしいです。
前回 のファイルの1番下に足したテキストに、下のように適当に<br>を入れてみましょう。
３つ同じことを書いたテキスト内ならどこでも大丈夫です。
プレビューすると下の様な感じ、
<br>要素のところで改行されました！
ーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーー
このように <br>要素は「改行」させる要素で、テキストを HTMLコード上で改行してもブラウザでは改行されません。
本文だけでなく ＜h４>要素の中でも、改行させたい箇所にはこの <br>要素を使います。
<br>要素は終了タグが無く、XHTML は XMLのルールなので、終了タグも含んだ<br />と書く必要があるみたいなのですが、HTML5ではこの「 /」は不要です。
そして、大切なのは<br>要素は改行用なので、改行以外のことで使うのはNGみたいです。
<br>要素で改行させて段落っぽく見せたりしちゃダメです。
段落にまとめる要素はちゃんとあり、明日やるので、それを使いましょう。
このようにHTMLの要素は一つひとつの役割が決まっており、きちんとその役割のところに使っていくルールになってます。
段落を付けたいなら段落の要素、見出しを入れたいなら見出しの要素、と言った感じですね。
- 最後に
今日はここまでにしましょう。
基本的なHTMLの形にいろんな要素が追加されて、だんだん見た目がぽくなって来たと思います。
このペースでどんどんものにして行きましょう！
次回は →段落の要素<p>要素をやって行きましょう。
#7ゼロからwebの基本「HTML」「CSS」編 〜7日目〜 『見出しを指定してみよう』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日も一緒に勉強して行きましょう。
前回まではHTMLを使用する上で必要な要素をやって来ました。
今回からは、中身になる要素をやって行こうと思います。
今日の勉強のオトモ曲👇
- provided courtesy of iTunes
- 見出し（h1〜）
早速<h1>〜<h6>を書いてみましょう。
前回保存したファイルを開いて 下のように <h1> から <h6> まで順番に指定してみてください。※<h1>〜の「h」は「heading」の略で、heading とは「見出し」という意味
そして、これを保存してブラウザでプレビューしてみてください。
下のようにそれぞれ 太字 になって、大きさが変わっているのがわかります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<h1>が1番大きく、そこから<h6>まで段階的に小さくなっていくのがわかりましたね。
そうです、みてわかる通りh1〜6は重要度を表しています。
<h1>要素は、前回登場した <title> 要素に次ぐ SEO的に重要な要素です。
<title>に次いでクロールされやすいので、ここにサイトにとって重要な文言を入れます。
そのあと<h2>から<h6>へと順番にクロールされる順位は低くなっていきます。
HTML文書内で 上から下へ <h1> から <h6> を置くほうが SEO的に良いと聞きます。
サイトのメインタイトルを <h1> に、それぞれのページのタイトルを <h2> に、サブタイトルは <h3> に、といったかんじで、ページの構成を考えれば、自然にそれなりの流れになります。
さらに言えばh1〜6タグで囲むと自動的に改行されます。
下のようにhで囲まずに書いてみてください。
そしたらこの様になります。↓
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
これは「ブロックレベル」・「インフラレベル」という要素の話なのでまたいずれ一緒に学んで行きましょう。
- 最後に
今回はここまでにしましょう。
だんだんわからない言葉が多くなって来ましたね、
そのうちやるのですが気になる方は地震で調べてみてください！
明日はお休みさせてください。次回は明後日！
そして次回は「改行のための要素」をやって行きましょう。
#6ゼロからwebの基本「HTML」「CSS」編 〜6日目〜 『実際に入力してみる３（文書型宣言）』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
前回は<tiyle><head><body>要素を追加して結構見た目がそれっぽくなって来たと思います。
今回が実際に入力してみるシリーズ最後で「文書型宣言」というのを追加してみましょう。
今回の勉強のオトモ曲👇
- provided courtesy of iTunes
- 文書型宣言
早速 <!DOCTYPE~> で始まるHTMLの文書型宣言をして行きましょう。
※W3CとWHATWGという２つのweb上の技術仕様を作る促進団体があり<!DOCTYPE~>はW3Cによって推奨されているみたいです。
<!DOCTYPE>は、HTMLファイルの最上部に書く必要があり、<!DOCTYPE>によって、そのHTML文書がHTMLのどのバージョンのルールで書かれているのかが宣言され、ブラウザがそのルールに従った表示をします。
※ちなみに最新はHTML５.2でHTML5以前は文書型宣言が長文になり大変だったみたいです。
それでは前回保存したファイルを開いて、<!DOCTYPE>を書いてみましょう。
<!DOCTYPE html>と書きます。
さっき言ったように書く場所は<html>より上、最上段に書きましょう。
これを書くことによりこのHTML文書はHTML5のルールに従って記述されていると宣言されました。
- 実はまだ必要な要素が２つある
１「言語コード」
２「文字エンコーディングの指定」
まず1つめ、html要素に「言語コード」を書いてみましょう。
下のように<html> タグのと文書型宣言の間に「htmlのすぐ後に半角スペースをつけてから lang="ja" 」とタイプします。
実は画像見てわかる通り早い段階から入れてしまってました。笑
2つめは、head要素の中に「文字エンコーディングの指定」をします。
<head>と</head>の中、<title>の上に <meta charset="UTF-8"> と書きましょう。
HTML5からは 文字エンコーディングに UTF-8を使用することが推奨されています。
タイトルが文字化けしないように<title>より先に書きましょう。
- 最後に
今回はここまでです。プレビューしても内容自体は変わっていないので今回はしなくても大丈夫です。
おそらくわからないワードなどが色々出て来たと思います。なので、気になる人は調べてみてください。
今回のおすすめ商品はこれ👇
肌の調子が本当に良くなる。
