ブロガーHTML解体新書【HTML独学法】

無料テーマで有料テーマ級のデザインにするには

最低限HTMLとCSSの知識が必要です。

この記事ではブロガーが知っておけば有料テーマを

買う必要がなくなる最低限の知識を完全網羅できます。

また副業として開花させることができれば、

もう一つの副収入を得ることができます。

是非ご覧ください

・HTMLとは:お絵描きです
・ブロガーHTML最低限知識
・普段はこれしか使わない7つのHTML

この記事では完全に無料テーマを推しています。

詳細は下記にて記載しているので、

是非ご覧になってみてください。

また、ブログにて私が使っているPCの

たった4つのショートカットについてはこちらです。

ちょこデニム

ブロガーでも、最低限の知識は

あったほうがライティングを

効率良く進めることができるよ

デニ男

外注すると高いし、

自分でやったほうが手直しができるしな

HTMLとは：お絵描きです
私がブログで使っているHTMLは7つ
まとめ：7つ覚えて1万円分の知識

HTMLとは：お絵描きです

前記事でも書きましたが、HTMLとは

HTMLとは

ネットにインクの代わりに文字を入れているお絵描きです

かっこよくプログラミングと言いますが、

誰でも絶対にできます。

HTMLはプログラミングの骨組みです。

それを他の言語で肉付けしていくのがプログラミングです。

以下の画像のようにブログではただ文字を

打っていたつもりでも、文章の前には<p>と最後に</p>

が隠れています。

その他にも写真の前には<img>や、見出しの前には<h>が

見えない所でくっついています。

このように文字の前に必ず<>のなにかがあるのが

HTMLです。

＜開始宣言のなにか＞内容を書く＜/ここで終わりだよ！宣言＞

これがHTMLの基本の形です。

ここで終わりだよ！の開始合図として/(スラッシュ)マークを

タグの前に付けるのがルールです。

他にも基本のルールがあります。

・入れたい文字の前後に＜＞(例外あり)
・ここでこの文字は終わりますの合図で＜/＞をいれる
・＜＞の中に日本語や大文字を入れない
・スペース(空白)を入れない
・＜＞内は全て半角英数字

ちょこデニム

ここまで覚えれば君も

プログラマーだよ！

デニ男

これしかルールないんだな～

簡単じゃん！！

ちょこ男

ここからいよいよ

実践編だね♪

私がブログで使っているHTMLは7つ

HTMLの＜＞内に入る要素は112種類あります。

しかしそれらを全て覚える必要はなく、

まずはブログで使うものだけ覚えていきましょう。

ブログ(wordpress)で私が使っているHTMLの種類は

7種類ほどしかありません。

P：文章の段落

何気ない文章を書くときはこれを使います。

＜ｐ＞文章＜/ｐ＞	文章

h1～6：見出し

1～6で1から大きい順に使ってます。

＜h1＞文章＜/h1＞	文章

img：画像を貼る時に使用

imgは文章の前のみに＜＞が必要で後ろにはいりません。

また、画像が読み込めない時のためにimg srcの次に

alt=””を入れます。

その他画像特有のルールがあります。

・imgの後にこの画像を使います！宣言のsrcを入れる
・imgとsrcの間に半角スペース
・srcの後にimg src=”ここに画像のファイル保存先URLを入れる”
・img src=””の後にalt(画像が読み込まなかったときに文字がでてくれる)
・基本形はimg src=”保存先”alt=”画像を文字で”

＜img src=”画像URL”＞	画像がでます

a：リンク貼る

他サイトのURLを貼る時に使えます。

・＜a href=”URL”＞リンクを入れたい文字を挟む＜/a＞
・リンク先の宣言にhref=””を使うからaとhrefはセット
・基本の形は＜a href=”URL”＞リンクが入る＜/a＞
・写真の中とかにもで囲めば貼れる

とりあえず＜a href=”リンク先”＞前の記事＜/a＞に飛びます	とりあえず前の記事に飛びます

ul+li：リストを作りたい時に使う

ulが親の項目でliが子の項目

liの前に点が付いてリストっぽくなる。

・＜ul＞で＜li＞リスト項目＜/li＞を＜/ul＞囲む
・1つのまとまりの最初と最後に＜ul＞
・リスト項目1つづつに＜li＞を入れる
・＜ul＞を＜ol＞にすれば・が番号(1とか2とか)になる

ちょこデニムのブログでは＜ul＞＜li＞恋愛術＜/li＞＜li＞仕事術＜/li＞＜li＞会話術＜/li＞＜li＞副業術＜/li＞＜/ul＞を学べます	ちょこデニムのブログでは恋愛術仕事術会話術副業術を学べます

br：改行できます

1行が長くなる時に改行することができます。

brもimg同様後ろに＜/＞が不要です。

改行すると＜br＞こんな感じです	改行するとこんな感じです

span,div：HTMLに名前をつけることができます

spanとdivはHTMLに名前を付けて

クラス分けすることができます。

CSSをする時にとても重要になってきます。

一応今は頭の隅に入れておいてください。

赤い線をつける時とかに＜span style=”border-bottom: solid 5px red;”＞ここだけにラインを引きたい時に＜/span＞使えます＞	赤い線をつける時とかにここだけにラインを引きたい時に使えます

以上が私が普段使用しているHTMLです。

これ以外にも使用しますが、正直112種類

全ては覚えていません。

なので今記載している7つを覚えるだけで他サイトとは違い、

有料テーマに匹敵するほどのサイトを作れます。