ウェブ制作.net

このWebサイトの制作、更新を通じてWeb制作について学んだことと、Web制作会社に仕事をお願いするに当たって学んだことを書いていきます。

画像の脇にテキストを書く

画像ファイル(写真とか) の脇に解説を書くようにする場合には、CSSで float:left; とか float:right; と
書けばOKです。
画像を左に置く場合にはfloat:left;、右に置く場合にはfloat:right;です。

ウェブ制作会社カテゴリの記事でやっているように、
<a href="http://www.tifana.com/?coremine" title="ティファナ・ドットコム" target="_blank">
<img src="http://www.xn--gckc5l536jj8c.net/web/images/www_tifana_com.jpg" alt="ティファナ・ドットコム" class="image_left" /></a>
とするのが良いかな・・?

CSSファイルの中身・・
.image_left{
float:left;
}


ただ、これをやってしまうと、画像ファイル以降の全ての物が画像の右側に寄ってしまうので、floatを解除させるclearというスタイルを設定します。
・・・ここがいまいち分からないのですが、何度か試した結果、↓でうまくいったので、とりあえず1手法ではあります。。。

<img src="http://www.xn--gckc5l536jj8c.net/common/images/spacer.gif" class="after_images" alt="" />
とスペーサー画像をいれたうえで、after_images という CSSのclass に対して、clear:both; なる設定をします。

CSSファイルの中身・・
.after_images{
clear:both;
}

一応はこれで大丈夫でした。


簡単にコーディングの流れを書くと、画像の横に文章を書くなら、
画像を呼んでfloatの設定 → テキストを書く → スペーサーでclear:both;です。
プロの人から見たら違うんだろうけど・・・動けばOK!


いいな!と思ったら投票をお願いします。
ティファナ・ドットコム

ティファナ・ドットコム
ぱっと見の第一印象が良かったです。
TOPページ上部にある雲がカッチョイイというか、見えないオシャレみたいな感じで好感が持てました。
この会社も制作実績が凄いところばっかりですが、採用情報の中にある社長さんのメッセージがとってもスキです。
熱い!とっても熱い感じなんです。体育会系?みたいな。

こんな会社に入っていたら自分はどうなっていたんだろうなぁ・・と考えちゃいます。
(楽しそうで、社員さんがうらやましい)
仕事でどうのこうの言う前に、個人的に興味をもっちゃう感じだよなぁ。


いいな!と思ったら投票をお願いします。
Google Analytics その後・・・

以前アクセス解析 - Google Analytics -で触れたGoogle Analyticsですが、一応ログが出てきました。
生ログ?を見ると沢山あるアクセスが殆ど消えています。
何か問題があるのでしょうか・・・。
各ページに貼り付けたJavaScriptがGoogleにアクセス情報を送るので、実は今まで来ていたアクセスの大半はクローラーだったとか???


いぁいぁ、それは辛い。ちょっと色々調べてみたいと思います。
問題が解消して正確な情報が見えるようになったらキャプチャを乗せたいなぁ・・と思います。


いいな!と思ったら投票をお願いします。