* You are viewing the archive for the ‘TIPS’ Category

猛暑ですね

新人Gです。
I 市にもついに猛暑がやってきました。土日は夜中に暑くて起きてしまい
熟睡できなかったです。暑さにやられぬよう、体力作りせねば・・・

サーバ室からBUG??

新人Gです。
社員Mさんがサーバ室からBUGを発見?!
どんどん発見してサーバ室の品質を良くしましょう。。
RIMG0013.JPG

花粉症対策??

新人Gです。
毎年、関東にいる知り合いの1人が花粉症になっています。
このままだといつか自分も・・・
と思うと危機感を感じてきました。春は一番過ごしやすい季節なのに
花粉症という物のせいで嫌いにはなりたくないものです。
 花粉症にはヨーグルトが効くそうです。ということは毎日、ヨーグルトを
食べれば花粉症対策としては有効なのでは??
試してみます。

世の中せまし

新人Gです。
昨日、買い物をしていると偶然大学時代のゼミ生と
再会しました。関東という毎日お祭りのような人ごみのなかでも
こういった再会があると思うと世の中せまいなということを実感して
しまいます。いろんな意味で悪いことはできないですね。。

旧友との再会

新人Gです。
土曜日に中学校の同窓会をしました。
中には10年ぶりに再会した人もいて特に女性はルックス面で
変わる生き物であることを実感しました。
私自身、同級生にルックスはダントツで中学校の時と
変わってないねと言われたのですが・・・
それを良い風にとってよいのか、悪い風にとってよいのか・・・
ただ、私自身同級生の誰よりも内面的に変わったことは
自覚しているので何か「変わってないね」と言われた一言が
妙に嬉しかったです。
変わってない部分(性格)あるということは個性があることですし
ある意味、[自分を持ってる]ことなので、
まぁ~自分を見失ってはいないかなと。。
集まった同級生みんなが
それぞれの道でそれぞれの悩みがあり、がんばっていることを
聞いてよい刺激になりました。ほんとに仲間って大事だなと
思いました。かなり良い休日を過ごせました。
みんな、ありがとう!!

主婦のエネルギー

新人Gです。
毎週日曜に近くのスーパーで買い物をしています。
昨日、いつも通りの時間(だいたい15:00頃)に
買い物に行くと買い物客が全くいなく、商品もほとんどない状況
でした。何があったんだと思っていたら、知らないおばちゃんが
いきなり話かけてきました。その一言目が「どんまいだね。」
「今日、9:00~12:00間タイムセールがあったんだって」
と言われ。。納得しました。
主婦は日曜にもたくさんのエネルギーを使っているんだなと
思った休日でした。

肩こりは天敵

新人Gです。
私は肩こり持ちです。
肩こり持ちのみなさんに肩こりの予防策を紹介します。
1.朝起きたら、まずは水を飲む
  ー> 血液の循環がよくなるそうです。
2.風呂はシャワーで洗い流すだけではなくお湯に
 5分~10分体を浸かる。
  ー> 血液の循環がよくなるそうです。
ようするに、血液の循環を良くすれば肩こりは良くなるみたいです。
最近、上記の2番を実行しているのですが、かなりよくなりました。
肩こり持ちの人がいれば是非、参考に・・・

忘年会の意義

新人Gです。
忘年会はなんであるんだろうと調べたところ、どうやら鎌倉時代に生まれたらしいです。
しかし、江戸時代~明治時代では「忘年会」よりもむしろ「新年会」が主だったみたいです。
そして、現在(平成)!どちらかというと『忘年会』のほうが盛り上がっている気がします。
人の感性は「古きよき時代」に戻ったのかな?
時代は繰り返す。。なんて・・・

画像関連のCSS TIPS

渡部です。
最近はCSSレイアウトでコンテンツを作ってます。
CSSはブラウザによって解釈が異なることが多いので、けっこう悩まされるのですが、先日も作っていて画像関連ではまったことがあったので、その件について書いてみようと思います。

box要素に画像を並べると、妙な余白が出る件

backgroundを指定しているbox要素に画像を並べていたのですが、なぜか余白が空いてしまう現象が起こりました。(最初は背景画像もあいまってその現象に気が付かなかった・恥)

HTMLコード
<div id=”header_menu”>
<img src=”images/menu.gif” width=”90″ height=”21″>
<img src=”images/menu.gif” width=”90″ height=”21″>
<img src=”images/menu.gif” width=”90″ height=”21″>…
</div>
CSSコード
#header_menu {
margin-top: 5px;
height: 21px;
background: #333;
vertical-align: bottom;
}
このコードでの表示
menu_s1.jpg

調べてみたところ、vertical-align属性と画像の垂直位置が妙なことになっていた模様。
vertical-align属性はtop, middle, bottomに加えて、baseline, text-top, text-bottomというプロパティがあるのですが、どうやら画像vertical-alingはデフォルトではtextのbaselineに合わされているようなんですね。
結局画像のcssにvertical-align:text-bottom属性をセットして無事解決!

追加したCSSコード
#header_menu img{
vertical-align: text-bottom;
}
CSS適用後の画像
menu_s2.jpg

Continue Reading

スタイルシートを利用して画像に枠をつける小技

こんにちは。渡部です。
今日はスタイルシートを利用してこんな感じの枠をつける小技をご紹介します。

PNG Overlayという技法


 

PNG overlayという技を応用しているのですが、この技法でJPEGやGIFの上にマスクのような感じで透過GIFのフレームを乗せることができます。

まずHTMLこう書きます。

<div class=”frame”>
<img width=”157″ height=”102″ src=”./food_photo.jpg”>
<div class=”photo_frame”> </div>
</div>

次にCSSは以下のように定義します。

.frame {
position:relative;
margin:5px;
}
.photo_frame {
background:url(‘./photo_frame.gif’) no-repeat;
overflow:hidden;
position:absolute;
top:0px;
left:0px;
width:180px;
height:105px;
}

たったこれだけです。

原理としては、positionという要素を上手く使います。まずはrelative属性でブロックを囲い(.frame)表示させたい写真を置きます。フレーム画像は absolute属性を付けることで(.photo_frame)、最初に置いた写真に重ね、枠の付いた写真になるといった具合です。
※枠となるGIFとクラス名は適当に命名してください。

言われてみればなるほどな、という感じ。これならわざわざPhotoshopなどで加工しなくても1度定義してしまえば再利用が可能なので、便利だと思います。

Continue Reading