htmlを勉強したい その①

html ブログ
htmlを勉強しよう

会社でWebページ作成の仕事があったのでゼロから勉強しはじめました。
カメのような歩みなのですが、同じように学びたい人がいるはずと信じて書き続けていきたいと思います。(途中で方針を変える可能性もあります。)

htmlとはハイパーテキスト(複数のテキストを相互に結びつける仕組み)を記述するためのマークアップ言語の一つらしいです。
良く意味はわからないですが、ホームページとか作っている言語とだけ覚えておきます。(Wikipedia)

会社ではGoogle Apps Script(GAS)を良く使うので、GASで勉強できないかと検索していたら、以下のサイトを発見したのでこのページのポータルサイトを作る気持ちで勉強していきます。

GoogleAppsScriptで社内ポータルサイトを作る - Qiita
AWS Lambdaに代表されるサーバレスアーキテクチャ(FaaS)が熱い。開発屋としては筆者が今後もっとも楽しみな分野であり、対応フレームワークの動向に目が離せない。 無料で使える Google Apps Script(以降GAS...
スポンサーリンク

一行ずつ理解していく

<!DOCTYPE html>

文書がHTML5で作成されたものであることを宣言するために、 文書の先頭るDOCTYPE宣言です。

HTML5の5はバージョンっぽいですね。HTML4より動画や音声、グラフィックの描画が可能になったようrでうす。(https://techblog.yahoo.co.jp/html5/html5/)

<head>

<head>はページが読み込まれてもウェブブラウザーには表示されない部分です。

<base target="_top">

ページに記載されたリンク先URLの基準となるURLや、基準となるターゲットウインドウ(ターゲットフレーム)を指定するタグです。う〜ん意味わからない。

target=”_top”はウィンドウ全体に展開して、フレームを解除する。全体にページを表示させるっぽいです。

<meta charset="utf-8">

metaとは文書のメタ情報を指定しているらしいです。

”utf-8”は日本語の文字エンコーディングの値”utf-8”を使うよという宣言。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

バージョン8.0以降のInternet Explorerで使用できる互換モードと呼ばれる機能です。IEを「X-UA-Compatible」で指定した互換モードで表示させることができます。良くわからない。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

viewportはスマホやタブレットのモバイル端末で最適にWeb表示させるため(Google推奨のレスポンシブWebデザイン適用時)に必要な欠かせないhtmlタグです。

width=device-widthはデバイス画面サイズに合わせて表示してくれるっぽいです。

initial-scale=1は初期倍率を設定します。

shrink-to-fit=noはsafariのための設定らしいです。

<title> </title>

文章のタイトルです。

<?!= include('css'); ?>

css.htmlをGASで読み込むための宣言文。

今日はここまで

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