初心者が簡単にHTML、CSSを学ぶ手順を自分のおすすめ方法で情報発信します!2

おすすめ情報
プログラミング

前回に引き続きまして、初心者の僕がおすすめのわかりやすい手順でサイト制作をやっていきたいと思います。

前回は、「ATOM」を起動してサイトの準備段階まで進めました。
続いては、いよいよコードを打ちこんでいきたいと思います。

まずは、基本の

<head>
    <meta charset="UTF-8">
    <title>    タイトル </title>
</head>

<body>
サイトの内容
</body>

のコードをhtmlのテキストに打ち込んでいきます。

打ちこむと「ATOM」の場合は、一番上のstudy.htmlの名前がある横に青い小さい●ボタンが出ました。
この●ボタンが出ていると保存されていないという印です。
保存すると●ボタンは消えます。
コード入力中は、ATOMでも他のエディタでも、ちょこちょこ保存していた方が、突然のトラブルがおきても安心なので保存していきましょう!

基本コードを入力したら、次は style.css とリンクさせます。
htmlのテキストの metaタグ と タイトル の間に <link rel=”stylesheet” href=”style.css”>とコードを打ちこみましょう!


これで、css で入力したデータが適応されるようになります。

ページタイトルを決めていきます。
とりあえず「web制作ページ」としました。

CSSのスタイルシートリンクとタイトルを付け終わったら、bodyの中身を作っていきます。

作るページを上から順番にタグ入力していきます。

一番上はheaderなので、headerタグを作り、中に<nav>とメニューリンクを作成していきます。


メニューリンクの、メニューは基本的に<ul>と<li>を使います。

次は、 右側のmainの部分、
中にはcontent、
その中にsection のタグを制作。
わかりやすく、mainには「サイト紹介文」
contentには「コンテンツ」
section「商品紹介」
を記述していきます。 終わったら、sidemenu です。
sidemenuには「ニュース」 最後に footer 「企業メニュー」を作って、だいたいの構成は終わりです。

超実践型プログラミングスクール

プレビューで一回確認していきます。
テキストエディタから確認できない場合は、 ファイルの「study.html」

右クリック

プログラムから開く

charm とか Internetexplorer とか

ブラウザからサイト確認。 今は、とりあえず上から順番に文字が並んでる状態です。

ここから、スタイルシートの入力に入っていきます。 スタイルシートに入力して、各エリアごとに色付けしていきます。
慣れるまでは、「header」は何色。
「content」は何色、「footer」は何色と色付けしたほうが、スタイルシートで大きさや位置を指定した時にわかりやすいのでおすすめです。

色付けしたら、今度はレイアウトを整えていきます。

レイアウトを整えていく手順は、パート3で情報発信していこうと思います。興味のある方は、引き続きご観覧下さい。

ブログやサイトで活用できる、綺麗&かわいい写真アプリはここで紹介!

タイトルとURLをコピーしました