• ログインログイン
  • 新規登録新規登録

MENU

初心者の初心者による初心者のためのWEBサイト制作入門 第3回

連載初心者の初心者による初心者のためのWEBサイト制作入門

プログラミングが全くわからない!そもそもホームページの作られ方からよくわかっていない、という学生必見のコンテンツです。今となっては周りに聞きづらい、タグの説明やCSSの書き方まで、初心者が一番知りたい内容が盛りだくさんです。

前回までのプログラミング学習コラムに続き3回目の勉強内容です。

前回はHTMLの基本について学びました。今回はCSS(カスケーディング・スタイル・シート)について学びます。

CSSとHTMLはどう違うのでしょうか?

HTMLは文書やその構造を記述する言語であるのに対し、CSSは、その文書を装飾するための、デザインのための言語です。水彩画の描き方に例えるならば、HTMLは下書きするための鉛筆であるのに対し、CSSは色を塗るための絵の具です。

HTMLの際も基本構造と呼ばれるものがありましたが、CSSにも書式は同様に存在します。

それは

セレクタ{プロパティ:値}

です。

各部位に関して解説をしましょう。

セレクタ HTMLタグなど、デザインを変更する要素を指定します。
プロパティ 変更したい要素のうち、幅や色などどのようなデザインを変更したいか指定します。
プロパティで設定した項目の具体的な数値を設定します。

では、CSSはどのように利用するのでしょうか?

CSSはHTMLを装飾する役割ですので,骨組みとなるHTMLにリンクさせて使用します。スタイルシートをHTMLに埋め込む方法と、外部にスタイルシートを作成するやり方がありますが、今回は外部に作成するやり方を紹介します。

<link href=”ファイル名.css”rel=”stylesheet”type=”text/css” HREF=”スタイルシートのアドレス”>

とHTMLファイルのタグ内に記述してください。

例えば、

<link href=”笑論法.css”rel=”stylesheet”type=”text/css”
HREF=”showlongpou_style.css”>

と記述してください。

これで後はCSSファイルを作成すれば準備は完了です。テキストエディットを使用して作成してもいいのですが、今回はAdobe Dreamweaver CCを使って制作してみたいと思います。

Adobe Creative Cloud のホームページを開いてください。

 そして、サイト上部のコンテンツバーからダウンロード→体験版と進んでください(Adobe Creative Cloud のアカウント登録のステップは中略します)。リンク先から、Dreamweaver CCの体験版がダウンロードできるはずです。

ダウンロードできたら、CSSで新規作成を選択してください。

あとはshowlongpou_style.cssというファイル名で保存すれば、準備完了です。

次回は実際にCSSを記述するのでお楽しみに!

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top