PC専用クラス・スマホ専用クラス&タブレット専用クラス

キャプチャ画像

SIRIUSのレスポンシブテンプレートにはPC&iPad(タブレット)でのみ閲覧可能なクラス(pc_contents)iPhone(スマホ)でのみ閲覧可能なクラス(sp_contents)がそれぞれ最初から用意されてます。

 

しかしながらカスタムテンプレート【Volar】では、
iPad(タブレット)でのみ閲覧可能なクラス(tab_contents)も追加で設定してあります。

 

これらの使い分けについて簡単にご紹介いたします。

 

”クラス(class)とid”とは?

特定の一部だけを装飾したい場合、その部分にclassidを付けておくことで装飾指定を一元化できます。
※classの名前はドット(.)で始まりidはシャープ(#)で始まります。

 

たとえばスタイルシート(【テンプレート】→【スタイルシート編集】で開く画面)内に『f_red』というclass名があったとします。

 

そこに書いてあるのが

 

.f_red {

color: red;

}

だったとします。

 

これは『f_red』というクラス名がついてる部分はフォント色を赤にする(color: red;)というものなんですが、これを行全体のテキストに適用する時は、記事内に

 

<p class="f_red">私の好きな色は赤です。</p>

 

こんな感じで書きます。
(※pは行を意味します)

 

行全体ではなく行の中の一部だけにclassを設定したい時、
たとえば上の例なら「赤」というテキストだけフォント色を赤にしたいような場合は

 

私の好きな色は<span class="f_red">赤</span>

 

このように”span”という文字を付けて書きます。
(spanについてはあまり深く考えず”文の中の一部の装飾にはspanを付ける”ぐらいに思っておくといいでしょう)

 

そしてこのclassは繰り返し使えます。
つまり他にもフォントを赤くしたい箇所があれば何度使ってもいいのです。

これに対しidは一度しか登場しません

 

たとえばヘッダー部分に使われてる<div id="header">なんかはそのいい例です。
ヘッダーはページ内に2つ出てくることはありませんから。

 

たとえばここで『ヘッダー部の背景色は赤にする』なんて設定を付けたい場合はスタイルシートに

 

#header {

background-color:red;

}

というふうにドット(.)ではなくシャープ(#)をアタマにつけて指定します。

 

どこにクラスをつけてどこにidをつけるかははっきり言って慣れです。

 

迷ったらクラスを付けておけば間違いないです。

 

pc_contentsとsp_contentsについての詳細はコチラ↓の記事をごらんください。

 

pc_contentsとsp_contents - SIRIUS(シリウス)でホームページ作成

レスポンシブデザインテンプレートで”PCとスマホで表示分け”可能なスタイルをご紹介します。


tab_contents

SIRIUSのレスポンシブテンプレートの設定だと、iPad(タブレット)でのブラウザ表示は
PCブラウザ用の設定が(ほぼ)そのまま使い回される(?)ようになってます。

 

もちろんiPad(タブレット)上で”PCブラウザと全く同じレイアウト”で表示されるならそれはそれで問題ないんですが、SIRIUSの場合、iPad(タブレット)用に若干サイズを縮めて表示するというちょっと特殊な仕様になっています。

 

そのため妙なサイズ感で表示されてしまう時がたまにあります。

 

それに”マウス操作”での指示をページ内に盛り込む時なんかは本来ならPCブラウザではマウス操作iPad(タブレット)とiPhone(スマホ)ブラウザではタップ(or スワイプ)操作と表示分けしたいのに、SIRIUSデフォルトの設定だとiPad(タブレット)ブラウザでも”マウス操作”の文言が表示されてしまったりもします。

 

こういった”弊害”がまれに出てくるため、カスタムテンプレート【Volar】では
新たにiPad(タブレット)用のクラスtab_contets』を設けてあります。

 

これに伴いカスタムテンプレート【Volar】では、
pc_contentsというクラスはPCブラウザ”専用”の設定に変更してあります。

 

つまり今まで通りiPad(タブレット)での表示時もPCブラウザ用の設定と同じものを使い回す場合は、

"pc_contents tab_contets"

といった感じで、”pc_contents””tab_contets”半角スペースをはさんで並列表記するようお願いしてます。

 

※サンプルコード

コード

<div class="pc_contents tab_contets">
PCとタブレットのみこのテキストが表示されます。
</div>

 

もしもPCiPad(タブレット)それぞれ表示を変えたい時は、PC用は"pc_contents"、iPad(タブレット)用は"tab_contets"と分けて指定します。

 

※サンプルコード

コード

<div class="pc_contents">
PCのみこのテキストが表示されます。
</div>
<div class="tab_contets">
タブレットのみこのテキストが表示されます。
</div>

 

ということでiPad(タブレット)iPhone(スマホ)両方のブラウザで同じ表示設定にしたい場合は、"tab_contents sp_contents"となります。

 

※サンプルコード

コード

<div class="tab_contents sp_contents">
PCではこのテキストは表示されず、iPad(タブレット)とiPhone(スマホ)でのみこのテキストが表示されます。
</div>

 

結局のところ、今まで通りに使いたい時は、PC(およびタブレット)用に

<div class="pc_contents tab_contets">~</div>

 

スマホ用には

<div class="sp_contents">~</div>

という書き方になるということです。

 

ちょっと面倒かもしれませんが、ご了承ください。

 

SIRIUSデフォルトの設定本来のpc_contentsの設定)に戻すこともできます。

 

戻し方はマニュアルサイトでご覧いただけます。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

(※「SIRIUSでホームページ作成」という姉妹サイトの専用ページが開きます)
 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替