アニメーション画像等に利用される。相対パスと絶対パスプログラムの世界では、ファイルを参照するという作業を何度も行います。その際に使われるのが、『相対パス』と『絶対パス』です。具体的に何をするものなのかというと、ファイルの保存場所を示す役割を担っています。プログラム未経験の方には少し難しいかもしれません。以下に詳しくかいてみたので参考にして下しい。知っている、分かったという方は読み飛ばしてください。『相対パス』から見ていきましょう。『相対パス』は現在の位置から見たファイルの保存場所を示します。デスクトップにindex.htmlとimageというフォルダがあるとします。index.htmlには以下のようなコードが書いてあるとします。alt="アイコン">このコードはHTMLで画像を表示するコードです。『src』で表示する画像を決めて、『alt』で画像が表示できなかった場合に、代わりに表示する文字を決めます。この『src』の『""』ダブルクォーテーションの中に書かれているのが相対パスです。画像ファイル」を指しています。次に『絶対パス』です。『絶対パス』は固定位置(第一階層)から見たファイルの保存場所を示します。先程の例で言うならば、絶対パスは「/Desktop/images/icon.png」となります。上のフォルダからファイルを参照します。?分からなかったという方は、Google検索で少し調べて見てください。簡単なホームページを作ってみる。準備が整ったのでここからは簡単なホームページを作っていきましょう。分からなかったという方も多いと思いますが、プログラムは手を動かしながら勉強するものです。ブラウザで文字を表示してみよう!まずは以下のリンクからサンプルファイルをダウンロードしましょう。ファイルの保存場所はわかりやすいように、デスクトップにしましょう。ファイルがダウンロードできない場合はこちらからご連絡ください。ダウンロード(sample01)まずはダウンロードしたファイルをデスクトップに解凍しましょう。『sample01』というフォルダができていると思います。『sample01』フォルダの中に『index.html』というファイルがあると思います。これをクリックして、ブラウザで見てみましょう。以下の画像は私がchrome(ブラウザ)でindex.htmlを開いた結果です。何も表示されていないのがわかります。1index.htmlの中身を確認してみよう!次にindex.htmlのファイルの中身を見てみましょう。右クリックで『プログラムから開く』を選択し、windowsなら『メモ帳』、macなら『テキストエディット』で開きましょう。ファイルの中身を見てみると以下のようになっていると思います。content="ブラウザ,文字,表示,サンプル"></head><body></body></html>まずはhtmlタグ,headタグ,bodyタグを見ていきましょう。ここにはタイトルや文字コード,キーワードなど、このhtmlの情報を書きます。ここには画像や文章などのコンテンツを書きます</body></html>この3つのタグはhtmlファイルを書く上で必ずなければならないタグです。htmlタグの中にheadタグとbodyタグが入っています。headタグは上にも書いてあるとおり、タイトルや文字コード,キーワードなどのいわゆるメタ情報を書き込むためのタグになります。bodyタグは画像や文章などの作成者が載せたいコンテンツを書くためのタグになります。content="ブラウザ,文字,表示,サンプル">次にheadタグの中身を見ていきましょう。1番目の行は文字コードというものを指定しています。このファイルは『UTF-8』という文字の種類を使って書いているということをコンピュータに認識させるためのタグです。この文字コードを間違えると『文字化け』という現象がおこります。2番目の行のタグはindex.htmlのタイトルを決めるためのタグです。ブラウザのタブに表示される文章ですね。3番目の行のタグはindex.htmlのキーワードを決めるためのタグです。キーワードは検索にも影響してくるタグです。コンテンツと関係のあるワードをカンマ区切りで書きましょう。引用:参考ページ:https://bazubu.com/seo-key-research-7767.html2bodyタグに文章を書き込んでみよう!いよいよブラウザに文字を表示します!皆さんメモ帳等でファイルを開いているかと思います。bodyタグの中に以下のコードを書いてみましょう。(コピーペーストでも構いません。world</p>これはpタグと呼ばれる文字を書き込むためのタグですね。bodyタグの中に書き込むと以下ようになるはずです。合っていたらファイル保存して、ブラウザを更新してみましょう。world</p></body></html>ちなみにタグの先頭に半角の空白を2つ入れているのは、『インデント』といって、構造を見やすくするための技法です。様々なプログラミング言語利用されます。いかがでしょうか?ブラウザの画面が以上のようになっていれば成功です。できなかった方はタグがしっかり閉じられているかをしっかり確認してみてください(<p></p>)以上でブラウザへの表示は終了です。そこまで難しくなかったはずです。htmlの作成はほとんどがこのような作業ですから、8割終わったようなものです。ブロック要素とインライン要素の違いを知ろう!次は概念の説明になってしまうので、少々退屈かもしれません。重要な概念ですので、しっかり理解して上で次のステップに進んで頂きたいと思います。htmlはとても簡単な言語ゆえに、この概念を知らなくても書けてしまうことがほとんどです。これを知らないまま進んでしまうとcssでデザインを調整する際にとても苦労するなんてことがよくあります。それでは早速見ていきましょう。先程使用した『sample01』フォルダのindex.htmlのbodyタグの中身を以下のコードに変えて保存してみてください。world</span></body>このコードですが、今までに見たことの無い書き方をしていますね。『style="~"』の部分です。このようなものをhtmlでは属性と読んでいます。この場合はstyle属性となります。このstyle属性が何をしているのかというと、なんとcssと同じことをしています。今詳しく知る必要はありませんが、デザインを指定しているのです。pタグの場合、背景色を赤にして、下に10pxの余白を取っています。ブラウザを更新してみましょう。上の画像のようになっていると思います。今回はpタグとspanタグを使用しましたがどちらも文字を表示するタグです。背景色の色の範囲が違うのがわかります。これこそがブロック要素とインライン要素の違いなのです。htmlのタグは画面上で表示する領域を自動で確保します。このときコンテンツの量、大きさに関わらず、横幅最大に領域を確保するのがブロック要素(今回のpタグ)です。逆にコンテンツの量、大きさの分だけ領域を確保するのがインライン要素(今回のspanタグ)です。htmlのタグは必ずこのどちらかに分類することができます。したがってpタグはブロック要素で、spanタグはインライン要素であることがわかります。時間がある方はbodyタグの中身を以下に変えて、ブラウザでの表示を確認して見てください。画像やリンクを表示してみよう!退屈な概念の部分が終わって、htmlの作成も終盤です。ここでは画像やリンク、Youtubeによる動画やgoogleマップの埋め込みを紹介します。実用的なことも行いますので、非常に楽しく進められると思います。以下のリンクから新しいサンプルファイルをダウンロードしましょう。ダウンロード(sample02)1画像を表示してみよう!画像を表示するにはimgタグを使用します。『src』属性には表示したい画像ファイルのパス(今回は相対パス)、『alt』属性には画像が読み込めなかった場合に代わりに表示する文字列を指定しましょう。以下のタグをbodyタグの中に書き込みましょう。alt="画像が読み込めませんでした。">今回使用した相対パスは、index.htmlでimagesフォルダの中のsample1.pngを表示したいので『images/sample1.png』のようになります。imgタグはインライン要素ですので、画像が2つ横に表示されていると思います。次にimgタグのsrc属性をわざと間違えてみましょう!以下のコードはsample2.pngの名前をわざと間違えているコードです。bodyタグの中に書き込んでみましょう。alt="画像が読み込めませんでした。">しっかりとalt属性の文字列が表示されているのがわかります。2リンクを貼ってみよう!リンクはホームページ、webを作る上で必ず必要なものです。リンクを貼るためにはaタグを使用します。ちなみにaタグは『anchor』の略で、アンカーテキストを意味します。いつもと同様に以下のコードをbodyタグの中に書いてみましょう。href="https://daily-fruit.com/">DailyFruit</a>クリックすると別のページへ飛ぶようになっているはずです。リンクを貼るときはこのように、リンクにしたいURLをhref属性に設定し、コンテンツをaタグで囲いましょう。aタグはインライン要素です。次に以下のコードを書いて試してみましょう。target="_blank">こちら</a>からお願いします。</p>今度のリンクはクリックすると、ブラウザの別のタブで開くのがわかります。これはtarget属性に_blankが指定されているためです。これはよく使うので覚えてしまいましょう。それでは最後に応用例を2つやってみましょう!まず1つめは画像にリンクを貼る例です。画像が小さずぎて見えないとき、また広告バナーなどには画像にリンクを貼るといいでしょう。以下のコードをbodyタグの中に書き込んでみてください。width="200px"></a>今回の画像はwidth属性を使用することであえてサイズを小さくしています。これは今までやってきたことの組み合わせなので説明は省略します。皆さんよくクリックするとファイルをダウンロードできるリンクを見かけると思います。実はこれもaタグで実現することができます。download="01.pdf">PDFファイルのダウンロード</a>download属性を付け加えることで、href属性に指定しているファイル(今回は相対パス)をダウンロードさせることができます。download属性の値はダウンロードするファイル名となります。3Googleマップを埋め込んでみよう!新宿駅のgoogleマップを埋め込んでみましょう!こちらからgoogleマップにアクセスします。アクセスしたら以下の手順で埋め込みコードをコピーしましょう。1検索バーで『新宿駅』を検索2左上のメニューをクリックし、『地図を共有または埋め込む』をクリック3『地図を埋め込む』のタブをクリック4カスタマイズした後、ウィンドウ上部にあるコードコピーする1〜4までの作業ができたら、bodyタグの中にコードを貼り付けてみましょう。以上のように表示されていれば成功です。4Youtubeの動画を埋め込んでみよう!サンプルとして『君の名は』のPVを埋め込んでみましょう。こちらからYoutubeにアクセスします。1埋め込みたい動画の画面まで移動する2動画右下にある『共有』をクリックする。ウインドウの下部にある『埋め込み』をクリックする3好きなようにチェックボックスの設定を変更する4表示されたコードをコピーする1〜4までの作業ができたら、bodyタグの中にコードを貼り付けてみましょう。以上のように表示されていれば成功です。開始時間を46秒に設定してあります。CSSでデザインを整えてあります。まとめいかがでしたか?ところどころ説明を省いてある箇所がありますので、分からない部分もあったかと思います。質問やご要望があれば、コメントやお問合わせからご連絡ください。次回はCSS編を書きますので、そちらの記事もぜひご覧ください。CSSをマスターすれば一人でwebサイトを作れるようになるはずです。現在は自然言語処理を用いたAIサービスを業務としています。Reserved.wpDiscuz。