HOME > ブログ > Webデザイン > Sourireの営業用サイト(準備中)の立ち上げとぶち当たった壁

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

2012.05.31 カテゴリ:Webデザイン, wordpress

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

早速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;)
といらない『;』を無意識でいれてたんですよ。これを取ったら途端に適用されました・・・。
しょーもないミスで1時間は無駄にしてもた・・・(+_+)

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

表示確認したらIE8以下でbackgroundで指定した画像が表示されてない!!

これがまた。なんでやねーーーん!なノリでした。

bodyに指定した画像は表示されてたんですよね。でもボタンやイラスト部分の画像がごっそり消えてて、何にも無い空間になってました。

で、いろいろ調べたらちょっと昔の記事ですけど『IEで背景画像が表示されない云々』という記事発見!
すぐに自分のコードを確認したところ、確かに
background:url(img/画像ファイル)no-repeat・・・・
と、”no-repeat”の前に半角スペースを空けてなかったんですよ。

で、半角スペースを入れたらあら不思議(笑)あっちゅーまに画像が表示されました♪

IEって・・・IEって・・・・(泣)

初心者に優しくなーーーーい!!!

とりあえず仕様なので、今度はきちんとしたものを作ります!
その時にはまた子供のお絵かきから新しいキャラクターが生まれてそうです(笑)

blog comments powered by Disqus
ホームページ制作・ネットショップ制作・ブログカスタマイズなどのお見積りはお気軽にどうぞ!|女性デザイナーによる女性・子供向けかわいいホームページ制作(神戸・明石)Sourire web studio. お問い合わせはこちら

PAGE TOP