レスポンシブウェブデザインについては　ネット上でも多くの情報が
散乱？しておりますね

 

でも　シリウスカスタマイズとして　当てはまると思われる解説サイトは
僅かです

 

そんな中からやっと見つけた
メディアクエリレスポンシブウェブデザイン記述コード

 

でも　レスポンシブウェブデザイン構造を組み込み以降
作動はするがなんかいまいち　おかしい？

 

という事情でしょうか

 

 

当サポートへ

 

多くの質問がよせられておりますが

 

さてはて　なぜ？　うまく行かないんでしょうか

 

ネット上のレスポンシブウェブデザインコンテンツ解説は
当事者の環境で理解された事情が公開されているのであって

 

異なる環境に一つの情報をあてはめることは出来ない

 

ということです

 

 

 

表現のスタイルは結果として同じようなもの

 

でも　構築が　設定が異なる事でややの表現の違いが表れてしまう

 

 

当サイトはシリウスに適合する範疇での解説ですが

 

レスポンシブウェブデザイン構造を知るうえで

 

まずは　おおまかな基本から理解して下さい

 

responsive web design

---

 

スポンサーリンク

 

 

 

どんな表現なのか？なぜ必要か？

 

レスポンシブウェブデザインとは PC タブレット ois スマートフォン等々
画面のサイズは各種異なります

 

ＰＣで表示される構成を基準として　ページレイアウトをその画面サイズに
適合表示される柔軟な形状を意味し　スマートフォンで閲覧すれば　
パソコンサイズの隠れ画面があるのではなく　画面にぴったりと
サイト構成が整い配置されている

 

全てのデバイス毎に適合標示されるのですね

 

 

サイトを訪問する方のデバイスにぴたりと合わせることが
読者の求めている環境と理解され
グーグルの検索ランキングを決める重要な要素として含まれることで

 

端末に適したウェブサイトやアプリが　今後　検索結果の上位に
表示されるようになるのです

 

---

 

レスポンシブウェブデザイン実行

 

レスポンシブウェブデザインを実行するには　HTMLファイルを
CSS3　Media Queries　メディアクェリで各デバイスへの指示を指定し
ページのレイアウト・デザインをコントロール調整します

 

htmlを

 

スタイルシートで指定すると

 

スマートフォンサイズで表示

 

ipad Tabletsサイズで表示

 

パソコンサイズで表示

 

 

以上は　通常のレスポンシブウェブデザインとしての解釈です

 

この仕組みはシリウスのデフォルトＣＳＳへも導入が可能ですが
構造が異なるためか　ネット上で言われる説明に準じて
組み込んでも何かしらの障害を知ることになります

 

 

 

シリウスへレスポンシブウェブデザイン構造を組み込むことは
容易にできます

 

当サイトでは　一カラム　2カラム　3カラムへと導入すれば
即反映作動が確認可能なレスポンシブコードを用意しておりますが

 

その段階でもレスポンシブウェブサイトとしてご活用はいただけます

 

けれど　カスタマイズ以前の範囲でのスタイルです

 

初期段階では充分と判断されていても　以降あちこちのサイトを
拝見すれば不足に気が付くことでしょう

 

事情はご理解ください

 

初期段階はシリウスで例えるならデフォルト状態

 

以降　自分の望むスタイルに変化させてゆくためには　
設定やら調整など相応のカスタマイズをしなければなりませんが
最初からすべてをレスポンシブコードに加えることは
みなさんの目標が異なり固定化できないのです

 

初期コードでスタイルを確認し　以降のカスタマイズへ進んでください

 

 

レスポンシブウェブデザインのカスタマイズ情報は
今後ともできる限り追加致しますので望むスタイルを
ご選択してください

 

 

 

ご案内は巻末のエントリー関連記事より

 

 

レスポンシブウェブデザイン設定事情を理解しよう
SIRIUS　シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ