学院开展2023-2024学年第二学期本科生劳动教育 幸福宝导航官网入口绿巨人与玉树阿尼丹贝牧民文化生态保护有限责任公司共... 2020级地理科学班召开人文实习动员大会 幸福宝导航官网入口绿巨人联合马克思主义学院、博雅社区开展创新创业大赛...
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう?ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は?って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容(だと良いな)! じゃあまずは最初に確認しておきたい基本的なことか
案件も終了近くて、コーディングの最終調整をしてるんだけど、クロスブラウザ対応がかなり面倒になってきた。 やはりIEのみ表示が違うのがほとんどで、特に、というかやっぱり、というかIE6である。。 もう覚えてしまってるけど、メモ。 解決方法 本来、もちろんハックは使うべきではない。なので、自分も極力使わずに対処してるつもりだけど、どうしてもという時がある。 IE6に効かせるハックは代表的な方法が2つある。 ・その1、_(アンダースコア)を使って指定する方法 #categoryBtn { margin: 0 0 -29px 0;padding: 0; width: 740px; overflow: hidden; _background-color:#FF0000;/* IE6にのみ効いているか確認用 */ } (一番下の行のようにIE6のみ背景を入れたりして、IE6のみに適用されているか確認し
テーブルと考え方は極端にかわらないのだけど、 (両)端にぼかし影つけた画像用意して、背景に置いて、マージン等でその部分が見えるように調整するだけです。 気になったページのソースを表示して、余計な部分取り除いていって、よく解読すればわかります。 細かい部分は省くけど、概ねこんな感じ。 両端に影付いた画像を用意(幅:820px、影の幅は10px) <head> <style> <!-- #stage { margin: 0px 5px 0px 5px; background: url("影付き背景画像.gif") repeat-y; } #content { margin: 0px 10px 0px 10px; width: 800px; border: 1px solid red; } --> </style> </head> <body> <div id="stage"> <div id=
DreamWeaverのデザインビューで、clearfixを指定したときに、デザインビューではレイアウトが崩れてしまう。 普段そんなことは気にしないで作業をしてはいるが、やっぱしキチっと表示させたい時もある。 そこで、clearfixを指定している部分に「overflow:hidden;」「overflow:auto;」のどちらかを指定する。 これを使うとfloatをclearできてしまう! 何故だかは調べてないのでわかりませんが。。。
以下のようにすると、bodyに背景画像を一杯指定できる(ように見える)。 こんな感じに。 背景画像4つ指定サンプル *{ margin:0; padding:0; } html{ height:100%; overflow:hidden; } body{ height:100%; overflow:hidden; background:url(img1.jpg) fixed no-repeat 300px 200px; } #BodyIWrap1{ height:100%; background:url(img2.jpg) fixed no-repeat 100px 100px; } #BodyIWrap2{ height:100%; background:url(img3.gif) fixed no-repeat 100px 300px; } #BodyIWrap3{ height:10
えー、以前書いた『[CSS]フッターを常に画面の下に固定する』ですが、ちょっと難ありなようですね。 背景画像をrepeat-xで設定している場合なんですが(他のケースは知らんですw)、内容量が少ない場合はいいんですけど、内容量が増えたとき、こんな感じになってしまいます。 サンプルページ(別窓) ウィンドウを小さくしたり大きくしたりしてみると分かると思うんですけど、背景画像がウィンドウの大きさに合わせたっきり、動いてくれないんですね。 コンテンツの内容量は無視し、ウィンドウの最下部を頑なに維持。 なので内容量が少ない内はいいけど、内容量が増えるとおかしなことに。 そ こ で 簡単に誤魔化せる手を。
スタイルシートで指定すれば可能です。サンプルソースは、2行2列で作っています。head部のソースは<head></head>の中に書いてください。 【head部のソース】 <style type="text/css"> td{border: 1px dotted #000000;} .uenashi td{border-top:0px;} .hidarinashi td{border-left:0px;} </style> tdタグに対して、「dotted」で指定します。もう少し間隔を空ける点線でしたら「dashed」で指定します。青い色にしたいのでしたら「#0000ff」にすれば、好みの色に変えられます。しかしこれだけですと、中の線はtdがダブって書かれますから、太さが2pxになってしまいます。そのために「上なし(uenashi)」と「左なし(hidarinashi)」を指定します。bo
tableレイアウトからdivのfloatによるレイアウトに変更した際に、デザイン面で困ることがいくつかありますが、その1つが、floatしたdivの高さが揃わないこと。 floatしたそれぞれのdivに背景画像や背景色を設定していたり、borderでラインを入れている場合など、高さが揃わないため、情報量が少ないdivの下に隙間が空いてしまいます。 そういった問題を解決する方法です。 サンプル floatしたdivの高さを揃える 高さが可変(別ウィンドウで表示) floatしたdivの高さを揃える 高さ画面いっぱい(別ウィンドウで表示) ソース(高さが可変) floatされたdivの中で、もっとも高さがあるものに他のdivの高さも合わせる場合です。 float解除用のclass="cl"についてはfloat解除を参照してください。 html,body { margin: 0; paddin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く