HTML

HTMLはHyperText Markup Languageの略で、その役割は文書構造を定義することです。ここではHTMLの基本的な書き方から、保守性も考えた書き方までご紹介するので参考にしてみてください。

まずはここから!HTMLの基本を知る

HTMLといえばホームページ!なので専用ソフトが必要と思われるかもしれませんが、実はテキストエディタ(メモ帳など文字を入力するアプリ)があれば作れてしまいます。フリーのテキストエディタもたくさんあ…

HTML5から導入されたコンテンツモデルとは

HTML4やXHTMLでは、各要素はブロック要素とインライン要素に分けられ、インライン要素にはブロック要素を含めることができないというルールでした。たとえば、インライン要素であるaタグに、ブロック…

少しレベルアップ!保守性の高いHTMLを書くためには

タグにclassやid名をつける

HTMLはある程度雑に書いたとしても記述にミスがなければ正常にブラウザで表示されます。ただ、ホームページ公開後にデザインを変更したり、新しいバージョンのHTMLをベースに書き換えたりすることを考えて、管理しやすいように記述した方がいいでしょう。では、具体的にどのようにすれば保守性の高いHTMLを書くことができるのでしょうか。 まず、タグにidもしくはclassをつけるといいでしょう。HTMLのタグにidやclassを付加すると、ピンポイントでCSSの設定を適用することが可能になります。もし見出しタグにeventというクラス名をつけたとすると、クリスマスやお正月といったイベントごとにCSSをちょっといじればそこだけ色を変更するといったことが可能です。デザインを簡単に変更できるので、リニューアルの手間が相当省けるでしょう。

ホームページのどの部分を表しているのかわかるようにする

特定のHTMLが、ホームページのどの辺を表しているものなのかすぐわかるようにコメントを付記しておくのも効果があります。たとえば、ホームページ内のコンテンツへの目次を表している部分には「ここからメニューです」といったコメントを書いておき、コンテンツ部分を表しているところには、「ここから本文です」というコメントを記しておけば、リニューアルしたいときなどに迷うことがありません。 もし、コメントをつけないと、HTMLのどの部分がホームページのどこを表しているのか非常にわかりにくく、デザインを変更したり、画像や文章を追加したいというときに迷ってしまうでしょう。 ちなみに、HTML内でのコメントには決まった書き方があり、ルール通りに記せば、ホームページのコンテンツに混じって表示されてしまうことはありません。

CSS

まずは土台作り!CSSの基本を知る

今回はホームページ作成には欠かすことができないCSSについて学びます。なお、htmlの基本を知っているという前提で書いておりますので、htmlって何?と思われた方は最初にhtmlの基本を学ばれた上…

少しレベルアップ!管理しやすいCSSを書くためには

CSSはホームページのレイアウト情報を決める言語です。例えば、ページ全体の横幅やコンテンツの行数など、ホームページの見た目を整えるために使用します。また、ホームページを閲覧する人は様々なデバイスで…

CSSの機能を補ったCSSプリプロセッサーとは

webページは、主にHTMLとCSSという2つの言語で作成されています。HTMLは、webページをどのようなレイアウトにするかを指示するためのものです。文章の配置や、どの文章が見出しでどの文章が段…

ホームページ作成とSEOは無縁なものだと思ってはならない

ネット上のWebページの数は年々増加し続けています。SEOがしっかりしたページは明確に上位に入りやすいため、ホームページ作成とSEOは無縁なものだと思ってはなりません