あかとくポータルサイト

7Day’s Reportを見ずにー(HTML5とCSS3で書く最新のWebページとはの2回目です)

こんばんは。
毎週土曜日は本来ならばあるテレビを見て寝落ちするのが一般的ですが、部屋の片づけと同時に、昨日のブログ、大幅な反響がありそうなので連続していきます。

今日はさっそく記事を書いていきます!!
卓上にあったのは、昨年度の通信 6月号。この一部記事をWeb化していきたいと思います。
完成記事は後日アップされていますので、こちらをご覧ください。

それでは、さっそくページを書いていくことにします。
ニュースサイト立ち上げにおいては、全然レイアウトを検討していません。そこで、今回は記事を書きながらスタイルを作成していこうと思います。

手元の参考書では、「企画書かけ」・「デザイン下書き」という言葉もあります。そこは頭の中ではある程度こねあがっています。3月から製作を開始しようと考えてもいます。しかし、作るにあたっては、デバイスをどうするのかという疑問も多いのではないでしょうか。

てなわけで、今日はこの号のニュースをまず打ち込むだけ打ち込んでいきたいと思います。
今日はタイトルと本文を書いていきます。

でも、ここだけは注意しないといけないことがあります。
テキストのエディタやVisiual Studioなどでは編集の際に開業しても、ブラウザ側では改行してくれません。必ず区切りのいいところで改行を示す<br />を入力しないとだめです。Wordでは必ず改行してくれます。しかし、Wordなどでの編集の際はコードが大量になってしまいます・・・私はお勧めできません・・・

本来なら先に仕込みの部分をしっかりしないといけないですね。はい。
ということなので、先に仕込みをしてしまいましょう。
ということで今の作業をそのままにして、もう一つ新しいウインドウを開きます。アイコンのところで右クリック→アプリケーションの名前をクリックをすれば新規にウインドウが開けます。
ファイル→新規作成→ファイルで1枚の空のファイルを作ることが可能です。
すると、HTMLページが表示されますので、そこから作っていくのです。
VS2015のHTMLファイルは最新の5を完全に採用しています。最初から書式が書いてあるのでわざわざ準備する必要がありません。下記にその最初の段階のコードを書いていきます。

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta charset=”utf-8″ />
    <title>
    
  </title>
</head>
<body>

</body>
</html>

ここに、タイトルとBodyの部分(本体の部分)に手をくわえていきます。最初の仕込みをしっかりしないと後の部分が大変なことになるかもしれません。ですので、仕込みのテンプレートはきちんと仕込まなければだめです。計画は念入りに行いましょう。

ここで気を付けることとしては、「html lang」をjpにすること。enはEnglishの略、jpはJapaneseの略なのでそこは注意しておきましょう。

先ほどの記事部分はBodyの中に書いていくのです。
作成したら、保存をして文字がおかしくなっていないかを確認していきましょう。
今はエディタの中で改行をして、ある程度のところでまとまれば大丈夫だと思います。

次回は、htmLのバージョンを一目で見る方法を説明します!

※ この作業はVisiual Studio 2015で行っています。