1. ホーム > 
  2. Webサイト制作 > 
  3. KompoZerの使い方 > 
  4. KompoZerでCSSのスタイルを指定してHTMLに適用する方法

KompoZerでCSSのスタイルを指定してHTMLに適用する方法

CSSのスタイルはHTMLページ内の要素と紐付ける必要があります。そこで、KompoZer作ったCSSのスタイルを、各ページのHTML要素に適用する方法について解説。

  • 2016/8/6
  • 2012/1/8

CSSエディタで作成した名前つきスタイルなどのセレクタを、HTMLに書かれた要素に適用する方法を解説します。

まずKompozerのメインウィンドウの描画モードを「HTMLタグ」に設定しておきます。このモードに変更すると、ページ中の要素(段落やブロック要素)などが表示されますので、各要素にセレクタを適用するのが楽になります。

描画モードを変更するには、画面の右下で設定します。

CSSを適用する箇所をHTMLタグでマークアップ

まずページ中でCSSのセレクタを指定する箇所を、適切なタグでマークアップする必要があります。
文章の箇所であれば段落を示す<p>タグ、画像などの場合は<div>などのブロックタグでマークアップすれば良いでしょう。

文章を<p>タグでマークアップする方法

まず段落にしたい文章をドラッグアンドドロップして選択します。

その後文章を選択した状態のまま、ツールバーにある「body直下」のメニューを開き「段落」を選びます。
選択した文章の横に「p」の文字が表示されれば、<p>タグでマークアップされています。

画像を<div>タグでマークアップする方法

文章を段落にした方法と同じ要領で、画像を選択したあと「汎用ブロック(div)」を選べば、画像の横に「div」の文字が表示され、<div>タグでマークアップされます。

CSSのセレクタを指定する方法

それではマークアップしたHTMLタグに対して、CSSのセレクタを指定していきましょう。
ここでは文章の段落タグに対して「.text」というセレクタを適用します。

「.text」は幅を300px、高さを100pxに、周辺に1pxの黒い線を表示するスタイルとして、事前に定義しておきます。

それでは先ほどマークアップした文章の「p」部分をクリックします。
これで<p>タグ全体が選択された状態になります。

気をつけていただきたいのが、再度ここで文章を選択しようとすると、<p>タグの内側に新しいタグを作成して、その内側のタグに対してスタイルが適用されてしまう事がある点です。
必ず<p>全体を選択するように、「p」の文字部分をクリックして選択してください。

選択した後にツールバーの「body直下」と書かれたメニューの右側のメニューから、適用したいセレクタ名(ここではtext)を選びます。

これでHTMLのタグにスタイルが適用されます。
画像に対してもスタイルを適用したい場合は、同じように「CSSセレクタの定義→HTMLタグへの適用」という順で作業をすればOKです。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします