• 2015年5月13日

ホームページビルダー18 使い方 徹底解説! 【CSS3編 Vol.1】

ホームページビルダー18 使い方 徹底解説! 【CSS3編 Vol.1】

ホームページビルダー18 使い方 徹底解説! 【CSS3編 Vol.1】 424 283 パソコン生活サポート Pasonal

今回はホームページビルダーのサイトにCSS3を組み込んで、サイトの質をアップさせたいと思います。ちょっとしたアクセントを加えるだけで、サイトが見違えるように面白くなります。「CSS3なんてわからない!」という方でも、わかりやすく解説しているのでご安心を!


 

まずはこちらで確認!

デモサイト

 

クラス名を確認してみよう!

hpb18で画像をクリック

 

【 HTML 】

上記の画像の例では「商品紹介 ITEM LIST」のページにある画像を、ポップアップ形式で表示させてみたいと思います。まずはhpb18を起動し、CSS3を付けたいページを表示します。「ページ編集」にして、「画像をクリック」します。最後に、「HTMLソース」にします。

すると、画像の箇所がハイライト表示(黄色くなる)になります。

ハイライト表示された箇所が、7行目の「img」というタグとなります。ハイライト表示された行に一番近い「class」を探してみましょう!上記の例だと、6行目の「<div class=”item”>」という箇所になります。

 

新規スタイルシートにCSS3を記述してみる

新規スタイルシートを作成
本来なら既存のスタイルシートを使用するのですが、ごちゃごちゃになるので、新しい外部スタイルシートに記述します。

下記の手順でスタイルシートを新規作成しましょう!

 

【 外部スタイルシートを追加 】

  1. 画面右横にある「スタイルエクスプレス」をクリック
  2. スタイル構成のタブにある、一番得上の項目を右クリック
  3. 「外部スタイルシートの追加」をクリック

 

【 スタイルシート名の記述 】

スタイルシート名を記述

下記のようにスタイルシート名を記述します。名前は何でもOKです!分かりやすいものにしましょう。

 

【 スタイルシートの確認 】

作成したシート名が表示される

スタイル構成の一番下に命名したスタイルシート名が表示されたらOKです。

 

【 外部スタイルシートの編集 】

  1. スタイル構成の一番下に表示された、作成したスタイルシートを右クリック
  2. メニューから「編集」をクリック

作成したスタイルシートを編集する

 

【 CSS3の記述 】

CSSを記述

HTMLで確認したクラス名を下記のように記述します。

「.item」の箇所を「確認したクラス名」にするだけでOKです!

例えば確認したクラス名が「syouhin」なら、下記の4行目の箇所が「.syouhin img」となります。

(※hoverの箇所も上記と同じようにしましょう!)

 

 

【 スタイルシートを保存しよう 】

スタイルシートの保存

これで外部スタイルシートの作業は完了です!あとは、スタイルシートを保存します。

上記の画像の手順で保存しましょう!

 

HTMLにリンクを記述して完了!

【 HTML 】

最後にページのHTMLに「link(リンク)」を記述します。「<head>内」であれば、どこに記述してもOkです。近くの「<link rel=”~”>」をコピーして、同じような固まっている箇所の付近に記述しましょう。

上記の例では15行目あたりに記述しています。

 

最後に

作成したスタイルシートと、linkを記述したHTMLをサーバーにアップロードして完了です。

アップロードしたら、正常に動作するか確認してみましょう!

ぱそなる の最新の更新を
プッシュ通知で購読しよう

よかったらシェアしてください

返信を残す

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)