HTMLとCSSのコーディングをしよう(X169)

★ターゲット:ウェブ制作で生きていきたい人

わははのは。私はコウキ・ハローワーク。私は救いたい!才能があるのにそれを活かせず、殻に閉じこもったままのあなたを!このご時世、ひきこもりのあなたでも、勉強さえすれば手に職つけて活躍できる職業があります。それはズバリ、ウェブ制作!プログラミング!

というわけで、今回は、ウェブ制作で生きていくための初歩編、HTMLとCSSというものの簡単な講座をしたいと思います。

HTMLやCSSはサイトを作るうえで基本となるウェブ言語のことなので、まずはこれから勉強しましょう。ウェブを開発するにあたって、人間の皆さんがインターネットで閲覧できるようにサーバーにアップロードするには、コンピューターに適切に指示を与えなければなりません。それは人の言葉とは若干異なり、英語や記号、数字を主体とした言語になります。例えば…

(1)文字のサイズや太さなどを指定する

●<font size=”〇”>(文章)</font>

これは文字のサイズを指定するコードですな。〇の部分に4とか5の数字を入れると、(文章)の部分に入れた文字のサイズを指定できるというものになります。

●<b>(文章)</b>

これは文字を太字にしたいときに使います。

●(文章1)<br>(文章2)

これを入れると、文章1と文章2を区切って改行ができます!改行は見やすくするために必須ですね!!




(2)文字の色を指定する

文字は黒が基本ですが、背景を黒くして文字を白くしたり、教科書でよく見るように重要なキーワードを赤くするなど、適度に変えれた方が読みやすくなりますよね!ウェブの世界では、文字の色を指定する場合#から始まる、合計7文字で色を指定します。まずコーディングは<font COLOR=”〇”>と書き、〇の部分に色のコードを入れます。例えば…

・#000000=黒

・#ffffff=白

・#ff0000=赤

・#0000ff=青

・#b0ffff=薄い水色

という具合に、無限に近いパターンで細かく指定できます!!

(3)画像を挿入する

文字だけのサイトでは華やかさにに欠けますよね!というわけで、画像を挿入したい!ってなったときに、たいていホームページ作成ソフトではツールがあれば簡単にできちゃいますが、どのようなHTMLコードで構成されているかは知っておいたほうがいいです!ズバリ、下記のようなコードになりまっす!

<img src=”file:///C:/(HTMLファイル名)/(画像の名前)”width”〇”height=”〇”border=”〇”>

これ見てもなんのこっちゃ…て思うかもしれませんが、難しく考える必要はありません。要は、自分が操作してるパソコンのどこからその画像を引っ張ってきたのか、その画像のサイズはどうなのかというのを指定したものです。

上記の場合、「C:」というのはパソコンの中にある「Cドライブ」というハードディスクの中にあることを指します。HTMLファイルは自身のWEBサイトのデータが格納されているファイルのことですね。ファイル名は自分で決めます。画像の名前も自分で決めます。まずはHTMLファイル内に画像を入れておきましょう。

次のwidth、height、borderというのは画像のサイズを指定するもので、引っ張ってきた画像ですから、サイズは最初から決まってます。挿入後サイズを変えることもできます。

・width=横の長さ

・height=縦の長さ

・border=外枠の太さ

になります。borderについては0でも問題ありません。

『これから学ぶHTML/CSS Kindle版』:斎藤新三

ウェブプログラマーによって書かれた、HTMLとCSSの初心者向けの本です!しっかり学びたいなら、本を買ってじっくり学んだ方がよいです。ウェブの仕組みからチャプターごとにテーブル表示タグ、リンクやコンテンツ埋め込みタグなど、詳しく解説していますので是非!全部で448ページあり、Kindle本なのでKindleアプリダウンロードしておけばいつでもどこでも読めます!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です