Monthly Archives: December 2017

HTML: div, section, article の使い分け方

今更ですが、今回は HTML5 コーディング時にいつも迷ってしまう、div, section, article の使い分け方をおさらいしておきます。 目次 div, section, article の使い分け方 まとめ div, section, article の使い分け方 最初に言っておくと、HTML5 で登場した article や section をわざわざ使用しなくても div だけを使っても問題ない です。 このことを前提として、以下に詳細を説明します。 div div を使うケースの多くは レイアウトやビジュアルデザインが主な利用用途 になっているかと思います。 div タグ自体に文章構造上の意味がないため、冒頭で説明した div だけを使ったコーディングで問題ない という結論になるわけです。 div 自体に意味はないため section や article を内包しても問題ありません。 section section は div と違い、文脈的な意味がある コンテンツに対し使用します。 また、section 内には hx(h1) が必須 となり、コンテンツが独立して成立しない 場合に用います。 section 内には、section もしくは article を配置できます。 article article は section 同様、文脈的な意味がある コンテンツに対し行います。 section との違いは article 内のコンテンツが 独立して成立する 場合に用います。 内側の article が、外側の article の内容と関係がある場合、article を内包(ネスト)することができます。 各 article 内に section を内包(ネスト)することもできます。 div -> section -> article という順番で、よりセマンティックになっていく感じです。 まとめ HTML5 から登場した section と article ですが、WordPress 等のブログエンジンやテンプレートエンジン等で、あらかじめ設定済みのものをそのまま使うケースが多いです。 実際のところコンテンツをグルーピングしたい場合、div を使用すれば何も問題はないのですが、今はユニバーサルデザインを意識し開発することも求められますので、section や article を使い分け、各コンテンツの意味を考えながらコーディングしていくことも重要だと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: よく使う EJS のサンプルコード

必要に迫られ、今さらですが Node.js で HTML テンプレートエンジンの EJS を導入しました。 今回は EJS のよく使うサンプルコードをメモしておきます。 目次 よく使う EJS のサンプルコード まとめ よく使う EJS のサンプルコード 基本 の中で JavaScript コードを実行することができます。 コメント EJS コメントです。コンパイル時 HTML には出力されません。 インクルード 静的 HTML 出力として EJS を使う場合、主な用途はインクルードだと思います。 以下は index.ejs から _include フォルダ内の head.ejs (ejs 拡張子は省略可)をインクルードし headValue の値を渡すサンプルです。 index.ejs head.ejs 出力 文字列を出力する場合と、HTML 要素を出力する場合で2つの記法に分かれます。 (文字列を出力したい場合) (html 要素を出力したい場合) ループ おもにリスト等で利用する機会が多いかと思います。 まとめ ウェブサイトやウェブアプリの仕様等を HTML でプレゼンしたい場合、EJS のような HTML テンプレートエンジンが役に立ちます。 あらかじめ EJS で再利用性の高い要素をコンポーネント化しておけば、少ないコーディングで HTML 出力ができ、作業効率アップ、コストダウンにつながるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Terminal: npm コマンド一覧

Web アプリ開発時に Node.js は欠かすことができない存在となりました。 今回は Node.js のパッケージ管理ツール である npm(Node Package Manager)のよく使うコマンドをメモしておきます。 目次 npm コマンド一覧 まとめ npm コマンド一覧 npm のバージョン npm のバージョンを表示します。 npm の初期化 カレントディレクトリに package.json を生成します。 パッケージのインストール パッケージ(XXX)をインストールします。 パッケージ(XXX)をインストールし package.json の dependencies に追記します。 –save は package.json の dependencies に追記される。 –save-dev は package.json の devDependencies に追記される。 –save-optional は package.json の optionalDependencies に追記される。 パッケージの更新 package.json に記載されたパッケージを一括インストールする際にも使用します。 パッケージの一覧を表示 インストール済みのパッケージ一覧を表示します。 パッケージの詳細を表示 パッケージ(XXX)の詳細情報を表示します。 パッケージを検索 パッケージ(XXX)を検索します。 パッケージの削除 パッケージ(XXX)を削除します。 未使用パッケージの削除 未使用のパッケージを削除します。 まとめ 近年、npm は Webアプリ開発の新規プロジェクトに着手する際、必ず利用します。 現在は様々な Node.js のパッケージが存在しますので、うまく利用すれば、最短で目標が達成できるようになるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。