メディアクエリでレイアウト

とりあえず、リニューアルに向けてざっくりしたレイアウトを決めました。

http://mcre.ojaru.jp/test/

メディアクエリを始めて使ってみたわけですが、商用サイトにするわけでもないのでPC用は幅970pxの2列、もう一方は解像度800pxを割ると1列レイアウトにしました。PCのブラウザで幅を広げたり狭めたりすれば確認できます。モニタが古い解像度800だと当然無理ですがｗ

1列使用になると「sid」の部分が消えるわけですが、今もそうですがテキストだけじゃ殺風景という理由で広告貼ってるようなもんなので1列になったら別にいらないですよね。

こういう解像度にあわせてレイアウトが変更することに興味がある人はメディアクエリで検索かければ私の説明なんかよりはるかに有意義なのが見つかるので探してみてください。

次回はロゴ作成でも着手しますかね～。

レスポンシブＷＥＢデザイン参考まとめ

どうにも久しぶりで別段リピーターで観てる人なんていないでしょうが、どうにもフリーランスになってから仕事とプライベートの境があいまいでダラけ率上がっており、漫画の描き方はおろか本職であるホムペ作りの情報収集もおろそかになってきてて、我ながらあまりにも酷いと思ったので漫画考察のリニューアルを通して、それぞれの作業時間を取り戻そうという動きと相成りました。

まぁ、突発依頼が多いのでどこまで作業時間作れるか不明ではありますが、とりあえず始めてみます。

まずリニューアルの前提としては、最早何もしていない漫画考察に未だ1日100アクセスほど頂いているので、元々は自分の絵の上達の予習・復習の場としてやっていたものですが現状自分が絵に割ける時間は後回しにしなければいけない立場になったのでユーザーにとって絵･漫画の上達に役立つ記事をまとめるところにしてみようか検討中です。

自分自身としてはひっそりあったホムペ考察方面での血肉としていけたら良いなと思ってます。なので当分はホームページ作成にも興味のある人なら多少読める内容にはなるのかも？

で、最初のお題としてリニューアルデザインはレスポンシブＷＥＢデザインを検討しているわけですが、アクセス解析を見る分にはユーザーのブラウザ環境がＩＥが一番ですが2位、3位にサファリとアンドロイドブラウザが入ってきてるのでやはりスマフォ・タブレットでの閲覧者が多いと推測されるためＰＣ・携帯機器両方で最適化されることを前提としたレスポンシブＷＥＢデザインを調べていこうとなったわけです。

とりあえずさくっと検索かけて出てきたところです。

概要から主な作成方法まで説明
http://ascii.jp/elem/000/000/700/700611/ http://webdesignerwork.jp/web/responsivewebdesign/

レスポンシブＷＥＢデザインで気にいったサイトのリンク
http://responsive-jp.com/

レスポンシブＷＥＢデザインに対する留意事項
http://web-tan.forum.impressrd.jp/e/2013/10/18/16248

これらを参考に次回以降実際の作成工程奈緒を掲載していく予定です。・・・・予定ですｗ