Sourireの営業用サイト(準備中)の立ち上げとぶち当たった壁

屋号をあげてしまった以上、営業用兼ポートフォリオのサイトが必要不可欠ということで。

早速SourireWebStudioのサイトを立ち上げました！と、言ってもまだ準備中仕様です(-_-;)先にさせていただくべき事やら子供の事やらで、とりあえずの窓口仕様です。

興味を持っていただけたらのぞいてみてください♪スマホでもちゃんと表示されるはず！！多分！！
このブログのサイドバーにもリンク貼ってます♪

今回またちょもちゃん以外にもキャラクターが生まれました（笑）子供はインスピレーションの宝庫です！

で、今回はそのサイトを立ち上げた時の初心者なりの壁についてつらつら語ります(笑)

Media Queryでレスポンシブに

このブログのスマホ対策は、Worrdpressなのでスマホ用のテーマを作ってユーザーエージェントの切り替えで表示してます。
これはサイドバーとかカレンダーとか、スマホじゃ見にくいし『スマホで見るときにはいらない情報かも？』と思ったんですよね。

で、今回Suirireの営業用(？)は思い切ってレスポンシブデザインに挑戦してみました。まだ準備中バージョンなんで、情報も少ないですからねえ(^^ゞ

HTML5とCSS3とMediaQueryの初挑戦

一気に初挑戦です(笑)無謀？！MediaQueryを使いたかったらCSS3とか必須じゃないですか((+_+))なので見よう見まねで構築しました・・・。

box-shadowとかも使えばいいものを、なぜか画像でやってしまったあたりが初心者のブレですかね・・・。
CSS3は便利ですね！まだまだ活用できてなかったりするんですけど。

HTML5はwordpressとの兼ね合いでなんだか微妙なかんじにタグもheaderとfooterぐらいしか使ってないし(-_-;)
ちゃんとしたサイトに作り直す時までに勉強しなおします！！

IEの対応は『HTML5shiv』でサクッと対応してもらいました。

で、MediaQueryですが。

これがまた予備知識が少なすぎる状態でしたが、コリスさんのブログの『スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル』の記事を参考にして構築してみました。

ここで壁。いや、考え方がわかってなかったんですかね。

デバイスのサイズをmax-width:980とかにすると、新しくレイアウトしなおすのと同じような感覚なんですね！
CSSファイルに@media screen and(max-width:980){以下スタイル}で指定したとたんに、ウィンドウを広げたり小さくしたら、「marginもpaddingもなんかおかしい！！！」とひとりでアタマ抱えてました(-_-)

img:100％とだけ指定したら980以上のスクリーンサイズでえらいでっかいロゴになってみたり(笑)画面いっぱいいっぱいのロゴに一人で笑ってました(笑)max-widthの指定で直りましたけど、何もかんも手探りなので、指定方法があってるのかわからないです(-_-;)

max-width:480でボタンのfloatを解除したかったんですが、これがなかなか適用されなくて悩みまくってあれこれやったんですけどねー。

答えは簡単！
@media screen and(max-width:480)
のところに
@media screen and(max-width:480;)
といらない『；』を無意識でいれてたんですよ。これを取ったら途端に適用されました・・・。
しょーもないミスで１時間は無駄にしてもた・・・(+_+)

単発２ページだけの状態なので、指定は少なくて済むはずなのにやたらとwidth指定が多いんです・・・。これって間違った使い方なんでしょうかねえ。クリーンなCSSじゃないです。
これも少しづつスキルアップとともにいじっていきます(*_*)