LINE2014.10.28目次はじめにCSSとは?XHTMLの記述ドキュメントタイプの宣言<head>部分の記述<body>部分の記述<head>、<body>を組み合わせるとCSSの記述サンプルCSSの記述WEBサイトのレイアウトが完成はじめにまたホームページ関連の内容になりますが、まずは前回までのおさらい。先日こちらのブログにて、ホームページの構造の超基礎開設を行い、タグについてはこちらのブログで簡単にご紹介しました。今回は、XHTMLとCSSを使った、実践的なホームページの作り方という点で書いていきたいと思います。Sheets(カスケーティング・スタイル・シート)の略で、簡単に言うとWEBページのスタイルを装飾するというもの。HTMLファイルで定義した情報を、外部ファイルであるCSSを読み込ませることで様々なレイアウトやスタイルを表示させるのです。実際にホームページのメインとなる、トップページのレイアウトの作り方をご紹介していきます。ちなりに今回は、表示したときのディスプレイの大きさ、ウィンドウの大きさに左右されず、レイアウトが崩れることのない固定幅でのページ作成で書いていきます。XHTMLの記述ドキュメントタイプの宣言まず、こないだの内容を元に白紙のhtmlファイルを用意します。<!DOCTYPE>~ドキュメントタイプ~にHTMLのバージョンを宣言するのですが、まずは以下のようにコピペしてみましょう。(移行型)」で記述するという宣言、さらにxmlns属性を使用して名前空間を指定していますなんだかんだ言いましたがコピペでOKです。続いて<head>内の記述ですが、ここではその文章に関する様々な情報を記述していきます。これもまずは以下の内容をコピペしてみましょう。src=""></script></head>・解説1~2行目—文字エンコーディングの指定3~4行目—基準スタイルシート言語と基準スクリプト言語の指定5~6行目—ページの説明とキーワードを明記します。SEO対策の為しっかり書いたほうがいいです。7行目—サイト名やページのタイトルを記述します8行目—外部ファイルとして読み込むCSSを指定します。9行目—外部ファイルとして読み込むjavascriptを指定します。続いてbody部分ですが、これも簡易的にこちらで用意したものを以下に記載しますのでコピペしましょう。</div></body>以上を貼り付けると、HTMLファイル全体は以下の様になると思います。上記のHTMLファイルの中で「id」や「class」といった記述があると思いますが、この名前が付いた要素をCSSで装飾します。要素にCSSを読み込ませるといったほうがわかりやすいでしょうか。くるほうで覚えてください。以下にサンプルのCSSを記載しますので、再びコピペし、先ほどとは別に新しいテキストファイルにペースト。テキストの拡張子を「.css」に変更して保存します。center;}とりあえずいじらず、このままで保存してください。以上で、html文章をブラウザで開いてみてください。CSSを読み込めるとこのように表示されると思います。なんの特徴もない1カラムのレイアウトですが、これをベースに次回からバリエーションやコンテンツ内部の装飾をしていきたいと思います。今回は前回の2カラムとは違い、1カラムのホームページのレイアウトサンプルをご紹介いたします。1カラムは比較的内容量の少ないサイトや、特設ページなどに向いていると思います。「デスクトップカスタマイズツール」のRocketDockに、追加スキンを入れてさらに使い勝手をよくするやり方です。Dockletの設定方法を説明していきます。サイト内に手軽にアンケートフォームを挿入するおすすめプラグインWordpressだけで手軽に管理ができて、中でも私が一番使いやすいと感じたプレグインをご紹介します。何かと便利なGIF形式の画像を簡単に作ることができるフリーソフトのご紹介。今回はWindowsで利用できる写真加工ソフト「fotophire」の無料版のインストール方法&使い方をご紹介していきます。「fotophire」のダウンロードとインストール、次に各機能について、最後にそれぞれの機能の詳しい使い方をご紹介していきます。今回は、札幌市格安ホームページ製作のbabyhoodで使用しているテンプレートのご紹介をいたします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。