コツコツゆっくりプログラミング学習part15 表を作る<table> <tr> <th> <td> colspan属性 rowspan属性

はいどうもこんにちは、双極くんです。

今回は表を作るために使う<table>タグについて学び、colspan属性でセルを横につなげる、rowspan属性でセルを縦につなげることもやっていきましょう。

表組みの基本

表組みは複数のタグを合わせて使用します。

<table>は表を示すタグです。このタグで表全体を囲むことが出来ます。

• <tr>は「Table Row」の略で、表の1行を囲む目的があります。
• <th>は「Table Header」の略で、表の見出しとなるセルを作成します。
• <td>は「Table Data」の略で、表のデータとなるセルを作成します。

簡単な表を作る

今回は<table>タグを使用して、下のような簡単な弁当メニュー表を作ってみたいと思います。

では、上のような表を作るためのコードを書いてみましょう。

(デフォルトでは仕切り線がなく見づらいので、分かりやすいように<table>タグに「border="1"」を加えています。)

Google clome（プログラムで開くを選択）で開くと、次のように弁当の表を無事に表示させることが出来ました。

セルをつなげる

では、ここから表のセルを横につなげる、縦につなげるにはどのようにHTMLのコードを書いたら良いか、学んで行きましょう。

基本となる表を作る

まずは基本となる表を作成しましょう。

次のようにコードを書きます。

これを保存して(ctrl+s)、Google clome（プログラムで開くを選択）で開くと、下のように６つのセルのある基本の表が表示されました。

横方向につなげる

それでは、この基本の表のコードにcolspan属性を追加し、セルを横につなげてみましょう。

コードはこのように書きます。

これを保存し、更新（↻）すると、下のように表の見出し部分が横方向につながりました。

縦方向につなげる

次に、セルを縦につなげるためにrowspan属性を追加して、下のようにコードを書きます。

※セル5の<td>タグは減らすしましょう。

これを保存して、更新（↻）すると下のように、3つ目と５つ目のセルを縦に結合することが出来ました。

まとめ

今回は表を作るための基礎を学ぶことが出来ました。

Webデザインでは時間割や料金表などと様々な表をつくる場面が多いかと思います。

<tr><th><td>を使う、また場合によってはセルをつなぐcolspan属性やrowspann属性を使うので少し複雑になっていますが、是非この<table>タグの基本をマスターして置きましょう。

コツコツゆっくりプログラミング学習part14【HTML】画像img src属性 alt属性 title属性

はいどうもこんにちは双極くんです(^^♪

私たちが普段見ているWebページには必ずと言っていいほど画像が貼られていますよね。

このような画像もHTMLでコードを書いて貼り付けることが出来るのです。

ではこの画像を表示させるためのHTMLタグ、コードの書き方はどのようなものになるのでしょうか？

今回はWebページにHTMLによる画像を貼り付ける方法を学んで行きましょう！

先回のプログラミング学習part13は相対パスと絶対パスについて学びましたが、これはわたくし双極くんの頭をとても悩ませるものでした(^_^;)

フォルダとファイルの構成のやり直し、資料に基づいて書いた自分のコードが実際に機能するのか、どうすれば分かりやすく見やすいブログとなるか、挫折しそうになる感情との闘いなど数々の苦悩がありました。

それに比べると、今回のHTMLの画像に関する学習はかなりやさしいものとなるかと思います(^-^)

今回は気楽に学んで行きましょう！

画像を貼り付けるタグimg

まずHTMLで画像を扱う時にどんなタグを使うのでしょうか？

それはイメージタグです。

これはimgと表記します。

このタグは２つセットで使う、ココからココまでのスタイルではありません。

単独で使われうタグであるという事を覚えておきましょう。

この中には３つの情報が必要です。

それはsrc属性とalt属性とtitle属性の３種類です。

それでは、この3種類を1つずつ学んで行きましょう。

src属性とは

まずはsrc属性（ソース属性）についてです。

srcとは「sourse」を略したもので情報元を意味しています。

HTMLコード内に<img>と書くだけでは画像は表示されません。ですから…

src属性でどの画像を表示するのかを伝える必要があります。

ですからimageタグではsrc属性を必ず使わなければいけません。

※ちなみにpart12で学んだhref属性の「href」は、「hyper reference（ハイパーリファレンス）」の略で、参照、参考という意味があり、主にリンク指定の際に使用します。

alt属性とは

次にalt属性（オルト属性）についてです。altとは「alternative」の略で代替テキストのことです。

alt属性は画像がどんなものなのかを伝える役割があります。

万が一画像が表示されなかったときに代替手段(alternative)として表示させるための文言と定義されているので、「代替テキスト」と呼ばれているわけです。ですから画像指定の際には必須のものです。

このalt属性を記述することで画像の意味を正しく伝えることが出来るようになります。

また目の不自由な方のために使われる読み上げブラウザが画像の代わりに読み上げることが出来ます。なので必要な内容があればここに書いてあげれば良いですね。

また、alt属性は、SEO対策の面で、必要不可欠です

補足情報：alt属性を適切に記述することで、検索エンジンとユーザー、両者に優しいサイトになります。alt属性の機能は、あくまで検索エンジンに適切な画像内容を伝えることであり、コンテンツを検索エンジンやユーザーわかりやすくする役割を担います。検索エンジンが画像のみでその内容を完全に理解することは困難です。alt属性を記述すると、検索エンジンにコンテンツの内容を正確に伝えられるというメリットがあり、画像検索において上位表示を狙う場合には重要な要素です。画像検索結果で上位表示されることで、新たな集客チャネルとなりうるのもメリットといえます。

alt属性は検索エンジンだけではなく、ユーザーの役にも立つものとなります。例えば、通信状態が悪く画像が表示されない場合、テキストで画像の内容を補完したり、上記でも説明した通り、音声読み上げ機能を使用した際の読み上げテキストとして役立ちます。視覚障害を持った方や高齢者の方、また通信環境の良し悪しに関わらず利用の際の手助けになります。alt属性を適切に記述していると、検索エンジンだけでなくユーザーにとっても「利用しやすいコンテンツ」になるというわけです。

alt属性にキーワードを詰め込みすぎるのは控えましょう。キーワードを詰め込み過ぎると画像の内容が伝わりづらくなります。さらに、スパム行為と認識され、検索エンジンからペナルティを受けてしまう可能性もありますので、画像に関係のないキーワードの記述は避けましょう。alt属性を設定する際には、画像の内容に沿った必要最低限のキーワードを簡潔に記述するべきです。

alt属性は基本的に記述した方がいいとされていますが、全ての画像に記述する必要はありません。記述の必要がない例として、意味をもたない装飾目的で使われる画像がなどです。背景画像やラインマーカーがこれに当てはまります。これらは装飾目的で使用しているため、コンテンツとして意味をもちません。意味をもたない画像の場合、alt属性は記述せず、空白のままにしておきます。ここで注意しなければならないのが「alt=””」と””内は空白にするものの、「alt=””」とは必ず記述する必要があります。忘れず記述しましょう。画像がtitle要素やh要素、a要素である場合は、見出しやリンクの遷移先の内容をきちんと伝えるため、必ずalt属性を記述する必要があります。

alt属性はリンクが発生する画像のアンカーテキストの代わりになる役割があるため、リンクがある画像にalt属性が記述されていない場合、検索エンジンがリンク先のページを把握しづらくなるからです。

title属性とは

3つ目のtitle属性（タイトル属性）とはどんなものなのでしょうか。

title属性とは画像のタイトルを伝えるものです。

具体的には、画像に上にマウスカーソルをしばらく置いておくと表示されることになります。

補足情報：title属性は、要素に補足情報を指定する属性です。主なブラウザはこの属性を指定されている要素にマウスを合わせると、ツールチップとしてtitle属性の値を表示します。この属性を指定しない場合は、祖先の要素に指定されたtitle属性と関連することを表します。また、title属性の属性値を、空白にすると祖先要素とは関連しないことを表します。なお、link要素、abbr要素、input要素などのいくつかの要素に、title属性を使う場合は、補足情報以外の要素固有の意味・役割が追加されます。

注意しておきたいのは、alt属性が画像の代替テキストであるのに対して、title属性は画像に対して助言的説明をするものだということです。簡単にいってしまうとalt属性は画像そのものを指し示すのに対し、titleは補足説明を示してくれます。
一般的なブラウザでは、title属性を記述した画像の上にカーソルをのせると、吹き出しが表示され、その吹き出しに画像の補助的説明が表示されます。さらにもう一つの違いとして、alt属性は画像以外には設定できませんが、title属性は画像やテキストなどすべての要素に設定することができます。また、alt属性とtitle属性を誤解してしまう方が多いです。title属性をalt属性と勘違いしてしまい、「alt属性が表示されない」と思い込んでしまっているケースがみられます。

imgタグを実際に書いてみよう

今回はこのようなファイルを用意してみました。

そして、index.htmlのあるフォルダと同じ場所にimage.jpgというイメージファイルを用意しました。

※同じ場所になければ、画像は表示されません。

このimge.jpgという画像をWebページに貼り付けようと思います。

src属性を書く

ファイルに戻って、<p>タグがある所の次にimage.jpgの画像を貼り付けて行きたいと思います。

まず、imgタグを使います。imgは単独で使えましたので、ここで閉じてしまいましょう。

次に、このイメージタグの中にどのファイルを貼り付けるの？という情報が必要になりますね。

ここで必要になるのが、src属性（ソース属性）です。

上述の学習で学びましたようにsrc属性でどの画像を表示するのかを伝える必要がありましたね。

ですからimgタグではsrc属性を必ず使わなければいけません。

今回の場合のsrc属性はこのように書く必要があります。

src="image.jpg"

実際には以下のようにファイルで書くと、image.jpgの画像が表示される事になります。

これを保存して、プログラムからファイルを開くと…

このように貼り付けることが出来ました！

では、ここに情報を少しずつ書き足していきましょう。

次に書く必要のある情報はalt属性です。

alt属性を書く

alt属性はsrcの後ろにこのように書くことにします。

テキスト名は"かわいいクマと花の写真"とします。

 <img src="image.jpg" alt="かわいいクマと花の写真">

 

実際にこのようにファイルを書いてみましょう。

このファイルを保存して、Webページを更新すると…

このように表示されて、先程と特に見た目の変化はありません。

でも、万が一画像が表示されなかったときに代替手段として表示させるためから画像指定の際には必須のものでした。このalt属性よって画像の意味を正しく伝えることが出来るようになります。alt属性は、SEO対策の面で、必要不可欠です

また、読み上げブラウザの場合には、ここに読み上げらる内容が出て来ることで、「かわいいクマと花の写真」と読み上げてもらえることになります。

もし万が一画像が表示されなった時はこのようになります。

このように画像が万が一表示されない場合でも、alt属性の中に書いたテキスト名”かわいいクマと花の写真”と表示されて、画像の意味を正しく伝えることが出来きました。

title属性を書く

では最後に、このファイルのタイトルも伝えてあげましょう。

ここにtitle属性を付けて、このファイルが”かわいいクマと花”というタイトルだったとすると、ファイルにこのように付け加えてあげます。

これを保存して更新し、画像の上にマウスカーソルをしばらく置いておきますと…

「かわいいクマと花」と表示されました。

※スクリーンショットで写らないのでスマホで撮りました(^_^;)

これがタイトル属性の持っている役割になります。

※title属性をalt属性と勘違いしてしまい、「alt属性が表示されない」と思い込んでしまっているケースがみられます。

というわけでこの３つの情報を使う事でimgタグは基本的な動作をすることが出来る、という事を覚えておきましょう。

まとめ

今回は、Webページに画像を貼り付けたい時の基本的な方法を学ぶことが出来ました。

• 画像を貼り付けたい場合はimgタグを使います。
• imgタグは単独で使います。
• imgタグの中にsrc属性、alt属性、title属性を記入します。
• src属性でどの画像を貼り付けるのか指定します。なお、この画像ファイルは同じフォルダの中に入れて置かなければ表示されませんでした。
• alt属性は万が一画像が表示されなかった場合に表示される代替テキストでした。また、このalt属性はSEO対策の面でも必要不可欠であることを覚えておきましょう。
• title属性は画像の上にカーソルをのせると、吹き出しが表示され、その吹き出しに画像の補助的説明が表示されるものでした。

Webデザインでは必ず画像は必要なものです。HTMLでの画像の表現において絶対パスや相対パスや画像のサイズも入ってくることもあるようです。そのような応用にも対応できるようにしておきたいですね。

学び

親切であることは自分のためになり、残酷な人は自分を苦しい目に遭わせる。

箴言11:17

コツコツゆっくりプログラミング学習part13【HTML】相対パスと絶対パス

はいどうもこんにちは、双極くんです(^^)/　

今回はHTMLの相対パスと絶対パスについて学んで行きたいと思います。

まずはパスとは何なのでしょうか？

目次

パスとは

パス(path)とは「道・通り道」の事を指します。

私たちがどこかへ出かける際の目的地まで行く道のりというイメージと同じように、目的のファイルまでの行き方などの道のりです。

このパス(path)には相対パスと絶対パスの２つがあります。

では、まず相対パスについて学んで行きましょう。

相対パスとは

相対パスとは現在作業しているファイルから見て、共有したいファイルはどこにあるのかを示す方法です。

今いる場所を基準にして相手がどこにいるのか伝える書き方をします。

こういう書き方をします。

• 今いる場所にある他のファイルは→ファイル名
• 今いる場所の「フォルダ」に中のファイルは→フォルダ名/ファイル名
• 今いる場所の1階層上にあるファイルは→　../ファイル名（../で1階層上を意味）
• ‥‥‥‥‥‥2階層上にあるファイルは→　../../ファイル名（3階層上は../../../となる）

このように相対的にありとあらゆる場所を指定することが出来ます。

例えるなら、相対パスとは「ココを出て、右に出たら最初の角を左に曲がった先にあります」という道案内のようなものです。相対パスの場合は今いる場所がどこであるかによって目的地が変わることになりますね。

これに対して絶対パスというものはどういう事でしょうか？

目次に戻る

絶対パスとは

絶対パスとは相手がどこにいるのかを確実に伝える書き方です。

これはURLに相当するものです。

例えるなら、絶対パスは道案内で住所を伝えるようなものです。どこから出発しても住所が分かっていれば確実にたどり着けるというわけです。

目次に戻る

実際にやってみる

では相対パスについて実際にやってみるとどうなるのかを見て行きましょう！

これからアンカータグを利用して相対パスを学んで行きたいと思います。

相対パスを書く前の準備

ファイルを用意する

今回は以下の通り3つのファイルを用意しました。これにならってコードエディタで書いてみましょう。

(私はVScodeを利用しています。" "(ダブルクォーテーション)の中にはまだ何も記入しておりません。)

1つ目はindex.htmlファイルです。

index.html

２つ目はtest.htmlファイルです。

test.html

３つ目はsub.htmlファイルです。

目次に戻る

フォルダとファイルの関係性を確認する

この３つのファイルの関係性は以下のように行っています。これにならってファイル構成を整理してみましょう。

HTMLフォルダの中身をこのように整理してみました。

そして、以下ようにtryフォルダの下にsub.htmlファイルがあるという感じにしました。

では、この３つのファイルを行ったり来たり出来るように書き込みを行っていきましょう。

目次に戻る

相対パスー３つのファイルを行ったり来たりする

indexから飛ぶ

まずindexファイルをGoogle Chromeから開いてみるWebページ上ではこのように表示されます。これは" "(ダブルクォーテーション)の中にはまだ何も記入していないページです。

このWebページではtestとsubのアンカータグが用意されているだけの状態です。

ですからどちらをクリックしてもどこにも飛ぶことはありません。

ではここからindexからtestやsubに飛ぶための相対パスの書き方をご紹介していきます。

目次に戻る

indexからtestに飛ぶための相対パスの書き方

まずはindexファイルからtestファイルに飛ぶための書き方を実際にやってみましょう。

HTMLのファイルを見てみるとtestファイルはindexファイルと同じところにあります。

この場合どのように書いたら良いかは上述の方で学習した相対パスとは‥‥‥の説明を見れば確認出来ます。

この相対パスとは‥‥‥の説明を見ると、indexファイルからtestファイルに飛ぶ場合は

• 今いる場所にある他のファイルは→ファイル名

となっていますので単純に

<a href="test.html">test</a>

と書けばいいという事になります。

目次に戻る

indexからsubに飛ぶための相対パスの書き方

つぎにindexからsubに飛ぶための相対パスの書き方ですが、フォルダとファイルの関係性を見ますとsubというファイルはtryというフォルダの下にありました。

ですからこの場合は上の相対パスとは‥‥‥の説明から

• 今いる場所の「フォルダ」に中のファイルは→フォルダ名/ファイル名

ですのでこのように書きます。

<a href="try/sub.html">sub</a>

 

 

では実際にこの2つを書いたコードをご覧ください。

そしてこれに倣って実際に書いてみましょう。

目次に戻る

indexからtest、indexからsubに飛ぶファイルをエディタに書いて確認する

それでは以下のindexファイルからtestファイルへ、indexファイルからsubファイルへ飛ぶためのコードをご覧下さい。

以下のコードに倣って実際に書いてみましょう。

それからこのindexファイルをプログラムから開いて(Google Cromeを選択)みましょう。

するとWebページには以下のようindexファイルが表示されました。これがデフォルトのページです。

では、こちらのデフォルトのWebページに表示されているtest subのうちtestの方をクリックしてみてください。

すると

このように　このページはtestです。　とWebページに表示されてtestファイルに飛んだことが確認出来るはずです。

その下にはindex subと表示されます。

そして、ここで一旦デフォルトのページに戻り(←左矢印をクリック)ましょう。

次にsubの方ををクリックしてみましょう。

すると

このように　このページはsubです。　とWebページに表示されsubファイルに飛んだことが確認出来きるはずです。

その下は　index test　と表示されています。

それでは次にtestファイルからindexファイル、testファイルからsubファイルに飛ぶための相対パスの書き方をご紹介します。

目次に戻る

testから飛ぶ

testからindexに飛ぶための相対パスの書き方

では、今度はtestファイルからindexファイルへ飛ぶ相対パスはどう書くのか見て行きましょう。

再度、上述の相対パスとは‥‥‥の説明を確認してみます。

ファイルの関係性は以下のようになっていましたね。

testファイルから見てindexファイルに飛ぶためには相対パスとは‥‥‥の説明を見れば…

• 今いる場所にある他のファイルは→ファイル名

となっていますので単純に

<a href="index.html">index</a>

と書きましょう。

目次に戻る

testからsubに飛ぶための相対パスの書き方

次にtestからsubに飛ぶ相対パスを書く場合はどうなるのでしょうか。

この場合はtestファイルを基準にしてsubファイル(tryフォルダの下にあります)を見ます。

これを上述の相対パスとは‥‥‥の説明で確認すると…

• 今いる場所の「フォルダ」に中のファイルは→フォルダ名/ファイル名

となっていますので

 <a href="try/sub.html">sub</a>

と書きましょう。

目次に戻る

testからindex、testからsubに飛ぶファイルをエディタに書いて確認する

では実際にこのtestからindex、testからsubへ飛ぶということをまとめてエディタに以下のように書いてみましょう。

このtestファイルをプログラムから開いて(Google Cromeを選択)みましょう。

すると以下のようにWebページ上にはtestファイルが表示されます。これがデフォルトのページです。

このページのindexの方をクリックするとこうなります。

このように、indexファイルに飛んでいるのが確認出来るはずです。

では今度はデフォルトのページに一旦戻ってsubをクリックしてみましょう。

すると以下のようにsubファイルに飛んでいることが確認出来ると思います。

では今度はsubファイルからみてindexファイルやtestファイルに飛ぶための相対パスの書き方を見てみましょう。

目次に戻る

subから飛ぶ

subからindexに飛ぶための相対パスの書き方

まずsubから見るとindexは1つ上の階層ですので、ここで../が登場します。

このようにsubから見るとindexは1つ上の階層であるということは、上述の相対パスとは‥‥‥の説明によると

• 今いる場所の1階層上にあるファイルは→　../ファイル名

になりますので

<a href="../index.html">index</a>

と書くことが出来ます。

目次に戻る

subからtestに飛ぶための相対パスの書き方

次にsubからtestを見るとこれも1つ上の階層にあります。

ですので、この場合も

<a href="../test.html">test</a>

と書くことが出来ます。

では実際にこのsubからindexに飛ぶ、subからtestに飛ぶプログラムを書いてみましょう。

目次に戻る

subからindex、subからtestに飛ぶファイルをエディタに書いて確認する

では、subからindex、またsubからtestに飛ぶファイルを実際にエディタに書いてみましょう。

以下のように書いてみましょう。

それから、このファイルを実際にWebページに表示させてみます。

以下のように表示されるはずです。このページがデフォルトです。

では、まずindexをクリックしてみてください。

すると、このようにindexファイルのページに飛んだことが確認出来ます。

つぎに、今回はデフォルトのページに戻らずにtestをクリックしてみてください。

このようにデフォルトに戻らなくてもtestファイルのページに飛んだことが出来ました。

同様に、前のページに戻らずにtestをクリックすればtestファイルに、subをクリックすればsubファイルに、indexをクリックすればindexファイルに次々に飛ぶことが出来るプログラムを作成することが出来ました。

こうして

• test、subに飛ぶindexファイル
• index、subに飛ぶtestファイル
• index、testに飛ぶsubファイル

の３つの相対パスで書いたファイルよって、それぞれのファイルのページを行ったり来たり出来るようになりました。

このようにして相対パスを使うことで

このHTMLフォルダごと移転させた時や誰かに渡したり他のサーバーに移したとしても、上記のようなファイルの関係性さえ変わっていなければ、どんな場所でもこのファイルの行き来を再現させることが出来るようになります。

これが相対パスのメリットです。よくプログラミングではテスト環境と本番環境が違う際に使われることが多いので是非覚えておきましょう！

目次に戻る

まとめ

今回のプログラミング学習part13では相対パスと絶対パスについて学習することが出来ましたが、絶対パスに関しては住所のようなものでURLを記述することになると思うので問題はないと思います。

特に今回覚えなければならなったのは相対パスの方でしたね。

今回の学習ではindex.html、test.html、tryフォルダの下にsub.htmlを用意してそれぞれのそのファイル以外の2つのアンカーを用意した後、3つの相対パスによるファイルをすべて完成させることにより、3つのファイルを行ったり来たりできるプログラムを作成できました。

最後にもう一度相対パスの書き方を復習しておきましょう。

• 今いる場所にある他のファイルは→ファイル名
• 今いる場所の「フォルダ」に中のファイルは→フォルダ名/ファイル名
• 今いる場所の1階層上にあるファイルは→　../ファイル名（../で1階層上を意味）

是非この相対パスを覚えて実際に活用して行きましょう。

学び

すべての人は上位の権威に従わなければなりません。存在する権威は神によって相対的な地位に据えられています。

（ローマ13:1）

ゆっくりコツコツプログラミング学習Part12【HTML】アンカータグ<a>・href属性・id属性

はいどうもこんにちは、双極くんです。

今回は世界中の情報をハイパーリンクでつなぎ合わせるアンカータグ<a>について学びます！

これまで11回にわたって、あなたと共にHTMLの学習を行ってきました。

ここまでのプログラミング学習は基本的にテックアカデミーさんの「はじめてのHTML入門講座」を参考にこのブログを作成させて頂いていました。

でも、ここからはテックアカデミーさんの「はじめてのHTML入門講座」と同じ順ではありながらも、あなたにとってより分かりやすい入門講座とするための付加的な情報を盛り込み、より見やすいものとした双極くんオリジナルなプログラミング学習ブログを作成して行きたいと思います。

では、このpart12からリニューアルした双極くんのプログラミング学習HTML後編を共に学んで行きましょう！

ところで、あなたがいろいろなウェブページを見ていると、必ずと言っていいほど何らかのリンクが貼ってありますよね。

今回はそんなリンクに関係するHTMLのアンカータグ<a>・href属性・id属性について学んで行きましょう。

アンカータグ<a>・href属性・id属性

アンカー<a>とは

アンカーとは船をとどめる錨という意味合いがあります。

錨は通常、鎖などの先につけて船上から水底に落し，その重さと爪で泥や砂をひっかけることにより，船の移動を防ぐものですよね。

ウェブ上におけるアンカー（錨）は、それをどこかに引っかけて置くことで、そこにたどり着けるようにするリンクの飛び先というイメージです。

つまり、アンカータグはWebにおいてはリンク可能な特定ポイント、目印という意味で使います。

通常「リンク」というと、Webページと Webページをつなぐもので、リンクをクリックするとページのトップが表示されます。

しかし、アンカー<a>タグを用いた場合、リンク先の特定箇所を最初に表示することも可能です。

つまりユーザーがスクロールしなくても、見せたいポイントを表示できるということになります。

アンカー<a>タグの二つの属性

一般的にHTMLでアンカータグ属性は以下の２つです。

• href属性
• id属性

href属性とは

href属性のhref（読み方はエイチレフ）とは Hypertext Referenceの略です。直訳すると「ハイパーテキストの参照」となります。

つまり、「hrefとはハイパーテキスト上で参照機能として用いられる属性である」ということができます。

という訳でhref属性はリンクの飛び先がどこであるのかを伝えるものということが出来ます。

id属性とは

id属性とはページの中のある特定の部分（要素*1）に名前、固有の識別名IDを付けることが出来るものです。

このIDは、スタイルシート*2のセレクタ*3として使用されるほか、スクリプト*4やリンクなどの参照先として使用されることになります。

今回も具体例を見て行くことで分かってくることとなりますので、これからこの２つの属性を実際にプログラムに書いてファイルを作って行きましょう！

実際にやってみましょう

今回は次のようなファイルを用意しておきました。

<!DOCTYPE html>

<html lang="ja">

   <head>

      <meta charset="UTF-8">

      <title>HTMLの練習</title>

   </head>

   <body>

     

   </body>

</html>

 

これをブラウザで開いても何も表示されませんよね。

たとえば、このbodyの中にアンカー<a>タグを次のように書いてみます。

<!DOCTYPE html>

<html lang="ja">

   <head>

      <meta charset="UTF-8">

      <title>HTMLの練習</title>

   </head>

   <body>

      <a>My Link</a>

   </body>

</html>

 

これを保存して更新します。

するとこのようになりました。

My Linkと表示されましたが、どこに飛べばいいのか指定していないので、これをクリックしても何も変わりません。

ではたとえば、このMy LinkからGoogleに飛ぶようにしてみたいと思います。

そのために今回学んでいるhref(エイチレフ)属性を使ってみましょう。

href属性を使ってみよう

それではMy LinkからGoogleに飛ぶためにhrefの後ろに＝(イコール)を付けて""(ダブルクォーテーション)の中にGoogleのURLを入れて、次のようにファイルを書き換えてみましょう。

<!DOCTYPE html>

<html lang="ja">

   <head>

      <meta charset="UTF-8">

      <title>HTMLの練習</title>

   </head>

   <body>

      <a href="http://www.google.co.jp/">My Link</a>

   </body>

</html>

これを保存して更新してみます。

My Linkと青文字でアンダーラインのあるリンクの見た目になりました。

では、これをクリックしてみましょう。

すると、このようにGoogleが表示されました！

指定したURLにアクセス出来ましたね。

このように

<a href="飛ばしたい先のURLを書く" >任意の名前(今回はMy Link)を書く*5</a>

という形でhref属性を使うことが出来る、という事を学ぶことが出来ました。

これに対してid属性はどのように使用するのかを実際に見て行きましょう。

id属性を使ってみよう

ここではid属性がどのような働きをするのか、シミュレーションをしてみましょう。

まずは、先ほどのファイルを使ってa要素の下に多く（一列に<br>を14個の4段）の改行brを書いた後に

<p>ここはindexというidがついた場所です</p>

というパラグラフを用意しましょう。

実際にはこのように書きました。

 

<!DOCTYPE html>

<html lang="ja">

   <head>

      <meta charset="UTF-8">

      <title>HTMLの練習</title>

   </head>

   <body>

      <a href="http://www.google.co.jp/">My Link</a>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <p>ここはindexというidがついた場所です</p>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

   </body>

</html>

 

まずはこの状態のファイルを保存して更新して確認してみましょう。

このようになりました。

これを下にスクロールして行くと

だいぶ下の方までスクロールした場所にやっとpタグの中に記入した内容

ここはindexというidがついた場所です

が表示されました。

このように　ここはindexというidがついた場所です　がMy Linkと表示したのと同じ画面には表示されないようにファイルを作成しています。

それでは、このpタグの中でidにindexと名前を付けてあげましょう。

<p id="index">ここはindexというidがついた場所です</p>

と書きます。

こうして<p>タグとid属性によってindexというID名が付けることが出来ました。

次に、アンカータグ<a>のhrefの後ろに#index（ハッシュインデックス）と書きましょう。

このように、indexの先頭に#をつけることで「index」というIDのついた箇所を指定することができます。

次のように書いてみてください。

<a href="#index">My Link</a>

実際のファイルにはこのように書きました。

<!DOCTYPE html>

<html lang="ja">

   <head>

      <meta charset="UTF-8">

      <title>HTMLの練習</title>

   </head>

   <body>

      <a href="#index">My Link</a>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <p id="index">ここはindexというidがついた場所です</p>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

   </body>

</html>

このファイルを保存して更新します。

まずこのように表示されました。

次にこのブラウザの画面のMy Linkをクリックすると……

このようにスクロールしなくても　ここはindexというidがついた場所です　に飛ぶことが出来ました。

このようにid属性を使って同じページの中でもこのようにしてリンクを飛ばすという機能がありますので是非覚えておきましょう！

まとめ　双極くんの感想

わたくし双極くんは今回の学習を通して

• アンカータグのhref属性によって別の場所のリンクへ飛ばせること
• アンカータグのid属性で同じページの中の指定した所に飛ばせること
• href、id属性どちらも<a href＝" ">を使うということ

を学んだな、という感想です。

Web上で文書や画像を表示させるだけでなく、ハイパーリンクによって様々な情報をつなぎ合わせる機能を持つ点がHTMLの大きな特徴です。

次から次へと移動しながら得たい情報を自由に得られるハイパーリンク機能により、インターネットはまたたく間に世界中に広がっていったようです。

アンカー<a>タグは世界中の情報をハイパーリンクでつなぎあわせる重要なタグなんですね。

学び

世界には多くの種類の言葉がありますが、意味のないものはありません。

聖書　コリント一14:10

*1:ここから（＜）、ここまで(/＞）がこういう内容（要素）

*2:スタイルシートとは、文書データの見栄えに関する情報のみを記録・定義したデータやファイルなどのこと。スタイルシートの入れ替えや編集により、文書自体の内容はそのままに見栄えだけを変更することができる。一般的にはCSS（Cascading Style Sheets）と呼ばれる専用の言語によりスタイルシートを記述する。

*3:セレクタとはCSSによるデザイン指定をどこの部分に対して適用するか、を決めるもの

*4:スクリプトとは、台本、脚本、原稿、手書き、筆記体などの意味を持つ英単語。ITの分野では簡易なコンピュータプログラムをスクリプトと呼ぶことが多い。

*5:ブラウザでは青色下線で表示される文字

コツコツゆっくりプログラミング学習part11【HTML】情報がセットになったリスト

はいどうもこんにちは、双極くんです。

今回は、情報がセットになったリスト全体dl、情報の項目名dt、情報の内容ddついて学んで行きましょう。

今回も少し考えないと分かりにくいタグだと思います。でもファイルを書いてブラウザで開く事で理解出来ると思います。

いつものように、前半はタグについての学習し、後半では実際に手を動かし実践して行きましょう！

このブログは、こちらのテックアカデミー「はじめてのHTML入門講座」を参考にさせて頂いております。

情報がセットになったリスト(dl・dt・dd)とは

情報がセットになったリスト全体dl

まずは情報の項目と情報の内容全体を囲むタグが必要です。それはdlというタグです。

これを利用することで、この内側に書かれている項目名と内容がセットになっていることを示してくれます。

情報の項目dt

項目名の部分にはdtというタグを使います。

情報の内容dd

内容の部分にはddというタグを使います。

この３つのタグを組み合わせることで、情報がセットになったリストを作っていくことが出来ます。

具体的に書いて行きましょう

この情報の項目と内容の具体的な例で考えてみると、質問と答えというものが分かりやすいのではないか、と思います。

これを例にとってHTMLで書いて行きましょう。

今回はこのようなHTMLファイルを用意しておきました。

※下のファイルを拡大してご覧ください。

まだ今回使うタグは何も書かれていませんが、

• 質問1
• 答え1

という前提で考えてみましょう。

このままファイルを保存してブラウザで開くと、このように表示されます。

では今回学習しているタグをファイルに入れて行けばどのようになるでしょうか？

情報のリスト全体であることを示すdlタグ

まずは、これらがリスト全体であることを示すためにdlのタグで囲んであげましょう。

<body>

　<dl>

　　質問1

　　答え1

　</dl>

</body>

情報の項目名dtと情報の内容dd（質問と答えを例にして書いてみる）

そして、質問1をdtタグ、答え1をddタグで囲みます。

実際にファイルにこのように書いてあげます。

※下のファイルを拡大してご覧ください。

これを保存して更新します。

すると、このように表示されました。

このように、最初の質問の部分はインデントされず、答えがインデントされています。

質問1の答えが答え1であることが分かりやすくなっています。

それでは、これが複数あるとどのようになるのでしょうか？

この質問1と答え1をコピーして、２つ貼り付けこのようにファイルを書き換えてみます。

※下のファイルを拡大してご覧ください。

これを保存して更新します。

すると、このように表示されました。

質問1～質問3までのそれぞれの答えが分かりやすくなりましたね。

このように何かに対してその内容というように情報を書いて行く場合にはdlタグを使ったリストで表現していくことが出来ます。

前回使ったリストの入れ子の状態とは意味合いが違うことはお分かりになるかと思います。

今回の学習内容は、これからCSSを学んで行くとよく登場する書き方です。

是非覚えておきましょう！

まとめと双極くんの感想

今回は、情報がセットになったリスト全体を表示するためのタグdlを書き、その内側にdtで情報の項目を囲み、その内容をddで囲むことで、ブラウザで分かりやすいように表現出来ることを学びました。

分かりやすくリストに書きますと、以下のようになります。

1. 情報の項目と内容を全部をdlで囲む
2. dlの内側に項目と内容を書く
3. 項目をdtで囲む
4. 内容をddで囲む
5. ブラウザ上でインデントされていない項目が表示され、その次の行にインデントされた内容が表示される
6. 上記の3.～5.を繰りかえして、下方に表現出来る

また、これはCSSの表現にもよく出て来るそうなので、是非しっかり覚えておきたいですね！

学び

賢い人は聞いてさらに教えを受け、理解力のある人は的確な導きを得る。

聖書　箴言1:5

コツコツゆっくりプログラミング学習part１０ 【HTML】リスト

はいどうもこんにちは、双極くんです。

HTMLにおいては、リストというものはよく登場します。

具体的な部分を学んで行くといろいろな用途が出てきますが、まずはリストがどんなものなのかに関して学んで行きましょう！

このブログはこちらのテックアカデミー「はじめてのHTML入門講座」を参考に作成させて頂いております。

リストについて学んで行く

リストには大きく2種類あります。

• 順番の関わるリスト、つまり番号の付くリスト
• 順番は関係がないリスト、列挙されているだけのリスト

という２種類があります。

では、それぞれの書き方を学んで行きましょう。

順番の関わるリストol

olとはordered list（オーダードリスト）の略です。

orderには順番という意味合いがありますので、olは順番の付けられたリストという事です。

順番の関わらないリストul

ulとはunordered list（アンオーダードリスト）の略です。

ulはorderがunで否定されていることから順番の付けられていないリストという事が分かります。

リストの項目li

これら２つのどちらかで囲まれた内側がリストの項目であることが分かります。

ですが、さらにその内側にそれぞれの項目ごとにタグで印を付けていく必要があります。

このそれぞれの項目ごとのタグがliです。

これはlistの略ですね。

これを使ってリストを書いて行くことになります。

では、具体的にファイルに書いて行きましょう。

具体的に書いて行きましょう

今回はこのようなファイルを用意しました。

※スクリーンショットは必要に応じて拡大してご覧ください。

オーダードリストolのリストliを書いてみる

bodyタグの内側にまずは、順番の関わるリストolを用意してみましょう。

<body>

　<ol>

　</ol>

<body>

そしてその内側にliで囲まれた項目を以下のように書いて行きます。

<body>

　<ol>

　　<li>１つめ</li>

　　<li>２つめ</li>

　　<li>３つめ</li>

　　<li>４つめ</li>

　</ol>

</body>

このように４つの項目を書いてみました。

実際のファイルはこのように書きました。

これを保存してファイルを開いてみます。

すると、このようになりました。

上のブラウザの画面のように

”１つめ”は1.

”２つめ”は2.

…という形で最初に数字が付いた状態で表示されました。

私たちが番号を書いたわけではない部分に番号が付いています。

これはブラウザが何個目なのかを判断して数字を付けてくれている、ということになります。

これがオーダードリストolタグの効果となります。

では、例えば<li>３つめ</li>を一番上に持って来てみましょう。

そして保存して更新してみましょう。

すると、”３つめ”が１番に来ました。

このように順番がずれ込んで、脇の番号との対応がくずれてしまいました。

ですが、私たちが書いた順番に表示されているという事が１つのポイントです。

こうなってくると、番号と順番が関わらなくなってきます。

そのような場合にはどのように表現するのか？ということで

今度はolではなくulで表現してみましょう。

アンオーダードリストulのリストliを書いてみる

では、olだった所をulに書き換えましょう。

そして保存して更新します。

すると、こうなりました。

このように、今まで数字だった所が●（黒丸）に変わりました。

これによって、ただの列挙されたリストであるということが分かります。

アンオーダードリストulの中にさらにulのリストliを追加する⁉

実は、このリストなんですけども、さらに内側に項目を追加して行くことが出来ます。

では、そのことについても具体的に見て行ってみましょう。

例えば”３つめ”の中には４項目ある、と書いてみたい場合

<ul>

　<li>３つめ</li>←ここに４項目を書いてみたい

　<li>１つめ</li>

　<li>２つめ</li>

　<li>４つめ</li>

</ul>

この部分をコピーして、それを３つめのliの内側に追加してみましょう。

（すこし考えなければ分かりづらいですね。動画に従って実際に手を動かしてファイルを書いて行く大事さが分かります。）

実際にこのように書いてみました。

見えづらい場合には拡大してご覧ください。

これを保存して更新します。

すると、ブラウザ上ではこのようになりました。

今までの●（黒い点）ではなく○（白い丸）になり、これによって違うリストであり、内側のリストであることがインデントによって分かりやすくなっています。

さらに内側にリストを追加することも出来ますし、どんどん階層を増やすことも出来ます。これはulタグを使った時のリストで出来ることの１つです。

まとめ　双極くんの感想

今回は

• 順番の関わるリストol
• 順番の関わらないリストul

について学習することが出来ました。

個人的な感想としては

• olもulも必ず内側にliを並べていくこと
• ulでいくつも階層を作るのは良いけど、動画の説明だけでは良く理解出来ないので実際に手を動かした方が良いこと

を覚えておきたいな、と思いました。

次回は今回よりも複雑なリストを学ぶことが出来ます。

これからも、実際に手を動かしながら、自分で作ったこの教材を何度も見返しながら確実に自分のものとして行きたいと思います。

学び

 知恵があなたの心に入り、知識が心地よいものとなる時、

思考力があなたを見守り、識別力があなたを保護する。

格言2:10,11

コツコツゆっくりプログラミング学習part９【HTML】code・br・pre

はいどうもこんにちは、双極くんです。

今回は

• コード(code)
• 改行(br)
• プリフォーマット(pre)

について学んで行きましょう！

このブログは以下のテックアカデミー「はじめてのHTML入門講座」を参考に作成しております。

コード(code)、改行(br)、プリフォーマット(pre)について学んでいく

コードcode

まずコードです。

コンピューター用語やプログラム用語といったものを示すタグとしてcodeというタグがあります。

これを使うことでコンピューター用語である、あるいはプログラム用語である、という事を示してあげることが出来ます。

改行br

そして改行です。

HTMLとしてココに改行があるという事を伝えるためにタグを書く必要があります。

それにはbrというタグを使用します。

breake line（改行）の略を利用してbrというタグになっています。

これがある所に改行が入りますので、このタグは開いて閉じる２つセットのものでは無く単独で使う事の出来るタグです。

プリフォーマットpre

最後にプリフォーマットについてですが、これは入力したとおりに表示させるタグです。

これはpreというタグですが、これは実際に見てみる事によって、どのように表示されるのか分かると思います。ですので、具体的にはのちほど見てみましょう。

実際にファイルを使ってやってみる

今回はこのようなファイルを用意してみました。

この内容については特に意味を考える必要はありません。

これを保存してブラウザで開くとこのようになっています。

コードcode

最初のパラグラフ（段落）の中では、コンピューター用語は２つ出てきます。

 

functionには関数という意味合いがありますが、drive()が関数の名前で、vehicleがobjectの名前です。

 

 

このdrive()とvehicle、この２つの単語がコンピューター及びコードの関わる部分であるという事がポイントです。

 

 

ではこの２つをcodeタグで囲んでみましょう。

 

※下の写真を拡大してご覧ください。

このようにdrive()とvehicleの２つをcodeタグで囲むことが出来ました。

 

これを保存し更新します。

※分かりづらい場合は写真を拡大してご覧ください。

このようにdrive()とvehicleが少し表示のされ方が変わったのが分かるでしょうか？

 

これによって、この部分がコンピューター用語であることが分かりやすくなりました。

構造としてコードに関わるものである事を伝えるようになっています。

 

 

改行br

では、続いて改行についてです。

元々HTMLファイルの２つ目のパラグラフ（段落）では……、非常に読みづらくなりますの後に改行がありますが、ブラウザで表示をさせた場合には改行されていません。

このままでは、どんどん長い文章を書いて行った時に見づらくなってしまいますので、ココに改行がありますという事をbrタグで伝えてあげましょう。

では、一度２つ目のパラグラフ（日本語文）をコピーして、１つ増やしておきましょう。

そして、１つめの方にbrタグを配置します。

そして保存して更新します。

すると、このようになりました。

このように、brタグを入れていない二つ目のパラグラフ（日本語文）の方は改行されないまま続いています。

ですが、brタグを入れた一つ目のパラグラフ（日本語文）では改行がしっかりと表現されています。

このようbrタグを入れることで改行をすることが出来るというわけです。

プリフォーマットpre

それに対して、プリフォーマットpreも確認してまいりましょう。

ではbrタグを入れていない二つ目のパラグラフ（日本語文）のpタグの代わりにプリフォーマットのpreタグを入れてみます。

保存して更新します。

すると、このようになりました。

プリフォーマットpreのタグの内側は入力したとおりに表示されます。

ですので、改行タグの入っていない所も改行されていますし、インデントをした部分にはインデントが反映されています。

このように意図的に入力したとおりに表示させたい部分がある場合には、このプリフォーマットpreタグを使ってあげると非常に便利です。

特に長いプログラムを引用したりする時にプリフォーマットpreタグ、あるいはコードcodeタグを利用すると表現として非常に分かりやすくなりますので、ぜひ覚えておきましょう！

まとめ　双極くんの感想

今回は

• code（コード）タグ
• br（改行）タグ
• pre（プリフォーマット）タグ

について学びました。

※動画を見ながらここまで見てくださった方は動画を止めましょう😅

特に、このタグの中でbrタグは前回のpart８から登場していましたね。

ですので、brタグは良く使うものだろうな、と思いました。

それからpreタグについてはどのようなシーンで使うのか実際にやってみたいな、と思いました。

次回は、私もよく使っている箇条書きするHTMLであるリストについて学ぶことができます。しっかり覚えてい行きたいと思います。

学び

それを指に結び、心に書き記せ。

格言7:3