CSSを始めよう｜Yahoo!ショッピングでCSSを使うには
Yahoo!ショッピングのストアページを「もっと店舗の雰囲気を出したい！」「商品がよりよく見えるようにしたい！」など、自分が思うデザインへカスタマイズをしたい時がありますよね。
そんな時役に立つのが今回紹介するCSSです。
このCSSをマスターすれば、自分だけのオリジナルストアページを作成できるので気になる方はぜひチャレンジしてみてください。
今回は、CSSの基本的な知識とYahoo!ショッピングでCSSを使う方法を解説します。
CSSを使わずにストアページ制作したいストア様はこちらをチェック✓
▶開店したてのお店もにぎわいのあるお店に変身｜B-Spaceでストアページを作ってみよう！（ストアトップページ編）
目次
CSSって何？
CSSは「Cascading Style Sheets」の略で、HTMLと組み合わせることで表示されるウェブページを装飾できます。
例えば
- 文字を大きくする
- 重要な部分を赤文字にして下線を引く
- 画像を横に並べて表示する
など、配置や色付けなどを変更できます。
具体的にどのように変わるかイメージしづらいので、実際にCSSを使用してウェブページがどうなるのか確認していきましょう。
CSSで装飾してみよう
実際にHTMLからCSSを読み込んで見出しがどのように変わるかやってみましょう。
まずは、デスクトップ等にフォルダを作成していきます。
今回はデスクトップに「test」フォルダを作成しました。
次に作成したフォルダ内にindex.htmlを作成します。
メモ帳などのテキストエディタでHTMLファイルの内容を以下のように記述します。
<html>
<head>
<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”hello.css”>
</head>
<body>
<h1>文字サイズと文字色が変わる見出し</h1>
</body>
</html>
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
記述できたら「index.html」という名前でtestフォルダのなかに保存します。
HTMLを作成した段階で、CSS作成前がどのような表示になっているか確認しましょう。
htmlファイルをダブルクリックするとブラウザで開くことがでます。
特に何の装飾もありません。
それではCSSを作成して装飾していきます。
今回はhello.cssという名前のCSSファイルを使用する想定でHTMLを作成した(HTML4行目)ので、testフォルダ内に「hello.css」を作成します。
CSSファイルの内容は、以下のようにします。
h1 {
font-size: 50px;
color: red;
}
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
内容としては、h1タグの文字サイズを50pxに、色を赤にしますという意味になります。(CSSの書き方に関しては後述します。)
記述できたら「hello.css」という名前でtestフォルダ内に保存します。
先ほど開いたブラウザページを更新(またはindex.htmlを再度ダブルクリック)してください。
予定通り、文字サイズと文字色がCSSによって変更されました。
簡単な例ですが、このようにCSSを使用することで、オリジナルデザインのストアページを作成できます。
Yahoo!ショッピングでの使用方法
Yahoo!ショッピングをそのまま利用するだけでは、実は画像ファイルしかアップできません。
CSSを使ってページのデザイン、カスタマイズが可能にするには「トリプル」と契約してCSSファイルを事前にアップロードする必要があります。
「トリプル」とは、Yahoo!ショッピング出店者様向けにサーバースペースを提供するオプションサービス（有料）です。
【トリプルの特徴】
- 自社サイトなどで作成した販促ページがすぐに公開できます。
- トリプルにアップロードしたCSSファイルをストアエディタで呼び出せます。
- 高画質な画像ファイルが利用できます。
- CSSやJavaScript、HTMLを活用してページを自由にデザインできます。
「トリプル」のプランは3プランあります。
・300MBプラン ：月額3,000円（税込）
・10GBプラン ：月額5,000円（税込）
・トリプル for B-Space 10GBプラン:月額11,000円(税込）
「B-Space使い放題プラン」のご契約者様であれば、追加料金なしでトリプル容量10GBが使えます。B-Spaceの全サービスとトリプル10GBが利用できるのでお得です。
▶トリプル for B-Space 10GBプラン｜B-Spaceサービス紹介
CSSファイルのアプロード方法
トリプル管理ツールでのファイルアップロード方法を説明します。
ストアクリエイターProトップページで「B-Space・トリプル」メニューにある[トリプル管理ツール]を選択します。
フォルダを作成する
「トリプル管理ツール」画面で「ファイル管理」タブを押して、「＋」ボタン（新規フォルダ作成ボタン）をクリックします。
お好みの名前でフォルダを作成します。CSSファイルをアップロードする今回は、「CSS」というフォルダを作成すると良いでしょう。
ファイルをアップロードする
ファイル管理画面の「アップロード」ボタンをクリックします。
上記の操作により展開したタブの中から、アップロードするデータに合わせて「ファイル」もしくは「フォルダ」を選択します。
コンピューターからアップロードしたいファイルやフォルダを選択します。
確認のポップアップ画面が表示されますので、確認後「アップロード」ボタンを押してください。
ファイルのアップロード確認画面が表示され、アップロードする全てのファイル名が表示されますので再度確認してください。
確認できたら、「即時にアップロード」を押します。アップロードを中止したい場合は「戻る」ボタンを押してください。
以下のように「処理が完了しました」というメッセージが表示されれればアップロード完了です。
トリプル管理ツールを利用したファイルアップロード方法はYahoo!JapanストアクリエイターProでも解説していますので、そちらもぜひ参考にしてください。
CSSの基本構成
CSSがどのように作用するのか、基本構成を説明します。
CSSファイルの作成
CSSを作成するには、まずファイルをXXXXX.cssで作成する必要があります。
index.css、abcdef.cssなどXXXXXの部分は何でも大丈夫です。
注意点としてはHTMLで読み込むファイル名はここで作成したCSSのファイル名と合わせる必要があります。
CSSの構成
CSSファイルの中身は下のような構成となっています。
対象のHTML {
装飾部分①:内容;
装飾部分②:内容;
…
}
対象のHTML {
装飾部分①:内容;
装飾部分②:内容;
…
}
…
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
例えばh1タグ(HTMLの見出し)の文字サイズと文字を赤色に変更する場合は以下のような構成になっています。
h1 {
font-size: 50px;
color: red;
}
「h1」・・・対象になるHTMLを示す部分。
「font-size」・・・何を装飾するか指定する部分(文字サイズ)。
「50px;」・・・指定されたもの(文字サイズ)をどうするかになります。
「color」・・・何を装飾するか指定する部分(文字色)。
「red;」・・・指定されたもの(文字色)をどうするかになります。
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
CSSはこのようなブロックがいくつか続いていきます。
対象のHTMLの指定方法
CSSの各ブロックは「セレクタ」「プロパティ」「値」の3つで構成されています。
先ほどのh1タグを例にあげると以下のようになっています。
セレクタとはh1タグなど、装飾する対象のHTMLのことです。
例えば以下のようにHTMLとCSSを書いたとします。
【HTML】
<h1>文字サイズと文字色が変わる見出し</h1>
<p>pタグの内容</p>
【CSS】
h1 {
font-size: 50px;
color: red;
}
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
この場合、表示は以下のようになります。
CSSでセレクタにh1タグだけを指定したためウェブページ上でもh1だけに装飾されたのです。
このようにセレクタとして指定したHTMLタグだけにCSSの装飾が適用されます。
では、どちらにも装飾したいときはどうしたら良いのでしょうか？
複数のタグに同じ装飾をしたい場合は「,（カンマ）」で区切って指定します。
【CSS】
h1, p {
font-size: 50px;
color: red;
}
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
上記ようにCSSファイルを変更するとpタグも装飾されていることが確認できます。
装飾内容の指定方法
装飾内容は「プロパティ」と「値」で指定します。
プロパティで「何を」、値で「どのように」するかを表現します。
【書き方】
プロパティ: 値;
【例】
font-size: 50px;
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
これを変更したい項目の分だけ書くことでセレクタで指定したHTMLタグを装飾できます。
上記の例だと変更したい項目（＝プロパティ）として
- フォントのサイズ（font-size）
- 文字の色（color）
を指定していることになります。
また、「値」でそれぞれを以下のようにに変更することを示しています。
- フォントサイズ＝50px
- 文字の色＝赤色（red）
プロパティと各プロパティの値の種類は他にもあるのでいろいろ試してみてください。
まとめ
今回はウェブページを装飾するための言語「CSS」について紹介しました。
この記事が理解できれば簡単な装飾であればCSSで書けるはずですし、さらに、もう少し勉強すればどんなウェブページでも装飾することが可能です。
CSSをマスターして、HTMLと組み合わせることで自分だけのオリジナルストアページの作成にぜひチャレンジしてみてください。
HTMLまで自分で書くのは大変だな・・・と感じている方、B-SpaseではHTML作成に便利な各種サービスを用意しています。B-Space契約特典でトリプルも利用できるので、そちらもぜひお試しください。
