サイト制作や運営担当者にほぼ必須な基本HTMLタグ（要素）をまとめました。
コピーペーストで使用すれば覚えなくても制作することができます。
ブログなどを使ってぜひ、テストしてみてください。

HTML編

 

基本リンク

<a href="ここにURL" target="_blank" rel="noopener">リンク</a>

リンク

別ウィンドウでリンクを開く

<a href="ここにURL" target="_blank" rel="noopener">リンク</a>

リンク

ページ内リンク

<a href="#id">ページ内リンク</a>

飛ばしたい場所にid=”○○”をつけ、リンクはURLの後ろに#と○○のid名をつけます ページ内リンク

<a id="id"></a>アンカー

画像貼り付け

<img src="画像のアドレス" />

alt（代替え）タグもできるだけつけましょう

<img alt="画像の説明" src="画像のアドレス" />

リンク付き画像

<a href="URL"><img alt="画像の説明" src="画像のアドレス" /></a>

属性

上記の要素にさらに情報を付加させるのが「属性」です

横幅

width="100%"

縦幅

height="auto"

例

<img alt="小倉抹茶パスタ" src="http://img-cdn.jg.jugem.jp/b3b/3470766/20160330_108428.jpg" width="240" height="auto" />

SEOを意識すると文章の構造をあらわすタグも重要なのですが、ここでは省きます。
最低限、「 リンクをはる」と「画像を貼り付ける 」 ことができれば、当サイトのテンプレートを制作することができると思います。

よく使うCSS編

余白

padding:2% 2% 2% 2%;

数字の順に上、右、下、左と適応されます。

空白

margin:2em 2em 2em 2em;

余白の使い方は視認性において非常に重要です。単位を「px」で調整することもできますが、メンテナンスが大変になるので相対的に計算してくれる「%」か「em」の単位がおすすめです。なるべく一か所変更すると一気に変更できるように使用しましょう。

CSSを適応したい場所

CSS

.test{padding:2%;background-color:#cccccc;}

余白を2%　背景がグレーと指定しています

直接指定表示例

外部cssファイル呼び出し

<header></header>タグのなかに書き込みます

ページ内リンクの飛び場所