愚者の経験

「また今度」はほとんどこない

日別アーカイブ: 6月 1, 2012

ADODB.RecordsetのFilterは1024文字まで

ADODB.RecordsetのFilterに文字数制限ありました。
1024文字を超えるとSet時に「オートメーションエラーです。原因を特定できません。」みたいな
エラーが出ます。なぜかFilter時にはエラーが出ていないような気が…

駆け足で投稿件数を100件にしました。これからもがんばって更新します。

広告

CSSで折り返しても線を引く方法 2

前回の続きで「折り返した後にも線を引く方法」ですが、ずばり

『コンテンツ(divタグ)一つ一つがwidthを無視した長い線を上に持てばいい』と気づきました。
それぞれのdivの「border-top」がかなり長いようなイメージです。

折り返す前はtop位置がそろえて1本の線に見せます。
折り返した後でもそれぞれの線で区切って見えるというわけです。

前々回の投稿で紹介したdivタグを「display:inline-block」で横並びにする
ことで折り返し後のtop位置を合わせます。

以下が全体のソースになります。擬似要素のbeforeを利用していますので
残念ですがie6とie7には対応できません。

 body {
  background-color:#39f;
  text-align:center;
 }
 #main {
  background-color:#fff;
  margin:0 auto 0 auto;
  width:90%;
  overflow:hidden;
 }
 div div:before{
  display:block;
  height:5px;
  background-color:#f93;
  content:””;
  margin:-6px -200%;
  top:0;
 }
 div div {
  display:inline-block;
  width:300px;
  border:1px black solid;
  margin-top:5px;
  vertical-align:top;
 }

無題 1

   

fadalk 

    

fajldkfaj

   

faskldjfa

   

fkja;;lifd

   

kjfdaoijf

   

fjdisa;

まずポイントとなるのは親div(#main)の「overflow:hidden」です。
これがないと思いっきり横に伸びた線が表示されてしまい横スクロールバーも
表示されて不恰好です。これで余計なものは消します。

次のポイントは子div(コンテンツを想定)の「margin:-6px -200%」です。
マイナスマージンですね。ここら辺は私もまだ勉強不足でなんとなくしかわかってません。
余白をマイナスにとって幅や高さを増やす感じです。
またbefore/afterセレクタは「contents」を指定しないと出てきません。
線が途中で切れてしまう場合はマイナスマージンを多くとってください。

cssの小技が多すぎて覚えるのが大変です。

CSSで折り返しても線を引く方法 1

こんな需要がありました。
■ ←divタグ(コンテンツが入っている、高さ不定)
——- ←線(タグはなんでもいい)
として説明します。

基本レイアウトが
——-
■ ■ ■
——-
■ ■ ■
——-
■ ■ ■

となっています。この状態で画面を狭めると幅が足りなくなって折り返しますが、
折り返した時にも横の区切りが見やすいように線を引きたいというものです。

つまり折り返した時に2列になった場合
—–
■ ■
—–
■ ■
—–
■ ■
—–
■ ■
—–

としたいということです。
線の数が増減しますので、divやspanでbackground指定して書くのは難しいと思います。
線を最大数配置して「@media screen」でサイズ判定し、「display:none」と「display:block」を
切り替えても可能ですが、ものぐさな私は代案を考えました。

その方法は続きの投稿で…引っ張っておきながら大したことないです(笑)

divタグを横に並べる

divタグを横に並べる際、よく「foat:left」を使っているサンプルを見かけます。
横幅を固定してページを作る場合はさほど気になりませんでしたが、

横幅を縮めてコンテンツを折り返した場合「float:left」は高さを考慮して詰まります。
参考URL:http://www.understandard.net/css/css008.html
なので折り返してもレイアウトを保てるようにするには
「display:inline-block」を指定するといいです。これでブラウザの幅を狭められても
ある程度見やすさを保てます。

asdfaa

body{
background-color:aqua;
text-align:center;
}
#body {
background-color:#fff;
width:90%;
   max-width:1040px;
margin:5px auto 5px auto;
}
#body div{
width:300px;
border:1px black solid;
display:inline-block;
margin:5px 0 5px 30px;
text-align:left;
vertical-align:top;
   margin-left:30px;
   /display:inline;
   /zoom:1;
}

fasddfa

fasddfa

fasddfa

fasddfa

fasddfa

fasddfa


多分タブレットやスマートフォン向けの対策にもなります。
div#bodyを中心に寄せるために左右のmarginを「auto」に設定しています。