見出し画像

ローカルファイルだけでHTMLとCSSを書いて練習してみよう

cicao_cppn

こんにちは。
HTMLコードをこれから勉強してみたいけど、いきなりサーバーを借りたりするのはちょっと…というコーディング初心者さんは結構いるのではないでしょうか。
一般的にHTMLで書かれたファイルはサーバーにアップロードし、
全世界に公開されるのですが、まずは自分だけ見られてコードの勉強をしてみたい場合もあるかと思います。
そんな時、HTML内にCSSも記述して１つのファイルをサーバーにあげることなくブラウザで確認する方法があります。
では、さっそく書いてみましょう。
使うソフトはVisual Studio Code。
こちらでダウンロード可能です。

※今回は細かいタグについての解説は省略しています。

1.HTMLファイルを準備する

いきなり結論になりますが、メモ帳などのテキストエディタで拡張子を「.html(.htm)」で保存したファイルはchromeなどでプレビューを見ることが出来ます。
ためしにメモ帳に適当な文を入れ拡張子をhtmlで保存し、chromeでプレビューするとわかるかと思います。

画像1

画像2

画像3

さすがにこれではページとしてレイアウト出来ていないので、作り込むコードを書いていきます。

画像4

<html>
<head>
<meta charset="utf-8">
<title>テストページ</title>
</head>
<body>
</body>
</html>

これで最初の準備が出来ました。次にHTMLファイルの中にCSSを書けるようにします。

画像5

<html>
<head>
<meta charset="utf-8">
<title>テストページ</title>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
</body>
</html>


厳密にはもっとたくさんのページの説明などを記述しますが今回は練習用なので省略します。

2.ボックスを並べてみよう

画像6

こんな感じのボックスを表示させてみます。
ダミー画像はこちらからお借りしました。Placehold.jpさんは任意のサイズのダミー画像を生成出来るので便利です。
コードはこんな感じ。

<html>
<head>
<meta charset="utf-8">
<title>テストページ</title>
<style type="text/css">
<!--
-->
</style>
</head>

<body>
   <div>
   <img src="http://placehold.jp/1000x300.png">
   </div>
</body>
</html>

これをhtml形式で保存し、chromeで見るとサンプルと同じ表示になると思います。以下、コードの記述を変えるたびに上書き保存し、その後chromeブラウザは再読み込み（Ctrl/command+R）します。

3.クラス名をつける

画像7

大きなボックスの下に小さなボックスを配置します。

<html>
<head>
<meta charset="utf-8">
<title>テストページ</title>
<style type="text/css">
<!--
-->
</style>
</head>

<body>
   <div>
       <img src="http://placehold.jp/1000x300.png">
   </div>
   <div>
       <img src="http://placehold.jp/500x200.png">
   </div>
</body>
</html>

もうひとつ追加

<html>
<head>
<meta charset="utf-8">
<title>テストページ</title>
<style type="text/css">
<!--
-->
</style>
</head>

<body>
   <div>
       <img src="http://placehold.jp/1000x300.png">
   </div>
   <div>
       <img src="http://placehold.jp/500x200.png">
   </div>
   <div>
       <img src="http://placehold.jp/500x200.png">
   </div>
</body>
</html>

こんな感じにボックスが縦に並びます。

画像8

では、ここでやっとCSSを書いてみます。
一番上の大きなボックスと下のボックスの間に余白を入れます。
まずはコードから。

<html>
<head>
<meta charset="utf-8">
<title>テストページ</title>
<style type="text/css">
<!--
.bigbanner {
  display: block;
  width: 1000px;
  margin: 40px 0 40px 0;
}

-->
</style>
</head>

<body>
  <div class="bigbanner">
      <img src="http://placehold.jp/1000x300.png">
  </div>
  <div>
      <img src="http://placehold.jp/580x200.png">
  </div>
  <div>
      <img src="http://placehold.jp/500x200.png">
</body>
</html>

CSSを反映させるためにはクラス、もしくはIDで適用させる要素に名前をつける必要があります。
まずは一番上のバナーの余白を入れるので一番上にクラス名をつけます。
次に<!-- -->で囲った場所にCSSを書きます。

画像9

これを応用して要素にクラス名をつける→CSSで表示する内容を指定する…を繰り返します。

4.画像を真ん中に表示させる

コーダー初心者の最初の難関『画像を中央に配置』です。
画像や要素の中央配置は色々な方法がありますが、今回はmarginを使い、左右の余白を均等にする方法にします。

<html>
<head>
<meta charset="utf-8">
<title>テストページ</title>
<style type="text/css">
<!--
.bigbanner {
  display: block;
  width: 1000px;
  margin: 40px auto;
}

-->
</style>
</head>

<body>
  <div class="bigbanner">
      <img src="http://placehold.jp/1000x300.png">
  </div>
  <div>
      <img src="http://placehold.jp/500x200.png">
  </div>
  <div>
      <img src="http://placehold.jp/500x200.png">
</body>
</html>

margin: 40px auto;
これは上下40pxの余白、左右は自動という内容です。
displayで表示をブロック要素にすること、widthで横幅の数値を入れることがポイントです。画像以外の要素の場合、横幅と高さを指定しないとmarginは使えないので注意が必要です。

5.画像を横並び、中央配置にする

画像10

これも最初のうち苦戦するコーディングのひとつ。先ほど作った小さい方のボックス二つを横並びにします。

<html>
<head>
<meta charset="utf-8">
<title>テストページ</title>
<style type="text/css">
<!--
.bigbanner {
   display: block;
   width: 1000px;
   margin: 40px auto;
}

.box {
   display: flex;
   width: 1000px;
   margin: 40px auto;
}

.minibanner img{
   width: 500px;
   margin: 20px auto;
}

-->
</style>
</head>

<body>
   <div class="bigbanner">
       <img src="http://placehold.jp/1000x300.png">
   </div>
<div class="box">
   <div class="minibanner">
       <img src="http://placehold.jp/500x200.png">
   </div>
   <div class="minibanner">
       <img src="http://placehold.jp/500x200.png">
   </div>
</div>
</body>
</html>

画像11

.minibannerの横幅の表示を480pxにして、更に各ボックスの間に余白を作ります。

<html>
<head>
<meta charset="utf-8">
<title>テストページ</title>
<style type="text/css">
<!--
.bigbanner {
   display: block;
   width: 1000px;
   margin: 40px auto;
}
.box {
   display: flex;
   width: 1000px;
   margin: 40px auto;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}
.minibanner img{
   width: 480px;
   margin: 20px auto;
}
-->
</style>
</head>
<body>
   <div class="bigbanner">
       <img src="http://placehold.jp/1000x300.png">
   </div>
<div class="box">
   <div class="minibanner">
       <img src="http://placehold.jp/500x200.png">
   </div>
   <div class="minibanner">
       <img src="http://placehold.jp/500x200.png">
   </div>
</div>
</body>
</html>

画像12

こんな感じに、htmlファイルをサーバーにあげることなく、ある程度ページを作り込むことが出来ます。HTMLの構成やパラメーターなどの概要をつかんだり、chromeの開発者ツールを使い、リアルタイムでプレビューしながらパラメーターを動かすとより理解できると思います。

今回はよく作る構成をローカルでもプレビューしながら作る説明だったので、細かいdiv構成やflexについては省略しました。また別な機会に書きたいと思います。
長い文章、最後までお読みいただきありがとうございました。
参考になりましたら幸いです。

この記事が気に入ったらサポートをしてみませんか？