見出し画像

簡単！ホームページを作ってみよう！ -2

donguri

上記を使って試していきます。

もう少しホームページらしくしていきます。

HTMLを書くエリアに"html:5"と書いてtabキーを押して見ましょう。すると

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
// ここに内容を書いていく

</body>
</html>

と出てくると思います。これで本来のホームページの基本タグが完成しました。こんな感じでコマンド的なものを書いてtabキーを押せば何か出て来るという仕組みになってます。

これは"Emmet"と呼ばれる簡単に早く正確に書くことができる記法です

ホームパージを作るときにHTMLと一緒にCSSとう仕組みを使って書くのが今では一般的になっています。CSSとは何かということですが、簡単にいうとHTMLは骨組み、CSSはそこにいろんなものを修飾して飾り付け、肉付けすることができるものとなっています。

まずまHTMLの基本の構造を作ってみます。ちなみに前回使った<p>がHTMLでstyle=""がCSSです。

HTMLの<p>のようなものをタグと呼びますが、このタグはいろんなものが用意されています。

これを使って構造を決めていきます。必要な中身を書いていく箱をつくっていくわけです。

それでは書きたいものを入れる箱を作っていきます。一番簡単なものは

<div>　書きたいこと　</div>

で作っていきます。例えば

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <div>　書きたいこと1 </div>
  <div>　書きたいこと2 </div>
  <div>　書きたいこと3 </div>
  <div>　書きたいこと4 </div>
  
  
</body>
</html>

と書いて保存、実行してみると

右下が実行画面となっています。文字が縦に並んでいます。

<div>　書きたいこと　</div>が一つのブロックとなって縦に並んでいます。これではイメージが難しいので枠線が出るようにしてみます。ここで使うのがCSSとなります。レイアウトなどを簡単に実現できるものとなります。

jsfiddleの右画面CSSと書かれているところに書いていきます。何かをしてほしい時に目印をつけてどれに対しての命令かをわかりやすくします。その方法は

class

をつけて実現することが手頃です。この場合だと

 <div class = "hako">　書きたいこと1 </div>
 <div class = "hako">　書きたいこと2 </div>
 <div class = "hako">　書きたいこと3 </div>
 <div class = "hako">　書きたいこと4 </div>

としてみます。CSSは

.hako{
  border: 1px solid;
}

としてみます。これを実行すると

右下のプレビュー画面を見てみると、線が描画されているのがわかると思います。

.hako　　・・・　classで指定した名前に"."をつけて表します。

この指定した場所に

border: 1px solid;

枠線(border)に1pxの実線(solid)を書いてくださいという意味になります。こんな感じでclassに関して指定ができるようになります。もう少しこのクラスに対して指定して見ます。

margin: 10px;
padding: 10px;

を追加して実行してみます。

文字と文字の間が広く空きました。これは余白を指定するCSSです。いろんなものがありこれらをいろいろ組みわせてレイアウト、かっこいいサイトに仕上げていくことができます。


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