に投稿 1件のコメント

無料&高機能! HTMLとCSSに必須、おすすめのエディタ

無料&高機能! HTMLとCSSに必須、おすすめのエディタ

ホームページ作りに必須のエディタソフト

こんにちは、ホームページ制作のオイゾウです!
HTMLについての話も一通り終わったところで、ここからはホームページのデザインやレイアウトといったスタイルを指定するCSS(カスケーディングスタイルシート)について説明していきたいのですが、その前に!
HTMLやCSSの記述には「テキストエディタ」(エディタ)という、パソコンのメモ帳(Macならテキストエディット)を高機能にしたソフトを使うことをおすすめしたいと思いますので、今回は無料で入手できるエディタを紹介します。

篠田さんプロフィール

川越市内の某お土産屋さん、68歳。
現在は息子夫婦にお店を任せているので半隠居状態。
趣味の家庭菜園をネット上に発信させるため、まずはMacBookを購入し、最近はガラケーからiPhoneに機種変更したばかりの意識高い系()ご主人。

ジョージさんプロフィール

川越市内で理容室を営む52歳。
趣味はゴルフで、2020年の東京オリンピックのゴルフ競技開催場所が川越(霞が関カンツリークラブ)に決まったことでテンション高め。
理容師としての熱い思いを、ホームページを通じて発信していく予定。

オイゾウ
篠田さんとジョージさん、久しぶりですね。
篠田さん
最近は俺の出番が全然ないじゃんかよ〜!
ジョージさん
俺らがいた方が話が分かりやすいって言われるよ?
もっと出した方がいいんじゃない?
オイゾウ
やっぱりそうですか?
この会話形式もなかなかどうして、意外とめんど・・・
篠田さん
何っ!?
今何て言おうとした!
オイゾウ
す、すみませんでした!
できるだけお二人に登場して頂くように日々がんばりますっ!
篠田さん
なんだよ、分かってるなら別にいいんだけど。
オイゾウ
まあそんな話はいいとして、お二人はHTMLについて理解できましたか?
ジョージさん
正直言うと、ちょっと難しくてよく分からないかな。
最初はもっとこう、感覚的に作れるものかと思ってたんだけど。
文章の前に<p>を入れて、後ろには</p>を入れるわけでしょ。
で、その<p>だけじゃなくて<h1>とか<img>とかいろんな種類があるってことが、ハードル高いなって感じがしてね。
オイゾウ
ジョージさんの仰ることはよく分かります!
でもそんなに心配しなくても大丈夫です、なぜなら・・・

  1. そのうち慣れる
  2. 実はそんなに自分でコードを書かなくても作れる

オイゾウ
ということなんですよ!
篠田さん
自分で書かなくてもいいなら、覚えなくてもいいってこと?
オイゾウ
そうとも言えますし、でも部分的に自力で書ける必要性が出てくることが多々あって、そんなときに書けたらより良いですよ、ということです。
篠田さん
要は、書けなきゃダメってことじゃん!
オイゾウ
私が言いたいのは、基本的な構造や知識が備わっていればいくらでも応用が効くので、一気に全部覚えなくても大丈夫ということです。
ジョージさん
了解。
HTMLについてこれまでいろいろ説明してくれてたけど、ちょっとよく分からない部分があったんだよね。
オイゾウ
どの辺が分からなかったですか?
ジョージさん
いや、なんていうか、例えば行の前を空けたり空けなかったりするのはなんでなのかな? とか。
オイゾウ
あ、これはインデント(字下げ)と言って、コードを読みやすくするために意図的に空けているんです。
ちょっと見てみましょう。

インデントしないと階層が分かりづらいです。

オイゾウ
これはインデントしてないケースです。
では続けてインデントしているケースです。

インデントを入れることで階層が分かりやすく、コードが読みやすいです。

オイゾウ
いかがでしょうか?
インデントを入れることにより、階層が視覚的に分かりやすくなるのです。
なお、ここではタブによってインデントを入れてますが、半角スペースを入れてもいいですね。
そしてインデント自体はコードの内容自体に影響がありませんので、どうインデントを入れるかということには決まりがありません。
このHTMLソースは17行ですが、実際には何百行となることもあり、またHTML以外にもこれから学んで頂くCSSなどでもインデントを入れることでコードがとても読みやすくなるので、是非活用してみてくださいね。
ジョージさん
それは分かったけど、そのインデント? のところに薄い線が入ってたり、行の最後に矢印(↓)があるし、あと文字が青とか緑とかカラフルだけど、これは何か意味があるの?
オイゾウ
これはですね、あるソフトを使って書いているので、自動的に線が入ったり、改行の矢印が表示されたり、文字に色が付いたりするんです!
篠田さん
へぇ、それは便利なの?
オイゾウ
とても便利です!
まず、左側を見てください。

エディタは行番号の表示や文字の色分けがとても便利です。

オイゾウ
行番号が入っているのが分かると思います。
例えばこれが500行くらいのソースになったとしますよね?
そして、どこかにエラーが出てしまったとします。
そのときにエラーしている箇所を探すだけでも一苦労なんですが、もし何行目にエラーが出ていると分かれば、すぐにエラーしている箇所を見つけ出すことができるんです!
ジョージさん
ふーん、じゃあ文字の色は?
オイゾウ
これはですね、多くのエディタにはこのように自動的に要素や属性などに色を付けてくれる機能が付いているんです!
なのでソースの内容をパッと見で把握しやすくなりますし、例えばスペルミスや、>を抜かしてタグを閉じ忘れてしまったときなどにすぐ見つけることもできます。ちなみに今回使っているエディタソフトはmiというもので、かなり高機能でありながら「無料」なんです!
せっかくですから無料で使えるおすすめのエディタを紹介したいと思います。

Mac編

mi(エムアイ)

かなり昔からあるMac専用に開発されたエディタで(Win版もあり)、HTMLやCSSだけでなくC言語やJAVAなど様々な言語に合わせたモードで書けるのがうれしいです。
また「マルチファイル検索」機能では、そのファイル内だけでなく開いている全てのファイルを検索してくれます。
かなり細かいところまで設定できますので、使いこなすうちにどんどん自分に合う設定に変えていって、コーディングを楽しんでください!

miのダウンロードはこちらから

CotEditor(コットエディタ)

こちらもmiと同じくMac環境でのエディタとしてはとても有名なフリーソフトです。
無料といっても使い勝手も抜群な上に様々な言語にも対応していて、知り合いも含めかなり多くの人が使っているという印象です。
色の設定なんかも簡単にできて、初心者からプロまで幅広く使えるおすすめエディタです!
App Storeからダウンロードできます。

Windows編

Notepad++(ノートパッドプラスプラス)

海外のソフトですが日本語にも対応していて、初心者の方にも使いやすい仕様になっています。
行番号とソースの間に区切りが分かる記号が表示され、どこからどこまでがタグの範囲か分かりやすくなっていてとても便利です。

Notepad++のダウンロードはこちらから

TeraPad(テラパッド)

エディタとしての機能は無料とはいえ十分すぎるほど備わっているので、HTMLやCSSのコーディングであればかなり使いやすいですね。
国産のソフトなのでもちろん日本語表示、すぐに使い始められます。
Windows8まで対応。

TeraPadのダウンロードはこちらから

篠田さん
よし、さっそくインストールするよ!
オイゾウ
篠田さん、珍しく前向きですね?
篠田さん
最近はiPhone買ってからというもの、気になるアプリはとりあえずインストールしてるからね。
ジョージさん
HTMLに関してはある程度書ける気がしてきたけど、CSSっていうのはもっと難しいの?
オイゾウ
どうでしょうか、単純に比較はできませんが・・・。
でもページのレイアウトを整えたり、背景や文字に色を付けたり、楽しいと思いますよ!
ジョージさん
そうなんだ、それは楽しみだね!
うちの理容室は男性で、しかも年配のお客様が多いから、派手な感じというよりは渋くてシンプルな方がいいなと思ってるんだけど。
篠田さん
うちのしのだ屋はね、江戸時代っぽいというか、わりと古風なイメージでいきたいんだよね。
オイゾウ
お二人とも、デザインのイメージがすでにしっかりと出来上ってて素晴らしいですね!
そういったことはCSSでスタイル指定していくことで可能になりますので、次回以降からどんどんやっていきましょう!
0
に投稿 1件のコメント

知ってると便利なHTMLタグ厳選13個(簡単な例文付き)

知ってると便利なHTMLタグ厳選13個(簡単な例文付き)

頻繁に使うタグを選びました

こんにちは、ホームページ制作のオイゾウです!
HTMLには様々なタグがありますが、それらを全部覚えるのはとても大変なことで、もしホームページを作る上で全くの白紙からHTML文書をコーディングしていく場合、やはりある程度全般的に知っておかなければなりません。
ですが最近はとても便利な時代になりました!
HTMLを全て自分で作らなくても、様々なサービスを利用することで必要な部分だけコーディングすれば、ちゃんとしたホームページやブログを作ることができてしまうんです。
そこで今回は、初心者の方にとって「これだけ覚えておけばとりあえずOK」なHTMLタグをピックアップし、その使い方を紹介していきます!

【1】div【かたまり(ブロック)】

ブロック要素の1つで、文字通りブロック(かたまり)の状態を定義する要素です。
div要素はこれ自体にどんなコンテンツであるかという意味を持たず、このかたまりにCSSでスタイル指定するときに便利なのでよく使われます。
ちなみにブロック要素とは、その前後で改行が入るものになり、逆にインライン要素と呼ばれるものは前後に改行が入りません。

[html]<div>しのだ屋のこだわり</div>
<div>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</div>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

しのだ屋のこだわり
素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。

【2】p【段落】

div同様にブロック要素であるpは、文章のひとまとまりを段落(paragraph)で示すために使います。

[html]<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>
<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。

当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。

江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

【3】span【かたまり(インライン)】

div要素同様に特に意味を持たないのがこのspan要素。
文章の一部をスタイル指定するときに使います。
インライン要素なので前後に改行が入りません。

[html]<p>素材の持つ<span style="color: red;">素朴な味わい</span>を最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>[/html] 「素朴な味わい」という文字の色をred(赤)に指定しています。

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。

こんな感じにもできます。

[html]<p>素材の持つ<span style="color: white; background-color: red;">素朴な味わい</span>を最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。

【4】h1, h2, h3, h4, h5, h6【見出し】

文章の見出し(heading)として使うブロック要素のタグ。
この見出しのレベルはh1〜h6まで6段階あり、h1が最も重要となります。

[html]<h3>しのだ屋のこだわり</h3>
<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>
<h3>贈り物にも喜ばれます</h3>
<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>
<h3>伝統と旬の融合</h3>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

しのだ屋のこだわり

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。

贈り物にも喜ばれます

当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。

伝統と旬の融合

江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

※CSSでスタイル指定してあります。(見出し文の下の青い線)

【5】br【改行】

改行(break)します。
pやdivなどのブロック要素の中で、単に改行したいときに使います。

[html]<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。<br>緑茶や抹茶によく合います。<br>12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。
緑茶や抹茶によく合います。
12個入りで販売中、お取り寄せもできますので是非ご利用ください。

【6】hr【水平線】

コンテンツを区切るときなどに使う水平線(horizontal rule)。

[html]<h3>しのだ屋のこだわり</h3>
<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>
<hr>
<h3>贈り物にも喜ばれます</h3>
<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>
<hr>
<h3>伝統と旬の融合</h3>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

しのだ屋のこだわり

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。


贈り物にも喜ばれます

当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。


伝統と旬の融合

江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

【7】blockquote【引用】

引用文ということを示すためのタグ。

[html]<h3>伝統と旬の融合</h3>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>
<blockquote><h4>温故知新とは?</h4>
<p>前に学んだことや昔の事柄をもう一度調べたり考えたりして、新たな道理や知識を見い出し自分のものとすること。古いものをたずね求めて新しい事柄を知る意から。▽「温」はたずね求める意。一説に、冷たいものをあたため直し味わう意とも。「故ふるきを温たずねて新あたらしきを知しる」または「故ふるきを温あたためて新あたらしきを知しる」と訓読する。</p>
<p>引用:goo辞書</p></blockquote>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

伝統と旬の融合

江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

温故知新とは?

前に学んだことや昔の事柄をもう一度調べたり考えたりして、新たな道理や知識を見い出し自分のものとすること。古いものをたずね求めて新しい事柄を知る意から。▽「温」はたずね求める意。一説に、冷たいものをあたため直し味わう意とも。「故ふるきを温たずねて新あたらしきを知しる」または「故ふるきを温あたためて新あたらしきを知しる」と訓読する。

引用:goo辞書

※CSSでスタイル指定してあります。

【8】a【アンカー(リンク)】


アンカー(anchor)タグと言って、リンク先を指定するときに使います。
他にもページ内の指定した場所に移動したり、電話やメールを起動するときもこのアンカータグで行ないます。

[html]<p>しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。<a href="https://oizo.jp/sample/osusume.html">芋まんじゅうのお取り寄せ</a>も可能です。川越に来た際には是非立ち寄ってください。</p>
[/html] 「href」でリンク先の指定ができます。
[html]<a href="https://oizo.jp/sample/osusume.html">芋まんじゅうのお取り寄せ</a>[/html] このように、hrefに指定したURLの前後を「"」(ダブルクォーテーション)で囲みます。
このHTMLソースは、ブラウザでは以下のように表示されます。

しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。芋まんじゅうのお取り寄せも可能です。川越に来た際には是非立ち寄ってください。

応用1:画像にリンクを設定

文字にリンクを設定することと比較しても特に難しいことがあるわけではなく、画像タグの前後をaタグで囲むだけです。

[html]<a href="https://oizo.jp/sample/osusume.html"><img src="https://oizo.jp/sample/images/manju.jpg"></a>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

応用2:ターゲットを指定

通常アンカータグではリンク先のページにジャンプしますが、「target="_blank"」とすることにより新しいページで表示させることができます。
一般的には外部サイトにリンクを飛ばす際に使用することが多いです。

[html]<a href="https://oizo.jp/sample/osusume.html" target="_blank"><img src="https://oizo.jp/sample/images/manju.jpg" /></a>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

応用3:ページ内の別の場所に移動

[html]<p>アンカータグについてある程度理解することはできましたでしょうか? もしよく分からなければもう一度<a href="#hajime">アンカータグの説明の最初</a>から読んでみてください!</p>
[/html] まず、hrefに#から始まる任意の文字列(英数字)を指定します。
そしてリンク先の場所(この場合はこのページ内のaタグを説明している最初の部分)に、以下のように指定します。
[html]<h2 id="hajime">a</h2>[/html] idという属性を用意し、先ほどの「hajime」を指定します。

アンカータグについてある程度理解することはできましたでしょうか? もしよく分からなければもう一度アンカータグの説明の最初から読んでみてください!

【9】img【イメージ(画像)】

イメージ(image)、つまり画像を表示させるタグです。
説明の前に何度か概出だとは思いますが、表示させたい画像のURLをimgタグ内の「src」という属性に指定することで、画像を表示することができます。
URLの前後は「"」(ダブルクォーテーション)で囲みます。

[html]<img src="https://oizo.jp/sample/images/manju.jpg">[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

応用:画像の説明を入れる

「alt」という属性を指定することで、その画像がもし表示されなかったり、読み込みに時間がかかったりする場合に、代わりにその画像を説明する文章を表示させることができます。
またこのalt属性はGoogleで画像検索する際にも参考にされますし、その画像にリンクを貼る場合はSEO的により良い評価となりますので、是非このalt属性をページ内の画像に指定することをおすすめします!

[html]<img src="https://oizo.jp/sample/images/manju.jpg" alt="しのだ屋のおすすめ芋まんじゅう">[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

しのだ屋のおすすめ芋まんじゅう

↑画像の上にカーソルを合わせると文字が出てきます。(ブラウザの設定により文字が出ない場合もあります)

【10】ul, li【箇条書きリスト】

箇条書きリストを作るためのタグです。

[html]<ul>
<li>しのだ屋のこだわり</li>
<li>贈り物にも喜ばれます</li>
<li>伝統と旬の融合</li>
</ul>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

  • しのだ屋のこだわり
  • 贈り物にも喜ばれます
  • 伝統と旬の融合

【11】ol, li【番号付きリスト】

ulのような箇条書きリストと違い、こちらは番号が先頭に付いたリストになります。

[html]<ol>
<li>しのだ屋のこだわり</li>
<li>贈り物にも喜ばれます</li>
<li>伝統と旬の融合</li>
</ol>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

  1. しのだ屋のこだわり
  2. 贈り物にも喜ばれます
  3. 伝統と旬の融合

応用1:開始番号を指定

通常このol要素は1から順番に昇順で続きますが、「start」という属性を指定することで、違う数字から始めることもできます。

[html]<ol start="7">
<li>しのだ屋のこだわり</li>
<li>贈り物にも喜ばれます</li>
<li>伝統と旬の融合</li>
</ol>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

  1. しのだ屋のこだわり
  2. 贈り物にも喜ばれます
  3. 伝統と旬の融合

応用2:番号を降順にする

olに「reversed」という属性を指定することで、番号を逆順にすることができます。
その場合、前述のstart属性も併せて指定します。

[html]<ol reversed="reversed" start="7">
<li>しのだ屋のこだわり</li>
<li>贈り物にも喜ばれます</li>
<li>伝統と旬の融合</li>
</ol>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

  1. しのだ屋のこだわり
  2. 贈り物にも喜ばれます
  3. 伝統と旬の融合

【12】dl, dt, dd【定義型リスト】

定義型リスト(definition list)と呼ばれる要素で、dlとdtとddはセットで使用します。
定義する用語をdt(definition term)に、その用語の意味を詳しく説明した文章をdd(definition description)に記述します。
様々な状況でこの定義型リストは使うことができます。

例1:Q&A

[html]<dl>
<dt>送料はいくらですか?</dt>
<dd>地域によって変わります。1万円以上で送料無料になります。</dd>
<dt>お届け日の指定はできますか?</dt>
<dd>可能です。最短で注文日より3日目以降よりご指定できます。</dd>
<dt>返品したいのですが。</dt>
<dd>万が一商品に不具合がありましたら対応させて頂きますので、着払いにてご返送ください。</dd>
</dl>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

送料はいくらですか?
地域によって変わります。1万円以上で送料無料になります。
お届け日の指定はできますか?
可能です。最短で注文日より3日目以降よりご指定できます。
返品したいのですが。
万が一商品に不具合がありましたら対応させて頂きますので、着払いにてご返送ください。

例2:お知らせ

[html]<dl>
<dt>5月14日</dt>
<dd>限定の芋まんじゅう再入荷しました!</dd>
<dt>5月12日</dt>
<dd>川越市内に2店舗目がオープンしました!</dd>
<dt>5月9日</dt>
<dd>抽選で当たるキャンペーン開催中!</dd>
</dl>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

5月14日
限定の芋まんじゅう再入荷しました!
5月12日
川越市内に2店舗目がオープンしました!
5月9日
抽選で当たるキャンペーン開催中!

例3:画像とその説明

[html]<dl>
<dt><img src="https://oizo.jp/sample/images/manju.jpg" alt="芋まんじゅう"></dt>
<dd>芋まんじゅう</dd>
<dd>ほんのり甘さが人気の秘密。</dd>
<dt><img src="https://oizo.jp/sample/images/yokan.jpg" alt="芋ようかん"></dt>
<dd>芋ようかん</dd>
<dd>しっかりとした芋の風味がお茶によく合います。</dd>
<dt><img src="https://oizo.jp/sample/images/soft.jpg" alt="芋ソフト"></dt>
<dd>芋ソフト</dd>
<dd>新商品、芋が入ったソフトクリーム。</dd>
</dl>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

芋まんじゅう
芋まんじゅう
ほんのり甘さが人気の秘密。
芋ようかん
芋ようかん
しっかりとした芋の風味がお茶によく合います。
芋ソフト
芋ソフト
新商品、芋が入ったソフトクリーム。

【13】table, tr, th, td【テーブル(表)】

表、つまりテーブル(table)のタグです。
tableはテーブル要素であることを示し、trは表の行、thは表の見出し用セル、tdは表のセルになります。

例1:3行×4列の表の場合(見出しあり)

[html]<table>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
<th>見出しセル4</th>
</tr>
<tr>
<td>2行目のセル1</td>
<td>2行目のセル2</td>
<td>2行目のセル3</td>
<td>2行目のセル4</td>
</tr>
<tr>
<td>3行目のセル1</td>
<td>3行目のセル2</td>
<td>3行目のセル3</td>
<td>3行目のセル4</td>
</tr>
</table>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

見出しセル1 見出しセル2 見出しセル3 見出しセル4
2行目のセル1 2行目のセル2 2行目のセル3 2行目のセル4
3行目のセル1 3行目のセル2 3行目のセル3 3行目のセル4

例2:5行×2列の表の場合(見出しなし)

[html]<table>
<tr>
<td>1行目のセル1</td>
<td>1行目のセル2</td>
</tr>
<tr>
<td>2行目のセル1</td>
<td>2行目のセル2</td>
</tr>
<tr>
<td>3行目のセル1</td>
<td>3行目のセル2</td>
</tr>
<tr>
<td>4行目のセル1</td>
<td>4行目のセル2</td>
</tr>
<tr>
<td>5行目のセル1</td>
<td>5行目のセル2</td>
</tr>
</table>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

1行目のセル1 1行目のセル2
2行目のセル1 2行目のセル2
3行目のセル1 3行目のセル2
4行目のセル1 4行目のセル2
5行目のセル1 5行目のセル2

【番外編】【コメント】

<!― ◯◯◯◯◯◯◯◯ ―>←この◯部分にコメントを入れます。
ブラウザに表示させずに、HTMLソースに指示や注釈などを入れたいときに使います。
複数人でソースを編集する場合や、後になってご自身で内容を把握できるようにしたいときにとても便利です。

[html]<!― これは見出しです ―>
<h3>しのだ屋のこだわり</h3>
<!― これは本文です ―>
<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>[/html] このHTMLソースは、ブラウザでは以下のように表示されます。

しのだ屋のこだわり

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。

いかがでしたでしょうか?
ホームページ作成ソフトを使ったり、WordPressなどCMS(コンテンツマネジメントシステム)で構築したり、または様々な有料(無料含む)ホームページ作成サービスを利用する上では、必ずしもHTMLに関して全てを知っている必要はありません。
ただいずれのサービスを利用するにしても、ある程度の知識があるのとないのとでは出来上がりにかなりの差が出ます。
そういった意味で今回紹介したHTMLのタグをしっかり押さえておけば、ホームページを作る上でかなり強い武器になると思いますので、是非これらのタグを使える様になりましょう!

+3
に投稿 3件のコメント

HTMLタグの種類~使用頻度の高い必須のタグ4つ

HTMLタグの種類~使用頻度の高い必須のタグ4つ

初心者必見、基本中の基本タグ

こんにちは、ホームページ制作のオイゾウです!
HTMLの概念がだいたい分かってきたところで、これからは実際に具体的なノウハウを使ってご自身でホームページを作っていく段階になりますが、今回は初心者の方にまず最低限知っておいて頂きたいタグをご紹介します。
前回「HTMLタグの種類を覚えよう~ヘッダ情報」ではhead要素(<head></head>)内に記述する要素についてでしたが、今回はbody要素(<body></body>)内に記述する、実際にブラウザに表示される部分のタグになります。
もちろんここで紹介する4つのタグ以外にもたくさんタグを知ってなければならないのですが、最初からいきなりたくさん覚えるのは大変なので、まずは使用頻度の高いタグからしっかり覚えて、あとはコーディング(記述すること)しながら必要に応じて徐々に理解していきましょう!

pタグ(段落)

pはparagraph(パラグラフ)の頭文字で、段落を作成するためのタグです。
pタグの前後は改行されます。
ちなみに、単に改行したい場合は毎回pタグを使わず、<br>という改行タグを使いましょう。

[html]<p>しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。川越に来た際には是非立ち寄ってください。</p>[/html]

この段落の中に改行を入れたいとき、
[html]<p>しのだ屋は創業82年です。</p>
<p>さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。</p>
<p>川越に来た際には是非立ち寄ってください。</p>[/html] このように、単に改行目的でpタグを使うのは構文的に良くありませんので、
[html]<p>しのだ屋は創業82年です。<br>
さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。<br>
川越に来た際には是非立ち寄ってください。</p>[/html] 改行したい場合は<br>タグを使いましょう!
実際には以下のように表示されます。


しのだ屋は創業82年です。
さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。
川越に来た際には是非立ち寄ってください。


hタグ(見出し)

hはheading(見出し)の略で、見出しを意味するタグです。
h1、h2、h3、h4、h5、h6と、1〜6まであって、数字が小さくなるほど重要度が高まります。
つまり、h1が最も重要な見出しタグになります。
見出しを効果的に使うことにより、整理された読みやすい文章構成となり、SEO的にもとても好影響となるため、状況に応じて適切に使っていきましょう。

pタグだけだとこのようになります。
[html]<p>しのだ屋のこだわり</p>
<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>
<p>贈り物にも喜ばれます</p>
<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>
<p>伝統と旬の融合</p>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>[/html] これがブラウザでは以下のような表示になります。


しのだ屋のこだわり

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。

贈り物にも喜ばれます

当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。

伝統と旬の融合

江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。


見出しタグを使うと、
[html]<h3>しのだ屋のこだわり</h3>
<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>
<h3>贈り物にも喜ばれます</h3>
<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>
<h3>伝統と旬の融合</h3>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>[/html] このように表示されます。


しのだ屋のこだわり

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。

贈り物にも喜ばれます

当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。

伝統と旬の融合

江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。


とても読みやすい構成になりましたね!

実際にはこの<h3>タグにスタイルを指定しているため、見出しの下に青い下線が入っています。
特にスタイルを指定してない状態であれば、単純に文字が太く大きくなります。

aタグ(リンク)

アンカータグ。
別のファイル(ページ)や同ページ内の違う場所にリンクを貼るために使います。
クリック(スマホの場合はタップ)すると、指定したURLに移動します。

[html]<a href=“◯◯◯”>ここをクリックしてください</a>[/html] この「◯◯◯」の部分に、移動先のURLを入れます。
例えば
[html]<a href=“https://oizo.jp/sample/osusume.html”>ここをクリックしてください</a>[/html] このように書くと、実際には以下のように表示されますので、試しにクリックしてみてください。
ここをクリックしてください

ちなみに「osusume.html」のソースは以下になります。
[html]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>しのだ屋のおすすめ商品</title>
<meta name="description" content="小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?">
<meta name="keywords" content="和菓子,芋,まんじゅう,お土産">
</head>
<body>
<h1>名物「芋まんじゅう」</h1>
<p>小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?</p>
<p>容量:12個入り</p>
<p>販売価格:2,000円</p>
<p><a href=“https://oizo.jp/sample/index.html”>最初のページに戻る</a></p>
</body>
</html>[/html]

imgタグ(画像)

image(イメージ)の略で、画像を表示するためのタグです。

[html]<img src=“◯◯◯” />[/html] この「◯◯◯」の部分に、表示する画像のURLを入れます。

今回は「manju.jpg」という芋まんじゅうの画像を表示してみます。
[html]<img src=“https://oizo.jp/sample/images/manju.jpg” />[/html] これを、
先ほどの「osusume.html」という「しのだ屋のおすすめ商品」ページに入れてみましょう。

[html]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>しのだ屋のおすすめ商品</title>
<meta name="description" content="小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?">
<meta name="keywords" content="和菓子,芋,まんじゅう,お土産">
</head>
<body>
<h1>名物「芋まんじゅう」</h1>
<p>小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?</p>
<img src="https://oizo.jp/sample/images/manju.jpg" />
<p>容量:12個入り</p>
<p>販売価格:2,000円</p>
<p><a href="https://oizo.jp/sample/index.html">最初のページに戻る</a></p>
</body>
</html>[/html] 12行目に入れてみました。
これをブラウザで表示すると、以下のようになります。


名物「芋まんじゅう」

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

容量:12個入り

販売価格:2,000円

最初のページに戻る


FTPやCSSも今後覚えましょう

いかがでしたでしょうか?
今回はHTMLの必須なタグ4つを紹介しました。
これで「見出し」「段落」「アンカー(リンク)」「画像」を表示できるようになりましたので、見栄えはさておきこれだけでしっかりとした構成のHTML文書になります。

ただ、ここまでの説明だけでは実際に同じような形で表示することができません。
例えば

  • index.html
  • osusume.html
  • manju.jpg

この3つのファイルを、一体どうやってウェブ上に公開すればいいのかという説明をまだできてません。

例えば芋まんじゅうの画像は、
[html]<img src=“https://oizo.jp/sample/images/manju.jpg” />[/html] 上記のようなURLの場所にあるわけですが、ではこの場所にどうやって画像をアップロードすればいいのでしょうか?
それは「初めてのホームページ作りに必要な知識:HTMLとは?」でも軽く触れましたが、FTPという通信を行なう必要があり、そのためにFTPソフトを使ってローカル(自分のパソコン)からサーバにそれらのファイルをアップロードすることで初めてウェブに公開されます。

その仕組みや方法はまた別の機会に説明するとして、まずは今回紹介したHTMLの基礎的なタグをしっかりと覚えてましょう!
また、今の段階ではとてもシンプルなページですが、CSSというスタイルを指定するための言語によってレイアウトを整えたり、文字や背景に色を付けたり、余白や行間を調整したりできますので、このあたりのことも今後じっくり説明していきたいと思います。

次ページ⇒知ってると便利なHTMLタグ厳選13個(簡単な例文付き)

0
に投稿 2件のコメント

HTMLタグの種類を覚えよう~ヘッダ情報

HTMLタグの種類を覚えよう~ヘッダ情報

タイトルや紹介文などを記述します

こんにちは、ホームページ制作のオイゾウです!
今回はHTML文書内のヘッダと呼ばれる、head要素に記述する内容について説明していきます。

HTML文書の基本構造

上記の画像のhead要素(の部分)は、このHTML文書の様々な定義をブラウザに知らせる役割を持っています。
このhead要素は実際にブラウザに表示されるわけではないのですが、とても重要な項目がいくつも含まれているのでしっかり覚えましょう!

今回はそのhead要素の中に記述する要素のうち、
[html]<meta charset="◯◯◯◯◯◯">
<title>◯◯◯◯◯◯</title>
<meta name="description" content="◯◯◯◯◯◯">
<meta name="keywords" content="◯◯◯◯◯◯">[/html] という4項目について説明します。

まずは「しのだ屋」さんという川越にあるお土産屋さんのホームページを想定し、「◯◯◯◯◯◯」に文字を入れてみると、以下のようになりました。

[html]<meta charset="utf-8">
<title>しのだ屋</title>
<meta name="description" content="しのだ屋のホームページ。">
<meta name="keywords" content="和菓子,老舗,川越,芋">[/html]

いかがでしょうか?
最初の1行以外はなんとなく意味が分かりますでしょうか?
では順に説明します。

<meta charset="utf-8">

文字コード
この文字コードと、その次のタイトルについては、前回「HTMLタグの種類を覚えよう~HTML文書の基本構造」の記事で説明してありますので、詳しくはそちらをご参照ください。
文字コードは「UTF-8」を指定しています。
ポイントとしては、title要素より前に指定する必要がありますので、head要素の最初に書きましょう。

<title>しのだ屋</title>

タイトル
こちらも前回触れていますが、ページのタイトルをここに書きます。
これはhead要素内に1つ、なくてはならないものなので、必ず入れましょう!
通常、ブラウザのタブ部分にこのタイトルが表示されます。

<meta name="description" content="しのだ屋のホームページ。">

メタディスクリプション
メタディスクリプションとは、ページの概要のことです。
この要素と前述のタイトルは、サイトへの訪問者を増やすための効果としてとても重要です。
何故かと言うと、これらはGoogleなど検索エンジンでの検索結果に、タイトルは文字通りサイトのタイトルとして、メタディスクリプションはサイトの紹介文として表示されるからです。

searchresult_detail

ちなみにメタディスクリプションの内容による、Googleでの検索順位への影響はありません。
ではまず、実際にどのように表示されるかを見てみましょう。

[html]<title>しのだ屋</title>
<meta name="description" content="しのだ屋のホームページ。">[/html]

このように記述した場合、Googleの検索結果には以下のように表示されます。

searchresult1

どうでしょう?!
なんかさみしいですよね・・・。

これだと何のお店かまるで伝わりませんし、とてもクリックしようとは思えませんね。
まずタイトルについて、お店の名前をそのままタイトルにすること自体は正しいですが、もう少し具体的に書いた方が良いです。
それからメタディスクリプションですが、これでは何のお店かすら分かりません。
しのだ屋の特徴は「小江戸」「川越」にある、「芋」の「まんじゅう」などを販売する「蔵づくり」の「老舗」「和菓子屋さん」ですから、これらのキーワードを盛り込むことで「どんなお店か」を明確にするべきです。
タイトル、メタディスクリプションともに、もっと文字数を増やす必要があることまではご理解頂けるかと思いますが、では文字数が多ければ多いほどいいかというとそういうわけではありません。

タイトル

  • 30文字前後

メタディスクリプション

  • 124文字(PC)
  • 50文字前後(スマホ)

これはGoogleの検索結果に表示される文字数です。
これ以上の文字数になった場合、当然のことながらオーバーした分はカットされます。
そして単純に文字数以内に納めれば何でもいいわけではなく、要点を「簡潔」に「分かりやすく」まとめてある紹介文が望ましいので、余計な単語を無理やり含ませてメタディスクリプションを124文字いっぱいにするよりは、狙いたいキーワードを的確にかつ絞って含ませつつ、読みやすい文章を心がけましょう。
またスマホではさらに文字数が短くなるため、オーバーした分はそのままカットされます。
スマホからのアクセスも重視するのであれば、50〜60文字程度が理想と言えます。
これらを踏まえて書き直した結果、以下のようになりました。

[html]<title>しのだ屋 | 川越の老舗和菓子屋さん</title>
<meta name="description" content="安政3年創業、蔵づくりが並ぶ小江戸川越の老舗和菓子店。お芋のまんじゅうやお土産などを販売しています。通販も可能。" />[/html]

searchresult2

ちなみにあるユーザーがGoogleで「川越 和菓子」というキーワードで検索したときにそれらのキーワードがメタディスクリプションに含まれている場合は、以下の画像のように太文字になり「そのキーワードが含まれている」と分かりやすく表示してくれます。

searchresult3

このように、タイトルとメタディスクリプションは検索したユーザーにアクセスしてもらうための手段として、どのように書くかということがとても重要です。

<meta name="keywords" content="和菓子,老舗,川越,芋">

キーワード
最後にキーワードですが、これはページ内容を検索エンジン向けに単語で知らせ、SEO対策(内部SEO対策)するという役割があります。
ただし現在はあまり重要ではないと言われていまして、その理由はGoogleがこのメタキーワードをここ何年も無視し、この方針を変えることは今のところないとしているからです。
Google以外にも検索エンジンはありますが、Googleのアルゴリズムを利用しているYahoo! JapanとGoogleで国内での検索シェアが9割以上であることを考えると、ほとんど影響がないと言えるでしょう。
ではキーワードの設定は必要ないかどうかと言えば、ないよりはあった方が良いです。
キーワードがあることによるデメリットはありませんし、今後Googleが方針を変更する可能性もあり、またその他の検索エンジンでは検索順位に影響があるからです。
キーワードはカンマ(,)で区切ります。
あまりたくさん入れすぎるよりも、狙いたいキーワードを厳選した方が効果的です。

SEOとは

キーワードの説明の中で「SEO対策」という言葉が出てきましたので、この「SEO」について簡単に説明したいと思います。

SEO対策とは、YahooやGoogleで検索をしているユーザーに向け、ページを最適化し検索結果で多くを露出することでアクセスを集める一連の流れのことを指します。
引用元:ferret

せっかくホームページがんばって作ったのに、誰も見に来ない!

初めて作ったホームページであればそんなことは当たり前です。
でも作ったからには集客できるようにしたいですよね。
簡単に言えば、そのために行なうのがSEO対策です。
このSEO対策には「外部SEO対策」と「内部SEO対策」があり、それぞれ対策方法が変わります。
内部SEO対策を行なうことによって検索エンジンでの検索順位を上げることが可能になり、検索順位が上がれば上がるほどページヘの訪問数が増えるというわけです。
この内部SEO対策の具体的な方法はいつか詳しくまとめるつもりですが、その重要性はここ数年で特に高まってきていますので、今後もこの「ホームページ講座」の連載中に必要に応じて紹介していきます。

他にもありますが・・・

今回はhead要素に入れる内容を紹介しました。
他にもスタイルを指定するCSSへのリンクやスクリプト言語のJava Scriptを使うときの記述などもこのhead要素に記述しますが、それはまた違う機会(CSSの説明をするときなど)に詳しく触れたいと思います。
次回はいよいよHTMLの本題、ページの内容を表示するbody要素について詳しく説明します!

次ページ⇒HTMLタグの種類~使用頻度の高い必須のタグ4つ

0
に投稿 1件のコメント

HTMLタグの種類を覚えよう~HTML文書の基本構造

HTMLタグの種類を覚えよう~HTML文書の基本構造

まずは基本的な構造から

こんにちは、ホームページ制作のオイゾウです!
前回「初めてのホームページ作りに必要な知識:HTMLとは?」では、ホームページがHTMLという言語によって構成されていることを説明しましたが、ここからはそのHTMLについて具体的に、何回かに分けて詳しく解説していきます!

まずは以下の画像で構造を確認してみてください。

HTML文書の基本構造

HMTLは主に

  • DOCTYPE宣言
  • html要素


という2つの要素があり(赤色の枠)、さらにhtml要素の中には

  • head要素
  • body要素


という2つの要素があります(茶色の枠)。
では、以下のとてもシンプルなHTML文書をさらっと読んでみましょう。

[html]<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>しのだ屋</title>
</head>
<body>
<h1>しのだ屋</h1>
<p>しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。川越に来た際には是非立ち寄ってください。</p>
</body>
</html>[/html]

上記のHTML文書は実際にはこのように表示されます(クリックで表示)

DOCTYPE宣言

<!DOCTYPE html>は「HTML5で記述します」という意味で、つまりHTML文書のバージョンをここで最初に宣言しています。
「DOCTYPE」は大文字で「html」は小文字で書くようにしましょう。

html要素

<html>〜</html>
HTML文書は、必ずこのhtml要素が1つあり、かつ1つのHTML文書に複数のhtml要素は使えません。
そしてこのhtml要素は、1つのhead要素と1つのbody要素によって構成され、順番は必ずhead要素→body要素でなければなりません。
head要素とbody要素にはそれぞれ違った役割があります。

head要素

<head>〜</head>
人間でいう「頭」の部分。
この文書がどういったものかをブラウザに知らせる役割を持ちます。
今回のHTML例文ではhead要素内に<meta charset=“UTF-8”>(文字コード)と<title>しのだ屋</title>(タイトル)という2つの要素が入っていますが、文字コードやタイトル以外にも使用しているスタイルシート、このページの説明、作成者など様々な情報をここで記述します。

<meta charset=“UTF-8”>

metaとはメタ情報のことで、文字コードや文書の著者、キーワード、概要などを指定できます。
charsetとはキャラクター(文字)セット=文字集合を表していて、ここでは「UTF-8」という文字コードを使用していることを指します。
UTF-8以外にもShift-JISやEUCなどいろいろあります。
metaとcharsetの間は半角スペースを空け、UTF-8は前後をダブルクォーテーションで囲みます。

<title>しのだ屋</title>

このHTML文書のタイトルが「しのだ屋」であると記述しています。
通常は企業名や店舗名、サービス名などをここに書きます。

body要素

<body>〜</body>
人間でいう「体」の部分。
ここに記述した内容がブラウザに表示されます。

[html]<h1>しのだ屋</h1>
<p>しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。川越に来た際には是非立ち寄ってください。</p>[/html]

次回以降でheadとbodyを詳しく解説!

ホームページはこのようなHTMLの記述によって表示されます。
今回説明した内容は基本構造ですので、具体的なホームページの中身は今後説明していくhead要素やbody要素にどう記述していくかで大きく変わってきます。
ちょっと難しいかもしれませんが、ホームページ初心者の方にとってこの基本構造は「こんな感じになってるんだ」と何となく覚えておいてもらえれば今はそれでOKです。
次回以降で、head要素やbody要素の中に記述していくタグについてを詳しく説明していきます!

次ページ⇒HTMLタグの種類を覚えよう~ヘッダ情報

0
に投稿 コメントを残す

ホームページ作成の基礎・HTMLの構造とタグ

ホームページ作成の基礎・HTMLの構造とタグ

基本が分かればHTMLは怖くない!

こんにちは、ホームページ制作のオイゾウです!
この連載では「ホームページを作りたいけど、全く知識がない」という方を対象に書いていますが、前回「初めてのホームページ作りに必要な知識:HTMLとは?」ではHTMLについての概要を説明し、その中でホームページ作成に欠かせないCSSやFTPについても少し触れました。

全く知識がないけど、本当にホームページが作れるの?

答えはYesでもありNoでもあります。
作れなくはないですが、そのホームページが何かしらの目的を持っているのであれば(お店や会社の宣伝など)、まずはHTMLについての理解が必要になってきます。
そこで今回は、最低限覚えて頂きたいHTMLの基本構造や、よく使うタグを4回に渡ってまとめましたので、是非これを読んでしっかりとHTMLの基礎をマスターしてください!

0
に投稿 3件のコメント

初めてのホームページ作りに必要な知識:HTMLとは?

初めてのホームページ作りに必要な知識:HTMLとは?

HTMLの基礎を身につけよう

こんにちは、ホームページ制作のオイゾウです!
今回は、ホームページを作る上で知識として身につけてなければならない「HTML」(エイチティーエムエル)について解説をします。

オイゾウ
HTMLという言葉を聞いたことがありますか?
篠田さん
ない。
ジョージさん
聞いたことはあるけど、意味は知らない。
オイゾウ
HTMLは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、ウィキペディアによると「ウェブ上の文書を記述するためのマークアップ言語である」。
篠田さん
訳が分からないよ。
オイゾウ
分かりました、では「篠田さんの土産物屋をホームページで宣伝する」という前提で説明します。
篠田さん、お店の名前と紹介文を書いてみてもらえますか?
篠田さん
こんな感じでどうかな?

しのだ屋

しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。川越に来た際には是非立ち寄ってください。

オイゾウ
ありがとうございます。
とても簡潔で分かりやすい紹介文ですね!
ではこれをウェブで見れるようにするために、最低限いくつかやらなければいけないことがあるので、それを順に説明しますね。

1. HTMLファイルで記述する

HTMLファイルとはファイル形式の1つで、拡張子は.htmlまたは.htmになります。
拡張子については「拡張子(かくちょうし)を理解してパソコン初心者を卒業!」にてご確認ください。

オイゾウ
このHTMLファイルを、Windowsならメモ帳で、Macならテキストエディットで作ってみましょう!
篠田さんはMacbookを購入したということですので、Macのテキストエディットで先ほどの文章を入力し、拡張子を「.html」にして「index.html」というファイル名で保存してみてください。
このファイルを開くと、先ほど篠田さんが書いた文章がブラウザで見れるかと思います。
試しに以下の「index.html」というアイコンをクリックしてみてください。

fileicon_index

篠田さん
ほー。
感動だな~。
ジョージさん
意外と簡単だね。

2. CSSファイルで装飾する

CSSとはCascading Style Sheets(カスケーディングスタイルシート)の略で、HTMLファイルなどのスタイルを指定するための言語です。

オイゾウ
CSSファイルにスタイルを記述することによって、例えば背景の色を変えたり、背景に画像を配置したり、文字の色を変えたり、大きくしたり、余白や行間を調節したり、いろいろできるんです!
ジョージさん
そうするとさっきのシンプルな表示をもっと凝った感じにできるってこと?
オイゾウ
そういうことです、ちなみにHTMLファイルに直接スタイルを指定する記述もできますが、一般的にはスタイルの指定はCSSファイルで記述します。
その理由や、CSSについての詳しいことはまた別の機会に詳しく説明しますね。
本日のお題はHTMLですので!
篠田さん
要するに、デザインにこだわらなければこれでもうOKってこと?
オイゾウ
これでまだ終わりではありません。
今の段階ではローカル(自分のパソコン)にこのファイルがあるというだけで、ウェブに公開されたわけではないのです。
つまり、この時点で見ることができるのは篠田さんのパソコンだけです。
これでは公開したと言えませんし、誰にも見てもらえません。
ジョージさん
ってことは、これを公開するために何かしなければいけないってこと?
オイゾウ
はいその通りです!
このファイルを、サーバにアップロードする必要があります。
アップロードは自分のパソコンからサーバなどにデータを渡すことで、対義語のダウンロードは逆にデータを受け取ることです。

3. FTPソフトでサーバにアップロードする

FTPはFile Transfer Protocol(ファイルトランスファープロトコル)の略で、2台のコンピューター間(この場合は自分のパソコンとサーバ)でデータを送受信するための、通信上の約束事です。
このソフトを使うことで、サーバに先ほどの「index.html」というファイルをはじめ、様々なファイルやフォルダ(ディレクトリ)をアップロードすることができます。

ジョージさん
アップロードとダウンロードの意味は分かるけど、特別な方法とかがあるの?
オイゾウ
あります。
自分のパソコンとサーバとのデータのやり取りは、FTPソフトを使います。
FTPソフトの使い方についてはまた別の機会に説明するとして・・・。
サーバに先ほどのHTMLファイルをアップロードすれば、篠田さんのお店「しのだ屋」の情報が全世界に発信されるというわけです!
篠田さん
何となく分かってきた。
でもさっきのファイルだと、ただのワープロ文章みたいでホームページっぽくないよね。
俺が思うには、最初に店のロゴがあって、その下には写真や文章が載ってたりして、クリックしたら違うページに変わってとか、そういうのがホームページって印象なんだけど。
オイゾウ
分かりました。
では、HTMLファイルの記述にはルールがありますので、それを説明したいと思います。
まずはこちらをご覧ください。
[html]<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>しのだ屋</title>
</head>
<body>
<h1>しのだ屋</h1>
<p>しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。川越に来た際には是非立ち寄ってください。</p>
</body>
</html>[/html]
ジョージさん
何のことだか、さっぱり・・・。
オイゾウ
「<」で始まり「>」で終わり、中には英語で「head」とか「body」とかありますが、これらを「タグ」と呼びます。
そしてこのタグには基本的に「開始タグ」と「終了タグ」があります。
その開始タグから終了タグまでを「要素」と呼びます。
図で説明すると以下のようになります。

HTMLの要素とタグの説明

篠田さん
急に話が難しくなってきたぞ。
この辺で諦めておこうかな・・・。
オイゾウ
篠田さん、諦めるのが早いです(笑)。
もう少しがんばって覚えてください!
HTMLは慣れればそんなに難しくありませんから大丈夫ですよ~。
ちなみに図の「h1」とはHTMLのタグの一種で、見出しを定義するものです。
見出しのタグはh1以降h2、h3、h4・・・とあり、h1はこれら見出しタグの中で最も高い階層(最も重要な見出し)になります。
ジョージさん
見出しとは?
オイゾウ
新聞や雑誌、もちろんインターネットでもそうですが、小さい文字で書かれた記事には、その記事の内容を一言で説明したような、記事の前に大きくて太い文字で書かれたものがあると思いますが、それが見出しです。
HTMLというのは、このように様々な要素をタグを使うことによって定義することができるんです!
篠田さん
ますます分からないぞ・・・。
オイゾウ
まあ、完璧に覚えなくても大丈夫ですから「HTMLにはHTMLの記述のルールがある」ということを理解してもらえれば、とりあえずはOKですよ。
本文を囲っているpタグは文章の段落を定義しています。
どんなときに使うかというと、主に文章のひとかたまりをp要素として表現したいときに使います。
ジョージさん
これは覚えるのが大変だな~。
このタグっていうのは、何種類くらいあるの?
オイゾウ
増えたり減ったりしますが、確か100種類以上はあります。
ジョージさん
えー、そんなに?
篠田さん
これは俺には覚えるのは無理だな・・・。
そろそろ潮時かな・・・。
オイゾウ
ちょっと待ってください!
まず、全てを覚える必要はありませんので安心してください。
実際に使うのはそれほど多くありません。
ジョージさん
そうは言ってもねぇ・・・。
だいたい出だしから「<!DOCTYPE html>」って、何て書いてあるか分からないし。
ドックタイプ?
しかも「!」ビックリマークは単語の後ろに付けるのが普通なのに、これはなんで前に付いてるのか訳が分からないよ!
オイゾウ
これは「HTMLファイルの出だしに必ず書くもの」というルールだと思ってもらえればOKです。
ちなみに<!DOCTYPE html>は「HTML5(というバージョン)の文書型です」という意味です。
つまり、どのバージョンのHTMLを記述しているかということを文頭で宣言しているのです。
その他についても説明すると、

<html></html>

HTML文書であることを示しています。

<head></head>

この中にヘッダー情報を記述します。
ヘッダー情報に必要な要素はいろいろありますが、前述のHTMLファイルの記述には

[html]<meta charset="UTF-8">
<title>しのだ屋</title>[/html]

このように2行の要素が入っているのが分かるかと思います。

<meta charset="UTF-8">

「文字コード」を指定しています。

<title>しのだ屋</title>

このページのタイトル(ここでは店舗名)を記述しています。

このheadタグは、ブラウザにページの内容を正しく解釈してもらうためにあります。

<body></body>

このタグの中に記述した内容がブラウザに表示されます。

オイゾウ
いかがでしたでしょうか?
何となく分かりましたか?
ジョージさん
よく分からないけど、とりあえずホームページの中身って実際にはこうなってるんだなってことが分かったかな。
篠田さん
やっぱり知っておかないとマズイかな?
できればこういう難しいことはやり過ごしてホームページ作れるようにしたいんだけど。
オイゾウ
結論からすれば、HTMLの知識が全くなくても作れなくはないです。
ただ、今後話すCSSなども含め、これからホームページを作っていく中でこれらの知識がかなり役に立つことは間違いないので、是非前向きにがんばってください!
せっかくなので次回は「よく使うタグ一覧」をまとめてみる予定です!
0
に投稿 コメントを残す

代表的なホームページ作成ソフトの特徴と比較と料金

代表的なホームページ作成ソフトの特徴と比較と料金

初心者〜プロ向けまであります

こんにちは、ホームページ制作のオイゾウです!
前回「初心者向けに厳選! 有料&無料のホームページ作成サービス6つ」ではウェブ上で作成・管理ができるサービスを紹介しましたが、今回はホームページ作成ソフトの代表的なものを3つ紹介します。
それなりの料金がかかりますし、中には専門知識が必要なものもありますが、いずれにしてもこれらのソフトを使いこなしながらホームページを表示するための言語であるHTMLやCSSや、画像の編集方法などを徐々に学んでいってもらえればと思いますので、ご興味ありましたら是非挑戦してみてください!

選ぶときのポイント

画像編集ができる機能がついている

ホームページ作成のソフトやサービスが充実している今の時代に(こだわらなければ)ある程度の見栄えのホームページを作ることができますが、写真や装飾などの画像を作れないことで、デザインが一気に素人っぽくなってしまいがちなので、画像編集ソフトが付いているのはかなりありがたいですね!

専門知識が必要かどうか

ソフトの中にはプロの現場で使われるものも当然ありますが、使いこなせるようになるまでにはかなりの時間がかかりますので、初心者の方は直観的に操作できるタイプを選びましょう。

使っている人が多いソフトを選ぼう

シェアの高いソフトを使うことによって、作業に行きづまったときにネットで検索して解決したり、ガイド本で調べたりできるというメリットがあります。
値段や雰囲気だけで選んだはいいものの使いこなせず、後で後悔することのないように気をつけましょう!

ホームページビルダー

ホームページに必要なパーツを選んでドラッグ&ドロップするだけ、直感的な操作が可能なので初心者でも問題なく使いこなせます。
フォトレタッチソフトが搭載されていて、写真の色調などを簡単に補正することができます。
ホームページ・ビルダー20

  • 初心者向け
  • 画像編集の機能が充実
  • テンプレートは307種類、写真素材は100種類
  • 自動バックアップ機能
  • ブログ機能
  • サポート:電話・メール
  • 対応OS:Windows

購入価格

ホームページビルダー
スタンダード
通常版
ダウンロード版
11,800円

専門書の紹介


最新バージョンである20対応の解説書。
無料電話サポート付きというのは、初心者にとってかなりうれしいです!
レビューも概ね高評価。

ホームページ V3

ホームページビルダー同様、専門知識がなくても簡単な操作で作成できるソフト。
テンプレートをはじめホームページに必要となるボタンなどの素材が豊富にあるので、ほとんどデザインいらずで作れてしまいます。
またロゴやボタンを作成できたり、写真を編集する機能が搭載されているので、まさに初心者向けのソフトと言えるでしょう。
比較的安価なのも魅力です!
ホームページ V3

  • 初心者向け
  • 画像編集の機能が充実
  • テンプレートが約400点、画像が約9,900点と充実
  • Twitterをページ上に表示
  • アフィリエイトも簡単
  • 対応OS:Windows

購入価格

ソースネクスト
ホームページ V3
ダウンロード版
4,480円

Dreamweaver

ウェブの制作現場でも多く使われているプロ仕様のDreamweaver(ドリームウィーバー)。
HTMLやCSSなどのコードが書けなくても使えなくはないですが、ソースに手を加えながら編集するような設計になっているため、ある程度の知識がないと使いこなすのは難しく、個人的にはおすすめしません。
HTMLやCSSを記述できて、かつ互換性が高い同じAdobe(アドビ)社のソフトであるPhotoshopなどと併用をするような人にとってはベストな選択の1つです。
値段は高いですが、その分素晴らしい機能がたくさんありますので、デザインにとことんこだわたたホームページを作りたい方や、ウェブ制作で仕事をしている方、またはこれから仕事をしていきたいという方に向いているソフトです。
Dreamweaver

  • 中〜上級者向け
  • HTMLとCSSの知識が必須
  • 高いレベルのレイアウトを直観的に作成できる
  • 同じAdobe社のPhotoshopなどとの連携
  • Bootstrapでレスポンシブデザイン作成
  • サポート:電話・メール
  • 対応OS:Windows、Mac

購入価格

Adobe
Dreamweaver CC
月額2,180円
Dreamweaverの購入はこちら

専門書の紹介


入門編。
最新バージョンのCC2015対応。
レスポンシブデザインにも触れています。


基礎から実践〜応用までステップアップしながら学んでいけます。


まったくの初心者や、これからDreamweaverを使う方におすすめ!

いかがでしたでしょうか?
これは約20年ほど前の個人的な経験の話ですが、当時学生生活と並行して衣料の通信販売をやっていました。
そのときにカタログ的なホームページがあったらいいなと思って、ホームページを作ったのが、ウェブの仕事をする最初のきっかけでした。
手始めにとりあえずホームページビルダーを買っていろいろと操作してみたものの「HTMLやCSSの知識や画像の編集、ロゴやボタンの作成などを自分でできるようにならないと、結局はまともなホームページにならない!」と思い、いろいろとやり方を独学で覚えていくうちに、結局はソフトを使わなくなっていったのです。
もし趣味で活動しているものであればソフトでできる範囲で満足していたかもしれませんが、ビジネスとなるとこだわらなければならないことがたくさんあり、そうなると自分でコーディングした方が手っ取り早くなっていきました。
その分作業的に大変ではありましたが、もしこだわってなければ今はウェブ関連の仕事をしてないかもしれません。
きっかけはこういったソフトからでいいと思うのですが、突きつめると「ホームページで何をしたいか」というゴールによって手段が変わってくるということです。
趣味の範囲内であればできる限り手軽に作れる方法が理想ですが、何かしらビジネス的にかかわってくる場合には、ちょっと遠回りしてでもがんばって知識や経験を積んでいくか、もしくは専門の業者に依頼するなり、スクールなどに通って教えてもらうという選択肢もありますので、どのような手段でホームページを作っていくべきかということを、様々な選択肢からよーく検討して選びましょう!

0
に投稿 コメントを残す

無料ブログサービスとCMSを使ったブログ、どっちが良い?

無料ブログサービスとCMSを使ったブログ、どっちが良い?

ブログを始める前に

こんにちは、ホームページ制作のオイゾウです!
私はホームページの制作業者として日々様々な企業様や店舗様とお仕事させて頂いておりますが、この数年で特に実感していることがあります。
それは、これまでは企業にとってホームページとは、一言で言うと多くの場合、ハローページのように企業の情報をウェブ上に置いておくだけで良かったのが、これからは企業の特徴や強み、サービスへの思いなどを日常的に積極的に発信していく必要があるということです。
クライアントの社長様や担当者様とお付き合いさせて頂いている中で、皆様一様に、自社の商品やサービスに対する熱い思いがあるにもかかわらず、それをアウトプットすることにとても苦労されていらっしゃいます。
それをいかにクリアし、ホームページへのアクセスと売上増につなげていけるかということについてお話していきたいと思います。

現在はFacebookやTwitterなど様々なSNSのサービスが増えてきている中、何から手をつけていけばいいのか困ってしまいますよね。
もしまだ具体的にどんな形で情報発信していきたいかが決まってなければ、数ある選択肢の中で、何よりもまずブログを始めることをおすすめします。
ですがそのブログにも様々な種類がありますので、今回はそれらの違いを説明していきます。

メジャーなブログサービスか、自力でブログを作るか

最初にブログを立ち上げる方法として、以下の2種類に大別できます。

無料ブログサービスを利用する

代表的なサービス:FC2ブログ、アメーバブログ(アメブロ)、ライブドアブログ、シーサーブログ、はてなブログなど
メリット:誰でも簡単に立ち上げられる、コストをかけずに運用できる、最初からアクセスを稼ぎやすい
デメリット:一部機能が有料、カスタマイズ(*1)の制限がある、広告表示がある、突然アカウントを凍結されることがある、商用利用(アフィリエイト広告(*2)など)に向いてない

CMSでブログサイトを自作する

代表的なCMS(*3)WordPress(ワードプレス)、Movable Type(ムーバブルタイプ)など
メリット:知識がある(もしくはプロに依頼する)ならかなり自由にサイトのカスタマイズが可能、自分のサイトなので干渉されない、商用利用(アフィリエイト広告など)に向いている
デメリット:ランニングコスト(ドメイン(*4)+レンタルサーバ(*5))がかかる、カスタマイズにある程度の知識(HTML(*6)やCSS(*7)など)が必要、立ち上げ当初はアクセス数が少ない

それぞれ一長一短ですので、お好みで選んでください!
無料ブログサービスはTwitterなどのSNS同様、比較的簡単に始めることができますので、「よく分からないけどとりあえず軽い気持ちで始めてみよう」という方に向いています。
また、CMSを使って自分でオリジナルのブログを立ち上げる場合、サーバやドメインの契約をしたり、サーバにCMSをインストールしたり、サイトのデザインをカスタマイズしたりという作業が必要になりますが、全く知識がなくてもがんばればどうにかなりますので、そういうことも含めて楽しめる方にはおすすめです。

専門用語の解説

ただちょっと普段聞き慣れないような用語がたくさん出てきてしまいましたので、ここからは用語の説明をしていきます。
実際にブログを始めるにあたっての具体的な方法などはまた書きますので、まずは必要最低限の言葉を覚えてくださいね!

カスタマイズ

意味は文字通り「カスタム」することですが、無料ブログサービスの場合はいくつかあるテンプレートの中から選ぶようなパターンが多く、また表示内容についても細かく設定することができません。
「純粋にブログの内容で勝負したいから、レイアウトとかデザインはどうでもいい!」という方は気にする必要はありません。

アフィリエイト広告

自分のブログに広告を貼ることによって、その成果によって(ブログ経由で商品が売れるなど)ブログ主に報酬が入ります。
代表的なASP(アフィリエイトサービスプロバイダ)はA8.net(エーハチ)、バリューコマース、Amazonアソシエイトなどがあります。
アフィリエイト広告とは別に、Google Adsense(グーグルアドセンス)に代表されるPPC(クリック報酬型)広告というものもあります。




↑ちなみにこれはA8.netを利用した広告です。
これをどなたかがクリックして、リンク先ページにて成約された場合、A8.netからこのサイトを運営しているオイゾウに成功報酬が入るという仕組みです。
A8.net

CMS

コンテンツマネジメントシステムの略。
ちょっと分かりづらいと思いますが、簡単に説明すると、ホームページを構築する上で必要となる様々な専門知識がなくても、CMSを利用することで作れるようになります。
ただしユーザビリティが高く、レイアウトやデザインにもこだわったホームページを作るためには、やはりある程度の知識が必要です。

ドメイン

「◯◯.com」や「◯◯.co.jp」これらをドメインと呼びます。
ちなみにこのサイトのドメインは「oizo.jp」です。
家や会社、お店にも住所があるように、インターネット上にも住所があります。
ホームページは必ずどこかのコンピュータ(サーバ)に存在しますが、その場所を特定するのがIPアドレスと呼ばれるものです。
このIPアドレスは例えば「111.11.111.11」のように、0〜255の数字を4つ並べる形で割り当てられます。
そしてこのIPアドレスを分かりやすくするためにドメインがあります。
このドメイン、他に使用している人がいなければ自分の好きな名前で取得することができ、これを「独自ドメイン」と呼びます。
ドメインの権利を保有するためには毎年料金がかかり、だいたい500〜4,000円と、ドメインの種類によって値段が変わります。



レンタルサーバ

ドメインが住所、ホームページが家に当たるのに対し、土地に当たるのがサーバです。
ブログやホームページを独自ドメインで始めようとするなら、このサーバを自前で用意するか、もしくはレンタルサーバのサービスを利用する方法があります。
ご自身でサーバの環境を構築するのはかなりの知識が必要となりますので、月額300〜1,000円で利用できるレンタルサーバを使いましょう。



HTML

ハイパーテキストマークアップランゲージの略で、ホームページを作るために必要な言語のことです。

川越まつりの写真
例えば↑この画像ですが、実際には以下のようなコードになっています。

[html]<img src="https://oizo.jp/wp-content/uploads/matsuri.jpg" alt="川越まつりの写真" />[/html]

このページがどのようなHTMLのコードで記述されているのか、もしご興味があればご覧になってみてください!

パソコンのブラウザがChrome(クローム)の場合:表示→開発/管理→ソースを表示
パソコンのブラウザがFirefox(ファイヤーフォックス)の場合:ツール→Web開発→ページのソース
iPhoneの場合:「Source Viewer」というアプリを使う(有料:120円)

CSS

カスケーディングスタイルシートの略で、ホームページやブログで表示するスタイルを指定するための言語です。
CSSによって、文字の色や大きさ、書体、行間の幅、背景の色、画像の配置方法、その他レイアウトに関する細かい調整が可能になります。
ホームページを作成していく上で、このCSSとHTMLの知識はかなり重要になってきますので、是非がんばって覚えましょう!

0
に投稿 3件のコメント

パソコン初心者が最初に覚えるべき、基本のファイル形式

パソコン初心者が最初に覚えるべき、基本のファイル形式

重要なものをピックアップしました

こんにちは、ホームページ制作のオイゾウです!
前回の「JPEGだけじゃない!画像のファイル形式いろいろ」ではファイルの種類の中でも画像に関するものに限定して紹介しましたが、今回は画像以外で知っておきたいファイル形式をピックアップしました。
パソコンでどのような作業を行なうかによって必要になるファイル形式は変わってきますが、ここでは読んでくださっている方が「いずれホームページを自分で作るようになる」「最低限の事務処理は自分でやる」このような前提をもとに、基本的なものだけを厳選して紹介したいと思います!

.docx

マイクロソフト社のオフィスソフト「Word」(ワード)のファイル。
ワードは最も普及している文書作成(ワープロ)ソフトで、OSのWindowsと同じ会社ではありますが、Mac用のソフトもあり、OS関係なく使われています。
このソフトを使うことで、文書ベースの書類はほぼカバーできます。
文書以外にもハガキの宛名印刷やラベル印刷としてもよく使われています。

.xlsx

ワードと同じマイクロソフト社のオフィスソフト「EXCEL」(エクセル)のファイル、こちらもワード同様に有名ですよね。
主にデータを入力して、そのデータを集計したり分析したりできる表計算ソフトなのが、このエクセルです。
見積書や請求書などの文書として使えば便利ですし、それ以外にも住所録などデータをまとめるのにも最適。
このような一般的な操作方法の他にも、マクロ言語を搭載しているのでプログラムを組むこともできます。
ホームページを作る上で必ずしもオフィス系のソフトは必要ありませんが、パソコンを使うならワードとエクセルは使えた方がとても便利です。
ただMacでもWindowsでも基本的には別途ソフトを購入しなければなりません。

.mp3

とてもよく使われている音楽ファイルです。
音楽ファイルにもいろいろ種類があり、その中でもこのMP3は高い圧縮率によって、あまり音質を落とさないままデータのファイルサイズがかなり小さくなっています。
ただし非可逆圧縮のため、一度MP3で圧縮したファイルは元に戻せません。

.pdf

PDFはワードと同じく文書作成・閲覧ソフトです。
ワードと大きく違う点は、文書を作成したり編集することよりも、内容を変えない状態で閲覧するのにとても便利であるということが挙げられます。
また、ワードやエクセルは有料のソフトを購入してパソコンにインストールしなければ作成・編集だけでなく閲覧もできませんが(補足:実際にはスマートフォンなどで閲覧のみ可能です)、PDFはWindowsでもMacでも標準で付いているソフトで閲覧が可能です。

.html

HMTLはハイパーテキストマークアップランゲージの略で、ウェブページを作成するための言語ファイルです。
インターネットで見る様々なページは主にこのHTMLファイルになります。
このHTMLに関連してCSS(拡張子は.css)という言語ファイルがありますが、これはHTMLなどの文書スタイルを指定するもので、例えば文字の色や大きさ、文書や画像などの配置をこのCSSによってレイアウトすることが可能になります。
ホームページを作る上でこのHTMLとCSSの知識は必須となりますので、是非覚えましょう!

.zip

ZIPファイルは「ジップ」と読みます。
いくつかあるファイル圧縮形式の1つで、他にもSITやLZHなどありますが、このZIPが現在はもっとも普及しています。
複数のファイルを1つのフォルダにまとめ、そのフォルダを圧縮することで、このフォルダが1つのファイルになります。
そしてその圧縮されたファイルを元に戻したいときは、それを解凍すれば1つのフォルダに複数のファイルが入った状態に戻すことができます。
この「圧縮」と「解凍」は様々な場面で今後使うことになりますのぜ、是非覚えてくださいね。
以前は圧縮・解凍ともに専用のソフトをパソコンにインストールして使っていましたが、現在はどのパソコンでもソフトが入っていますので、圧縮・解凍ともにとても簡単に行なえます。
Macの場合、右クリック→"◯◯◯◯"を圧縮、これだけで圧縮できますし、解凍したいときは圧縮ファイルをダブルクリックするだけでOKです。

他によく使うファイル形式

他にももちろんたくさんの種類のファイル形式があります。
ちなみにホームページを制作したり、その他ウェブ関係のサービスの業務を日々行なっている私がよく使っているファイルを思いつくものだけ挙げると、

.rtf

テキストファイル。
Macに標準で付いているメモ帳のようなアプリケーション「テキストエディット」などで利用しています。

.psd

Adobe(アドビ)社のPhotoshop(フォトショップ)という画像加工のアプリケーションで使う画像ファイル形式。
バナー広告の作成や写真画像の編集は、このPSDファイルで行なっています。
個人的に、Photoshopは数あるアプリケーションの中でも最も使用頻度が高いです。

.ai

PSDと同じくAdobe社のIllustratorで作成・編集した画像ファイル形式。
ロゴやアイコンなどの素材はこのAIファイルで作成し、画像ファイル形式の1つであるPNGファイルなどで保存して使っています。
また、企業案内のパンフレットやチラシ、名刺などの印刷物もこのAI(もしくはEPSファイル)でレイアウトを組み、印刷業者さんに入稿します。

.wav

音声ファイルの1つで、個人的に趣味で聞く音楽は圧縮ファイルであるMP3が多いですが、販売用の音楽CDに使う音源はこのWAVファイルをマスターデータとしてCDプレス業者さんに納品しています。

.ppt

ワードやエクセルと同じくマイクロソフト社のオフィスソフトの1つPowerPoint(パワーポイント)のファイル形式。
このパワーポイントは企画書やプレゼン資料の定番アプリケーションです。

.app

アプリケーションを実行するファイル形式。
Windowsの場合は.exeですが、Macの場合は.appになります。

.mov

いろいろとある動画のファイル形式の1つ。
主に動画の再生をするためのQuickTime Player(クイックタイムプレーヤー)で再生できる動画ファイルですが、歌手のプロモーションビデオやその他様々な映像をYouTubeをはじめとするウェブで公開する際には、このMOV形式にすることが多いです。

いかがでしたでしょうか?
このように、パソコンが1台あれば専門的な知識がそれほどなくても実に様々なことができるようになるんです。
最近はスマートフォンの普及によって若い世代でパソコンが必要なくなっているみたいですが、技術の進化とともにパソコンとスマートフォンとの境目がどんどんなくなってきているとは言え、やはりパソコンじゃないとできないこともたくさんありますので、是非スマートフォンで満足せず、パソコンをフル活用していろんなファイル形式に触れてください!

次ページ⇒ブラインドタッチができれば文章を書くのが楽しくなる!

0