HTML+CSS をざっくり簡単に解説

簡単にサクッと理解して、仕事や趣味に生かしたい方へHTMLとCSSの基礎的を簡単に解説します。
ソースコードの全体の流れを覚えて、簡単なタグを理解すれば、更新するポイントが直ぐに見つかって、簡単に更新する事が出来ると思います。

更新したい「ファイル名.html」をDreamweaverなどの専用ソフトや、「メモ帳」で開いて編集していきます。

表示されている情報は
<BODY>**</ BODY>の中に大抵ある

<!doctype html>
<html lang="ja">
<head>
 <title>ホームページのタイトル</title>
 <script type="text/javascript">
  ・・・・・ややこしいプログラムがここに書いてある
 </script>
</head>
<body>
 ・・・・・ここに表示されている内容が大抵書いてあります←ここね
</body>
</html>

html上で、書き直したい文章の一部を「検索」して、見つかったら書き換えて「上書き保存」しましょう。
不安な場合は「ファイル名を変えて保存」でも良いです。
書き直したい文章が見つからない時は、画像の中に文字がある可能性が高いです。

とりあえず基本系

<BODY>で使う代表的なタグ

ホームページは文章と画像の集合体です。もともと文章を分かりやすくするために開発されたプログラムの為、見出しと文章、段落、改行、挿絵など、本の構成みたいな感じと思えば理解しやすいかもしれません。

h1 大見出し
<h1>ホームページを無料で更新する方法</h1>

h2 中見出し
<h2>誰でも出来そうと思っても、なかなか出来ない事もあるから得意な人に任せる方が簡単だよね</h2>

p 段落文章 br 改行
<p>なんていうか、このホームページって誰の為に作っているのかって、そういわれると分からない気もするんだけど、まあ少しでも参考にしてもらえる人が居たりして。<br/>ちょこっとgoogleの広告を表示させて頂ければ、もしかしてお小遣いになったりするんじゃないかと、そういう悪い事ばかり考えていると悪い人間になっちゃうのかな。</p>

img 画像表示
<img src="画像ファイルの場所と名前を入れる.jpg.pngなど" width="画像の表示幅を%やpixcelで" alt="画像を説明する文章とかを入れるalt" />

▼これをGoogle Chromeなどのプラウザーで表示させると

ホームページを無料で更新する方法

誰でも出来そうと思っても、なかなか出来ない事もあるから得意な人に任せる方が簡単だよね

なんていうか、このホームページって誰の為に作っているのかって、そういわれると分からない気もするんだけど、まあ少しでも参考にしてもらえる人が居たりして。
ちょこっとgoogleの広告を表示させて頂ければ、もしかしてお小遣いになったりするんじゃないかと、そういう悪い事ばかり考えていると悪い人間になっちゃうのかな。

奄美大島に新しく出来たお弁当屋さん

HTML、ザックリ言うとWord文章みたいな感じ

「h1」や「p」タグを使って文章の構造化をするという反面、そんなの関係なく見栄え重視で作るページもあります。最近のトレンドは、トップページは写真やイラスト中心に構成して、下層ページに行けば文章や補足写真などで構成されたページが多くなります。htmlの使うソースやタグは、人によってかなり違いがあって、使い方癖も凄いです。更新しようとして分からないタグがあれば、それをググって覚えていくのが一番近道で、人それぞれのコードのスタイルを覚えながら、慣れれば、誰が作ったページでも更新できるようになります。


CSS を簡単に解説

CSSはhtmlの表示方法を指定する別ファイルです。
最近のhtmlは文書や画像に集中した構成にして、どう表示させるかデザイン部分を「*.css」というファイルで別に保存しています。また、htmlのヘッダーの中にcssを組み込ませたファイルの場合もあります。一般的に、サイト全体を同じデザインで表示させたいので、cssはhtmlと別に保存して、多くのhtmlファイルから同じcssファイルを読み込ませるようになっています。

htmlファイル(サンプル)

<!doctype html>
<html lang="ja">
<head>
 <title>ホームページのタイトル</title>

 <link href="css/md_desktop.css" rel="stylesheet" type="text/css">←ここでCSS読込む
 <script type="text/javascript">
  ・・・・・ややこしいプログラムがここに書いてある
 </script>
</head>
<body>
<h1>ホームページを無料で更新する方法</h1>
<h2>誰でも出来そうと思っても、なかなか出来ない事もあるから得意な人に任せる方が簡単だよね</h2>
<p>なんていうか、このホームページって誰の為に作っているのかって、そういわれると分からない気もするんだけど、まあ少しでも参考にしてもらえる人が居たりして。</p>
<p class="haikeiwokaeru">ちょこっとgoogleの広告を表示させて頂ければ、もしかしてお小遣いになったりするんじゃないかと、そういう悪い事ばかり考えていると悪い人間になっちゃうのかな。</p>
<img src="画像ファイルの場所と名前を入れる.jpg.pngなど" width="画像の表示幅を%やpixcelで" alt="画像を説明する文章とかを入れるalt" />
<h2 id="matome">HTMLにCSSを組み込むと、こんな感じで変わったり、アニメーションさせたり色々面白い事が出来るけど、使いこなすのは結構ムズイ。</h2>
</body>
</html>

md_desktop.cssファイル(例えばイメージ・・・)

@charset "utf-8";  ↓ bodyの表示はだいたいいじる(参考)
body,div,dl,dt,dd,ul,li,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,th,td,address {
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	line-height: 1.7em;
	color: #1A1A1A;
	font-weight: normal;
}
h1 { ←h1の表示方法を変える
	font-size: 40px;
	margin-left: auto;
	margin-right: auto;
}
h2 {
	color: gray; ←文字をグレーにする
	padding-right: 10px;
	padding-left: 10px;
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.haikeiwokaeru{ 「.」が付くと、クラスの指定になる
	text-color: red; ←文字を赤にする
}
img{
	float: right; ←写真を右に寄せる
}
#matome{ 「#」が付くと、IDの指定になる
	background-color: #FCB900; ←#まとめ は背景を黄色にする
}

▼これをGoogle Chromeなどのプラウザーで表示させると(あくまで再現サンプル)

ホームページを無料で更新する方法

 誰でも出来そうと思っても、なかなか出来ない事もあるから得意な人に任せる方が簡単だよね 

なんていうか、このホームページって誰の為に作っているのかって、そういわれると分からない気もするんだけど、まあ少しでも参考にしてもらえる人が居たりして。
ちょこっとgoogleの広告を表示させて頂ければ、もしかしてお小遣いになったりするんじゃないかと、そういう悪い事ばかり考えていると悪い人間になっちゃうのかな。

奄美大島に新しく出来たお弁当屋さん

HTMLにCSSを組み込むと、こんな感じで変わったり、アニメーションさせたり色々面白い事が出来るけど、使いこなすのは結構ムズイ。

あくまで、CSSって何かと理解して頂ければ、そんなに難しく無いので色々試して遊んでみるのが一番だとおもいます。