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

HTML5とCSS3で書く最新のWebページとは

皆さんこんにちは。
久しぶりの投稿となりました。
相変わらず椅子の座り方というのは全然ダメですね。外付けキーボードでは音を小さくすることが可能で、自作パソコンの時のために早めに購入してよかったと。無駄な買い物かもしれませんが、電源キーついてますし、自宅では久しぶりの標準型キーボードとのお見合いでよかったです。どうしてもノートパソコンばかりですと、製品ごとにキーボードの配置が異なるのでそれに手を慣らすのに時間がかかってきます。でもこれはハブを通してでも、正しい場所でできるので何とか。

余談はさておき、
今日は新ビルドのお話かと思いきや、実はちょっと特色の違うお話をします。
「HTML5+CSS3」で書く最新のWebページについてです。
これはレガシーIE関係の話をした時もなのですが、そのレガシーIEがサポートしていたのはHTML4.01という規格でした。そのころの私というのはタグが完全に理解できなかったため、ワードを使用しての編集。しかし、こいつのデメリットは、タグが多くなりすぎることと、レイアウト問題でした。手元の参考書を見ると99年生まれ。うちの妹より1歳年上なのです。しかし、技術において、16年前の技術というのは、大変な古物。最近よくわかりました。時の流れといえども、いずれはこうなる、と。
ニュースやドキュメンタリーで、橋の架け替えが必要だ、首都高を値上げしないと採算が取れなくなるといってますが、この世界に入ってから驚くものばかり。家に眠ってるあるガラケーは、今年のカレンダーが正式に表示されないという問題も。寿命の考え方は親の影響を受けたのかもしれません。

そんなわけで、今日書く話では、どうやってWebを書き上げていくかを見ていきたいと思います。
基本的な書き方と出だしに関しては、私の目の前に書籍があるのでそれを参考にしています。ただ、どうしても外のサイトを見ていくうちに、「こんなものも入れたい」と思っているので、その点に関しては残念ながらインターネットを利用して検索をかけて対応します。
これまでは直接型のGoogleサイトを利用するという方法もありましたが、コードの問題等もあって現在は更新を止めています。

作成にあたって、様々なテキスト編集ソフトを考えましたが、最終的にたどり着いた神なるソフトがこちら。
「Visiual Studio 2015」
このソフトの利点は、自動的に階段状になること、そして、予測変換と色の指定の際に編集がしやすいことが挙げられます。このソフトはプログラム開発者にとって基本的かつ必要不可欠なものです。

それはさておき、さっそく空のページを1つ出しておきます。

そこには、こんな記述が・・・

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

これを見ていきます。
HTML5の書き出しは、<!DOCTYPE html>とだけ書けばよくなったこと。これまでは、なぜかリンク必須の書き出しでしたが、本バージョンより書き出しがしやすくなっています。その分、下段に言語を記述。英語の場合はen、日本語の場合はjpと書きます。

っと・・・こんなところ、このVSならなんといきなり書き出しができるようになっているのです!!ですから、本体のコードとタイトル名をさっさと打ち込めばいいわけなのです。(先ほどの部分はen、そこだけは直してくださいね)
本体部分はすべて<body>の中で記述。<br>でページ改行しますよ。
私はCSSとJavaもかけてしまうことが判明したので、ファイルのかさばり防止の影響で書けるものは書いていこうと思っています。
その場合、ここに書いてください。

</html>
<style type="text/css">  </style>
これでスタイルの作成が可能になります。
htmlの下に書くとよいでしょう。

そんなわけで、今度(もうすぐ3月号の編集が始まる)は、このHTML5とCSSで書いてみたいと思います。ページは別途指定しますので、ぜひご覧ください!!そうだな・・・ちょっと部屋をあさったら過去の通信出てきたからその部分書いてみます。

では、また。

コメント

このブログの人気の投稿

直ったぞ!Xamarin!~環境が変に壊れたときの修復方法~

こんにちは。
Xamarin初心者というかはじめる際には環境構築が結構大変だと言ってますが、実は私も別のわなにはまってしまってました。
しかし、環境を直すことに成功したので、今回その手法などについて書いていきたいと思います。

トラブルの内容:Visual Studio 2015の設定項目の中にある「Xamarin」をクリックすると、「このページを読み込む際にエラーが生じました」と表示される。この影響でプロジェクトがWindows系以外作成できなくなってしまう。

ずっと悩んでいて検索かけてもこの手法はあまり見当たらない・・・ということでハッシュつけて聞いてみました。ひとまずXamarinを抜こうとトライ。
抜き方(アンインストール)についてはこちらを参考にさせていただきました。

https://www.xlsoft.com/jp/products/xamarin/uninstall_from_vs.html(エクセルソフト:Visual Studio から Xamarin を完全アンインストール)

コントロールパネルからアンインストールしても、フォルダ系は残っていますので、確実に削除という方法をとりました。

その後、Xamarinの公式サイトからXamarinアカウントを作ることにしました。
アカウントを作成する際のパスワードの制限がかなり強くなっているので忘れないことが重要。
12文字以上で記号をつけろ?とのことでした。

アカウントを作成し、トップから“Dashboard”をクリックすると、下のような画像のページに。(初期はコンピューターとの連携の画面が出てきます。)

最初にコンピューターの連携が出てしまった場合は、上の“Downloads”をクリックして上記の画像のページに飛んでください。
余談ですがマーカーされているところは旧バージョンの話だと思うのですが、今回はそこは無視でいけました。もし必要ならばクリックしてやってください。

話を戻し、最新のでよいというなら次のマークしている部分をクリックしてください。すると、ひょっこりと出てきます。
私はこの中の“Xamarin.iOS”のWindows版を選びました。
すると、どのインストーラーにしますか的な質問が飛んでくるので、下の赤枠のところをクリック。

msiファイルをダウンロードしますので実行してください。(…

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(大量のソフト積んでるのにメモリ2GB)、家に帰れ…

Nikon Coolpix B700レビュー @鉄道編

だいぶ晴れの日や暖かくなる日が多くなりました。しかし、大気の状態が夕方には不安定になる日が多発していますね。となると夜の車の運転はかなり怖く、先日は法定速度-10Km/hで走った(夜かつ大雨)のですが、隣に親を乗せていると「下手くそ」とか「とろくさい」と言われています。しかし、ここは安全のため。
今は車庫入れと複数車線の走り方がまだまだですので、行く機会があるときはしっかりと学んでいきたいと思います。

それはさておき、今週金曜日に東武鉄道がダイヤ改正するようです。今回の目玉は何といっても新型特急「リバティ」運転開始と、6050型の浅草口撤退です。てなわけで、新型カメラを使ってのレビューをジャンルを絞って書いていきます。

まず、6050の結果というと・・・ 少々不満な形でした。というのも、印刷した時刻表を忘れたおかげで散々な羽目になったのです。。。区間快速の時間は忘れるは所要時間はわからない。。。
んでも初めてフル形式で撮ったのはいい記念になったと思います。



下りで2本来てたのに・・・
さらにはリバティも来ていたので、これもまた大事件。新型特急の時刻も分かればまた改正後に行ければいいなと思っています。

そのほか、急行や回送などを取って、夕方にはアイスクリームのプレゼントをもらって帰宅しました。

久しぶりに大量にカードの容量を使ったな・・・って
まあ、夕ラッシュの輸送障害を除いてね