HTML文書の基本
前置きが長くなりましたが HTMLの作成方法について紹介していきたいと思います。
まずは自分のパソコンで最も単純な HTML を見てみましょう
<html>
<head>
</head>
<body>
</body>
</html>
後で編集
BODY 人間が見るための部分
Head ブラウザで見るための部分
ブサウザで表示してみよう
まずは次のファイルをブラウザで開いてみましょう。
ブラウザで開くには Chrome 2 index HTML というファイルをドラッグ&ドロップしましょう。自分のパソコンの中だけでファイルを閲覧することができます。
問題なく表示できたでしょうか
次の画像のような状態になっていれば問題ありません。
サーバーにアップロードしてみよう
続いてサーバーにファイルをアップロードして全世界に今のファイルを公開してみましょう。
パソコンで htmlファイルを開けることが確認できたかと思いますが一体これをどうやったら公開できるのかというのがが疑問だと思います。
HTML ファイルを作っただけではこれがインターネット上に存在するわけではありません。
まずこのファイルをインターネット上に公開するには公開設定されているパソコンが必要になります。このネットに繋がり 公開設定ができているパソコンのことをサーバーと呼びます。
皆さんが今使っているパソコンをサーバーにすることは可能なのですが、このパソコンをずっとインターネットにつないで問題なく閲覧できるような状態を維持しなければいけないのでそれはあまり現実的ではありません。
そういったサーバーをレンタルしてくれる会社がありますのでこちらのサービスを利用します。
代表的なレンタルサーバーを紹介していきたいと思います
さくらインターネット
エックスサーバー
ロリポップ
などなどが代表的なサービスになります。
エックスサーバーのレンタルをしてみましょう。
エックスサーバーはこちらでアカウントを取ることができます2週間無料なのでその間にサイトをアップロードをお試してみるというのはとても良いと言うと思いますのでぜひこの1人の人ってアカウントを取得してしまいましょう。
自分のサイトを公開するときにもレンタルサーバーが必要ですしフリーランスで活動している人は自分のサーバーを一つは持っているのは普通です
エックスサーバーは非常に安定した優れたサーバーですのでこの政策が終わった後にもずっと使い続けることができます。ではアカウントを取得してサーバーを借りてみましょう。
サーバーを借りるにはクレジットカードがおそらく必要ですのでそれも用意しておくといいですもしかしたら他の支払い方法もにも対応しているかもしれません。
サーファーを借りると仮登録の時に重要な情報が全て載っているメールが届いていますこのメールがかなり重要なものになりますので紛失しないように気をつけましょう 。
メールの中身を見てみると FTP 情報というものがあると思いますこれがサーバー上にファイルをアップロードする際に必要な情報になります。
レンタルしたサーバーにアクセスする方法は2種類あります。
まずメールに乗っている公開アドレスと角ってなっているものがあなたに与えられた URL になります。
このアドレスに自由にサイトをアップロードすることが可能です。
ブラウザでこのアドレスにアクセスしてみるとファイルがアップロードされていませんと言ったような文言が表示されていると思います。
このように初期状態では何もファイルがアップされていませんのでサーバーが用意している HTML ファイルが表示されています。
月2次に FTP ソフトによる接続方法があります
まずは専門のソフトが必要になりますので FTP ソフトをダウンロードしましょう。
おすすめは filezilla です。
Dreamweaver などにも FTP の機能はついていますのでこちらを使っても構いません。
今回このソフトを選んだ理由は無料であることと Windows と Mac 両方に対応しているためです。
他に気に入っているソフトなどがある場合はそちらを利用しても全然構いません。
FTPソフトの使い方の紹介をしていきます。
画面を見てみると左側左側と右側に画面が分割されていると思います左側が自分のパソコンのファイルの一覧を表示しています。
右側は白いかと思いますがお家さんにサーバー上のファイルの一覧が確認できます。
右側にファイルの一覧が表示されている状態でファイルをドロップ&ドラッグすると自分のパソコンからサーバーにファイルをアップロードできるというイメージです。
画面の上の方に FTP 情報を入れられそうな入力欄があると思いますこちらにメールに載っている情報を入力しましょう。アカウントを取ったばかりだと接続に失敗することがありますので2時間程度待ってから作業を始めた方がいいかもしれません。
接続してみるといいわの画面に様々なファイルの名前が出てきたと思いますが、メールに崩壊ホルダーという気体があったかと思います。エックスサーバーの場合は public HTML という名前が書かれていたと思います。
この中に品で薬してメールを置いてあげると、公開言われると書いてあったアドレスにアクセスした際に実際にアップロードしたファイルが表示されるという仕組みです。
2点は実際に図のようにアップロードしてみてください。
表示されましたでしょうか。表示されたら次へ進んでいきましょう
ドメインを取得して、登録してみよう
続いてドメインを取得してその表示にしてみましょう。
この説明欄は Web 制作とはあまり関係ありませんので製作が一通り済んだ後に実際に公開したいという段階で確認してもらってもいいです。
この辺は非常にややこしくやる気が失せる部分ではありますので、ちょっとやる気がなくなっている方は飛ばしてしまった方がいいでしょう。
ではドメインをまず取得しましょう。
その前に停めは何かという話ですが例えば Google では Google . com というドメインを利用しています Yahoo でアルファ Yahoo .co.jp というアドレスです。
サーバーを取得した際に与えられるアドレスは実際にはサーバー会社のものになりますよく見るとエックスサーバー的なアドレスが後ろの方についていますね。
キャンペーンなどでドメイン一個付属などという場合はこれではありなく実際の通常のドメインと同じものでドメインの所有権は自分にあります。
路面提供会社でチェックしてそのドメインがまだ使われていなければ自分のものとして使うことが可能です。
ドメインを取得する際に注意点なのですが、ドメインを持っている人間の名前や住所などは誰でもが確認できるという仕組みになっています。
法人などでは法人の住所と法人名が表示されるだけなので特に問題がないのですが、個人である場合はこの辺はとても注意が必要です。
例えばドメインを取得してそのドメインを使っているサイトで何か炎上案件起こしてしまった場合に本名と住所がバレバレになってしまいます。これは非常にまずいですね。
そういった情報公開したくない人のために人気した人間の名前を隠してサーバー会社名義という表示にするというサービスをドメイン会社は提供しています。
個人で取得する際はこちらのサービスを利用した方が無難です。
取得する際に必ずチェックを入れるようにしてください。
ドメインの仕組みを超簡単に説明するとドメインの提供会社でネームサーバーというものがありますこれはそのアドレスでアクセスした時にこのアドレスのサーバーはここだよみたいな振り分けをしてくれるコンピューターです。
なのでドメイン取得会社とサーバー会社とでネームサーバーの設定が必要になってきます。
こちらも詳しく記載していきたいと思います。
この記事は初途中なのでここはまだ書いていません追記していきたいと思いますのでご期待ください次に進みます。
レンタルサーバーでネームサーバーのアドレスを確認してください。
そしてレンタルサーバーでドメインの登録をしてください取得したドメイン名を入力します。
ドメイン提供会社側ではサーバー会社で確認したネームサーバーのアドレスを入力してください。
ドメインの浸透には時間がかかりますので設定してから2時間から2日かかると言われていますのでその時間を待ちましょうそのうち表示されることがありますスマホやパソコンで表示さが出たり隣のパソコンで表示されているが自分のパソコンでは表示されないなどいろいろありますが時間が解決してくれるものですのでしばらく待ちましょう。
HTMLの学習
実際にサイトを公開できたところで後は変してメールの選挙をするだけです。
どこで勉強したことをもとにしてメール文章を作りサーバーにアップしてば全世界にファイルを公開することができます。
HTMLですが制作する際に全部を完全に暗記している必要はありません。
（いろいろ製作しているうちにだんだん覚えてしまうものではありますが）
ネット上にはHTMLについてまとめているサイトがたくさんありますので困ったことがあったときは検索して正解にたどり着けば問題ありません。
HTMLの最も基本的な考え方
HTML ですがあくまでも文書構造を作成するものだということを頭に入れておきましょう。
これをやらない場合は例えば SML ファイルに一枚の画像をピタッと貼るだけでよくなってしまいます。
人間が見るぶんにはこれで本当は全然問題ないのですが、例えばテキストを落として再利用しづらかったり、検索ネットなどの機械がそのファイルを見たときもその画像に何が書いてあるかわかりません。
（ AI の画像認識が進んでもしかしたらそのうち画像で何が書いてある認識して検索に引っ掛けるみたいなことがどんどん進行してくるかもしれませんがこれで一旦それは忘れておきましょう）
なので基本的には機械が文章を分かりやすく認識できるような書き方をしてあげます。
これは人間が見たときも同じなのですが、文章は「画像」「見出し」「本文」の1セットを意識して作成すると構造がわかりやすく見た目にも整ったセットが完成します。
見出しはhタグ
画像はイメージタグ
本文はPタグ
になります。
このセットが存在しますよ、ということを示すタグも存在します。それがセクションタグです。
このセクションタグはみだしが存在していないといけないというルールがありますので必ずかかる時にはhタグを含むようにしてあげましょう。
この構造をアウトラインと言います。できるだけアウトライン構造を意識したコーディングができるといいですね。
タグを覚えよう
タグにはいくつか種類があります。
A タグのようにリンクを貼るという特徴を持っているのでどのように酵素を示す帰宅の構造を示します
後はスタイル100を読み込む食べ物屋スタイルシートを読み込むためのものなどもありますせいしないで
どんな役割を示すかということを示すためのタグもありますし
見た目でリストをの形をしているからリストタグだったり辞書の単語と本文の関係を示すという意味を持つものもあります
大分多分ついて細かく紹介していきたいと思いますのでまいます
りんくをはってみよう
画像を表示してみよう
よく使うタグを知ろう
100についての情報ですがこちらはちょっと入力に時間がかかってしまいますので他のサイトのリンクを載せることで一旦割愛させていただきたいと思います。
そのうちちまちまと入力して分かりやすいコンテンツを実現したいと思っています。
フォームのためのタグ
🆔とクラスについて
サブには属性というものが付けられるのですが特別な属性として ID とクラスがあります。
ID とクラスは非常に似ているものなのですが少し願いがあります。
基本的にはタグに名前を付けるイメージです。
CSS でメールを送るときの場所の指定に使います。
例えばタイトルの H 1の部分に it ロゴと言う ID をつけたとします CSS でここに本当の色を変えたい場合はこのような記述方法になります。
のように CSS や JavaScript で場所を指定する時に使うので覚えておきましょう。
次に ID と CLASS の違いです
IDはページの中でひとつしか使ってはいけないという特徴を持っています。
一つのために複数の IDで名前を付けてあげることもいけません。
IP 1インクで指定することもできますリンクの中身にIDを指定してあげると竹刀の場所にリンクを飛ばすことができます。
classはページ内でいつも使っていいですし一つのためには複数のクラスをつけることができます。
最近の Web 制作ではクラスを主に使って相手はあまり使わないというのが主流です。
しかしページ内リンクやページの中に１つしかない特徴により、 JavaScript の指定でエラーが起きにくかったり読み込みが早いというところもありますので適宜使っていきましょう。
ページ内の役割を表すタグ
ページ内の役割を表すためには役割を示すタグをつけてあげる必要があります。
ウェブサイトの構造は基本的な構造というものがありますので、初心者の家はできるだけこれを守った方が良いです。
インターネットの歴史の中でウェブサイトはどんどん洗練されて使いやすくなってきたものなので、これらの慣習には乗っておいた方がいいです。
今までにない革新的なサイトを作りたくなってしまうものですが、これは製作者側のエゴであり、利用者側のことを全く考えていない考えです。
今までの慣習や、利用者側の使いやすさを覆すようなメリットが何かあればチャレンジしてみてもいいですがそのようなことはそうそうあるものではありませんので、今の段階では無難に色々なサイトを見て現在のウェブサイトの様々な特徴を身につけて行った方が今後の仕事に役立つことは間違いありません。
ここではその一帯デザインのサイトや使いやすいサイトを知るために様々な素晴らしいデザインのサイトを紹介しているサイトを紹介したいと思います。
上記のようなサイトで色々なサイトを見て、どのような工夫をしているかを汲み取れるように良いを考えながら見るといいと思います。
例えば同じジャンルのサイトは掲載内容も見ていますし掲載内容の順番なども同じでしょうし写真の雰囲気や使っている色も似ているかもしれません。
あらゆるサイトは意味をもってその色や形本店どの順番をしています。
そういった情報がひとつでむくみとれるように目を凝らしていくのが今の勉強している段階での重要なことです。
これは Web 制作者である限りずっと続くものなので早めにそういった目を養っておきましょう。
構造についてザックリ紹介
ウェブサイトにはヘッダーとフッターがあります。
ヘッダーにはナビゲーションが掲載されていることが多いです。
ページの上部は1番目がいきやすい部分なのでサイトの名前などが乗っています。
そのすぐ下には画像や動画など目を引きやすいコンテンツが置いてあることが多いです。
この画像でこのサイトがどんなサイトなのかを表現します。
この部分が的外れな内容だった場合大半の人は離脱してしまうでしょう。
フッターにはコピーライトがあります。
最近は縦に長い生理があるのでどうなったのに他のページへのリンクつまりはサイトマップのようなものが記載されていることがままあります。
トップページと下層ページは役割が異なります。
突然死では上記のように船を弾きやすかったりなどそういった工夫がありますが下層ページはそのような興味を引く部分はあまり必要ないかもしれません。
どちらかと言うとを使っている人は情報を求めていますので大付近の装飾は簡素なものになっていることが多いです。
紹介したものはものすごく少ないものですがそのように言っウェブサイトは色々な法則や仕組みを組み合わせて作っているものになりますので色々どんなことを工夫して作っているのかを考えながら色々なサイトを見てみましょう。
そうした努力が良いウェブデザイナーになる早道となるでしょう。
headタグ
navタグ
footerタグ
sideタグ
などなど