スキップしてメイン コンテンツに移動

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で行っています。

コメント

このブログの人気の投稿

.NET Conf 2017の記録

去る2017年10月7日に日本マイクロソフト品川本社で行われた.net Conf 2017@Tokyo内の「Unconfrence」部門にて「Xamarin News」という項目でお話してきました。 意外とXamarin関係の情報でも、自分ではびっくりしたものもあったし、突っ込みがあったところはまだまだ勉強不足だと思っていますが、海外の最新アップデートを開催前にざっくりと掲載することができて自分ではまずまずではないかと思っています。 また話せる機会がありましたらその時はよろしくお願いします。 〇  Conpass 〇 Slideshare .Net conf 2017 @Tokyo Unconfrenced 「Xamarin news」 from Kenshiro Fukuda

Nikon Coolpix B700レビュー @鉄道編

だいぶ晴れの日や暖かくなる日が多くなりました。しかし、大気の状態が夕方には不安定になる日が多発していますね。となると夜の車の運転はかなり怖く、先日は法定速度-10Km/hで走った(夜かつ大雨)のですが、隣に親を乗せていると「下手くそ」とか「とろくさい」と言われています。しかし、ここは安全のため。 今は車庫入れと複数車線の走り方がまだまだですので、行く機会があるときはしっかりと学んでいきたいと思います。 それはさておき、今週金曜日に東武鉄道がダイヤ改正するようです。今回の目玉は何といっても新型特急「リバティ」運転開始と、6050型の浅草口撤退です。てなわけで、新型カメラを使ってのレビューをジャンルを絞って書いていきます。 まず、6050の結果というと・・・ 少々不満な形でした。というのも、印刷した時刻表を忘れたおかげで散々な羽目になったのです。。。区間快速の時間は忘れるは所要時間はわからない。。。 んでも初めてフル形式で撮ったのはいい記念になったと思います。 下りで2本来てたのに・・・ さらにはリバティも来ていたので、これもまた大事件。新型特急の時刻も分かればまた改正後に行ければいいなと思っています。 そのほか、急行や回送などを取って、夕方にはアイスクリームのプレゼントをもらって帰宅しました。 久しぶりに大量にカードの容量を使ったな・・・って まあ、夕ラッシュの輸送障害を除いてね

Windows 10の歴史を振り返ってみる

みなさんこんにちは。 今週は「de:code」があり、今回も盛りだくさんのセッションになっています。重なっていてかなり大変なので、後日の録画を楽しみにしております。(勿論キーノートはライブで見ます) さて、7月29日に予定されているWindows 10のUpdateは「Anniversary Update」といいます。 そのUpdateは発売から1年を祝うもので、またこれも大きく機能追加がなされようとしています。 そこで、今回は開発開始からここまでの「Windows 10」を見てみたいと思います。 あのー、今話題の「ちょまどさん」のあの ブログ をまねしたわけではございません!! こっちのほうが内容は大きいです!! ただ、自分なりの主観などもあるかもしれないので、閲覧の際はお気を付けを!! ポイントとしては、大きく進路変更がなされるのは、「記者会見か開発者会議」の時です。十分に注目してみてください! また、この10関係の連載はこちらで随時時間のある時に再掲載しているので、こちらもご覧ください。(ブログ更新時にこちらのリンクへたどれるようにしておきます。) オリジナルページ: http://shutokenrepoort.is-mine.net/rensai/win10/win10-001.html (一回目の記事へリンクしております) もしWindows 10がなければ Windows 8を自分で見たのは高校1年の終わりの春休み前日でした。(その時は先に帰った人に駅の指定席券売機で座席照会を電話で頼んだことも・・・)その日は、学校の近場にショッピングセンターがオープンしたので、終業式であったので行ってみることにしました。 まあ行ったのはフードコート、模型屋をメインに一周はしましたね。家電量販店で立ち止まったときのことでした。このときのチラシで売り出されているのはほとんどが「Windows 8」。デモ機を触ってみると、かなりの操作感に戸惑いを感じたことが記憶にあります。まず、スタートメニューは?? なにこの全画面アプリ?? クラシックモードは?? という感じでした。 それをみて、「やはりWindows 7」という印象がかなり自分の中に入り込んでしまったのが印象深いです。学校の中でも、遅いけどWindows 7(大量のソ