HTMLの基礎の基礎16

作成日：2026-04-30

簡単なHTMLを書き、実際に無料サーバーにアップロードして、ホームページを作るまでをやりましょう。

実際にやってみることで、本当の基礎の基礎、HTMLの規則が実体験として理解できます。

【57】リセットCSS

HTMLには、あらかじめStyle（CSS）が設定されています。
それをすべて0（ゼロ）にするためのCSS設定のことです。

何のためにそんなことをするの？
すべてを自分の設定（デザイン）にしたい場合、よく使われています。


@charset "utf-8";

/*CSS_Reset*/

a,
blockquote,
body,
class,
code,
dd,
div,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
li,
ol,
p,
pre,
span,
table,
td,
th,
tr,
ul {
  margin: 0;
  padding: 0;
  border: none;
  text-decoration: none;
  font-style: normal;
}
hr,
img {
  margin: 0 auto;
  padding: 0;
  border: none;
  vertical-align: bottom;
  font-size: 0;
  line-height: 0;
}

これはWebサイトやその人の好みによってそれぞれ違うので、正解はありません。
使わない人もいるし、使う人もいるという程度のものです。

【58】他人のwebページのHTML・CSSを見る

他人のWebページのHTMLもCSSも見ることができます。
これは何も悪いことではなく、すごく当たり前のことです。

表示方法には2種類あります。
「右クリック」→「ページのソースを表示」
「右クリック」→Chrome「検証」、Firefox「調査」

【Chrome】ページのソースを表示

【Firefox】ページのソースを表示

【Chrome】検証

【Firefox】調査

検証・調査では、margin,padding,font-family,font-size,class,など、様々な要素がわかりやすく表示され、チェックマークを外すことでその要素を外したらどういう見た目になるかなどを検証することができます。

一見すると他人のWebサイトを勝手に改造しているように見えますが、これは基本的な「各自のPCへHTML・CSS、画像をダウンロードして見せている」仕組みを利用しているだけです。

つまり「自分のPCへダウンロードされたデータを改変しているだけ」で、サーバー側にある本物のデータを変更しているわけではないのです。

【今回はここまでです】

今回は「リセットCSS」「他人のwebページのHTML・CSSを見る」を解説しました。

次回は「SNS共有ボタンの設定」「拍手の設置」を解説したいと思います。

＜＜15ページ目：「404ページ（HTML）」「background-image（CSS）」

＞＞17ページ目：「SNS共有ボタンの設定」「拍手の設置」

2026©denkikaiden