前回floatという技ついてご説明をしていました。
記事はこちら→http://www.ryuumu.co.jp/ryuumu/stuffblog/e338.html
今回はもう少しだけ踏み込んだお話をしたいと思います。

まずbodyタグ内に、以下のように書いてみましょう。



こう書くと、ボックスが縦に並びます。
ここまで前回と一緒です。
今回も、ボックスに色をつけたほうが分かりやすいと思います。
次にスタイルシートの部分に



このように書きます。
前回と違うところは#box_bのfloatがleftではなくrightになっています。
実際書いてボックスが並んだところを見てもらえれば早いと思いますが
前回はboxAの左側にboxBがぴったり並んでいたと思いますが
今回はウィンドウの左端にboxAが、右端にboxBが表示されていませんか？
boxAは左側に回りこませ、boxBは右側に回りこませたので、
このようになっています。

もう一つ例を挙げてみましょう。bodyタグの中に



このように書くまでは同じです。
次にスタイルシートの部分に



こう書いてみてください。
いままで一番上に書いていたboxAが左側に来ていましたが、
boxBが左側に来ていますね。
ソースを見る限り順番で言えばboxA→boxB→boxCといった順番に
並ぶはずですが、floatを使えばこのような事も出来てしまいます。

デザインをする上でとても便利ですが、使い過ぎると
ソースがとても複雑になってしまいますので、
回り込みを行った次の要素で回り込みを解除し忘れてデザインが崩れる、
ということもありますので注意して下さい。
また、一部の古いブラウザによってはおかしな表示になる事もあります。

こう書くと制限ばかりのように思えますが、前回も述べたように
いまやデザインを行う上で無くてはならない方法ですので、
是非たくさん使って練習して下さい！

ではまた次回！

こんにちは、ウェブクリエイターです。
いよいよスマートフォン購入をリアルに見据え、実機を見て回る日々です。
欲しい機種がきれいに売り切れているのは…今は時期でないという天からのメッセージなのか…


ところで、今日はアクセス解析の話を。
携帯端末からPCサイトへアクセスする方も増えましたしね。

Googleアナリティクスを設置しておきたいというお声も以前より大分多くなってきました。




無料だし細かく分析できるし言うことない…ように思えますが、細かく分析できすぎて一体どうなっているのかさっぱり！というお声も、増えております。はい。

アクセス解析は常に動向をチェックするためにも必須ですが、時間が経ってからの蓄積データも大きな財産になります。
シンプルな項目をチェックするためのアクセス解析もありますし、アクセス解析（を含むSEOですね）のサポートもあるので、どうしようかなと迷ってらっしゃる方は是非設置しましょう！
企業サイト情報サイト、ECサイト…どんなサイトにもデータは必要です。


サイトを既にお持ちで、アクセス解析を定期的にご覧の方というとやはりかなり限られてきます。
頻繁にチェックなんてできない方も多いのですから、臆せずスタートを切ることをおすすめします。

見ていくと奥深さが分かって、面白くもありますよ。


サイトに不可欠なアクセス解析のこぼれ話でした。

　今回ご紹介するサイトは、京都の木屋町で焼肉・和食をされている
　圓様のWebサイトです。

　築120年の京町屋で焼肉や和食をされており、京都らしい風情を美味
　しい食事と共に楽しめるお店になっています。

　高級感漂う店構えと料理でお値段が気になるところですが、リーズ
　ナブルなコース料理等もご用意されており、気軽にお食事する事が
　できます。

　ランチメニューもご用意されており、リーズナブルなランチコース
　から贅沢な気分を味わえるランチコースまでご用意されています。

　アクセスも大変便利ですのでお昼休みや仕事帰り、買い物帰り等
　どんな時にでもお立ち寄りができると思います。普段のお食事だけ
　でなく、特別な日を過ごしたい時にも是非一度足を運んで頂きた
　いと思います。

　賑やかな繁華街の中に落ち着いた雰囲気と静かな時間が流れる
　大人の空間を提供されていますので、料理以外もぜひ楽しんで下さい。
　場所や営業時間はこちら。
　http://www.en1111.co.jp/information.html

　店内も綺麗でテーブル席だけでなく、掘り炬燵のお部屋等もあり、
　セレブな気分を味わえるようになっています。
　ホームページにも店内写真を載せられていますので是非ご覧下さい。
　http://www.en1111.co.jp/room.html

　スタッフブログではお得な情報やスタッフさんのプライベートな
　ブログ等が書かれていますので足を運ぶ前に一度ご覧になって下さい。
　http://www.en1111.co.jp/content/c5.html

　「京・木屋町　圓」様のサイトでした。
　http://www.en1111.co.jp/

こんにちは、ウェブクリエイターです。本年度もどうぞよろしくお願いいたします。
年末年始の帰省、移動中ずっとAKBを聴いていました。かわいいなあー

さて、前回ブログのことをちょっと書いて思い出したことが。
ブログやＣＭＳには画像（写真）がつきものだなということです。

ＣＭＳは画像をアップするのも簡単。
簡単に自分のサイト内でアップできるのが魅力なのですが、そうはいっても『画像を用意するのが大変』だったりする場合もあります。

色んなサイトやブログを見ていて、そこに掲載されている画像をクリックすると、ものすごく大きな画像が新しいウインドウで開いてしまって
ローディングに待たされたor大きすぎる画像に腰を抜かしそうになった。
そんな経験はないですか？

デジカメで撮った写真はもちろん、携帯端末で撮ったものでもスクリーンいっぱいになるぐらいのサイズになったりします。

そんなサイズの画像ばかりアップしていたらブログの読み込みは遅くなるし、サーバの容量もどんどん減っていくし…
あんまりよいことはないですね。


画像加工ソフトを持っていればそれを使って整形できますが、持っていないという場合にはこんなwebツールもあります。
その名も『Web上で画像を縮小』…すごいストレートな名前。


http://myct.jp/resize/


探し物をしていた時に見つけたのですが、お手軽に画像サイズだけ変えたい時には結構便利かもしれません。
縮小テストをしてみたらある程度は劣化していったので、限界はあるようですが。


なんでも使えればいいというわけではないですが、無料のWebツールもなかなか便利ですね。

今回はいまや無くてはならない存在！？
floatについてのレシピをご紹介します。
floatとは回り込みのことです。
左、または右に寄せて配置出来ます。
　
まず



こう書いてみると、ボックスが縦に並びます。
それぞれのdivに色をつけてみると分かりやすいと思います。
ボックスAとボックスBを左右に並べて表示させたい場合はどうするのか？
という時にfloatを使います。
スタイルシートの部分に



と書くと、
ボックスAが一番左に寄って、その右隣にボックスBが配置されるようになります。
ただし、この状態だとボックスBの後に書いているボックスCも
ボックスBの右隣に回り込んでしまいます。
つまり3つとも横一列に並んでしまいます。
これを防ぐにはボックスCに解除指定のスタイルシートを記述します。


これで完璧です。

floatにはrightとleftとnoneが指定出来ます。
right→後に続く内容をその左側に回り込ませる
left→後に続く内容をその右側に回り込ませる
none→配置を指定しない、初期値
という指定になっています。
noneは初期値ですので、あまり指定する場面は無いと思います。

また、clearにはrightとleftとbothとnoneが指定できます。
clearに関しては、
right→右寄せを解除
left→左寄せを解除
none→初期値、何もしない
both→左寄せ、右寄せされた全ての回り込みを解除する
という指定になっています。
bothは右も左も両方解除してくれる、という便利な値なので
bothは絶対覚えておいて下さい。
　
floatはとても便利でもう少しお話を・・・
と思いましたが、長くなりそうなので次回にします！

ではまた次回！