ヒヤッとした瞬間
明日とある企業さんと打ち合わせすることになりました。
そんなわけで明日あわてないようにガソリン入れに行ってきたんですが、セルフサービスの機械にお金を入れてガソリンをいれようとするとふと何か落ちる。
うん？
なんて感じで見てみると仕事の大切なデータが入ったUSBが落ちてる…。
普段確実に落ちないようにバイクの鍵につけてるんだけど何かの拍子に外れたみたいな…。
はずそうとしてもはずせないのに何故はずれたんだ？
なんにしても本当に運が良かった。
もしこれで失くしたりしたら…おお怖い怖い…。
改めてもっと注意深く生きていかないとななんて感じた出来事でした。
話は変わりますが、皆さんは年金払ってますか？
果たして40年後もらえるかどうかわかりませんが、とりあえず払わないとな…。
ちなみに私はまだ払ってませんよ。
払いたいけど払えない事情がある。
今月末にはたかおクリーニングさんの報酬が入ってるはずだからそれで少しずつでも解決して行かないとな…。
影つきボックスを作る
今回は初の小技紹介に挑戦してみようと思います。
影つきボックスじゃ通じないでしょうか？影つきの枠組のことです。
まずは簡単な方法から紹介しましょう。
まずは完成品がこちらの簡単なものですが、これは本当に簡単な方法でborderを使ってます。
以下のものをCSSに書くことで実現出来ます。
HTML
<div class="shadowbox">
<center>SAMPLE</center>
</div>
CSS div.shadowbox
{
background-color='#ffffff'; width='300px'; height='50px'; border-style: solid; border-width: 1px 3px 3px 1px; border-color: #c0c0c0 #606060 #606060 #c0c0c0;
}
しかし、これにはちょっとした問題があります。
仮に背景に模様がついたらどうなるか？
今回は影の部分が狭いのでそこまで気になるかどうかはそれぞれの感じ方次第なんですが、影の部分の裏が透けないのでやや影に見えなくなります。
ここで次の方法を紹介します。
今度は透過処理をした画像を使用する方法です。
まずは次のような画像を用意します。
この画像ファイルですが、
こんな感じで透過処理をしてあるので裏が透けて見えます。
(ちょっとわかりにくいかな？)
次にソースコードです。
HTML
<div class="shadowbox2">
<div class="contents">
<center>SAMPLE</center>
</div>
</div>
CSS
div.shadowbox2
{
width:100px; htight:100px; background-image:url("shadow.png")
}
div.contents
{
width:92px; height:92px; background-color:#ffffff; position:relative; top:3px; left:3px;
}
では実際に模様に重ねてみて見ましょう。
こんな感じになります。
ここで一つだけ注意なんです。
たまに間違える人がいるんですが、影を作ってるほうのdivタグのスタイルを画像ではなくopacityなどで透過すると中のボックスまで透過されるのでそこだけ注意してください。
まぁ、こんな感じで小技初紹介してみましたが、グダグダですね…。
今後もっと精進させていただきます。
アメブロはじめました。
とはいっても内容は恐らくこっちとほとんど同じですよ？
まぁ、いろいろ書きこめるほど力量が出てきたらそれぞれ別のジャンルで書いてみても面白いかなとも思います。
まぁ、というわけでとりあえずインポートが済んで確認してたんだけど一軒目からこんなの書いたっけ？
あれ？
これって、下書きじゃね!?
というわけであわてて下書きを削除…。
ホントびっくりです。
まぁ、アメブロに関してですが、まだデザインが白紙状態なのでいろいろとカスタマイズしてみようと思います。