ど素人から毛を生やす。<延>

css

ページの隙間の徹底除去を試みる

Web > css 2014年7月2日(最終更新:1月前)

どもです。
最近話題がないのでコーディングの話をば。

コーディングをしているとき、どうしても悩まされる「謎の隙間」。
これをできるだけ消していこうというコンセプトです。

①ページの上に隙間ができたとき

上に隙間ができる場合は、かなりの確率でmarginやpaddingが原因だと思います。

*{
padding:0;
margin:0
}

で、デフォルトで設定されている隙間を除去します。

これができているのに隙間ができる場合、というのも稀ですが存在します。
そのときにチェックして頂きたいのは、headの中に記述ミスがないかという点です。

特に全角空白が紛れ込んでいる場合、見ただけではわからないのでご注意を。

②ページの下に隙間ができたとき

... 続きを読む »

フッターの下の謎の隙間を排除せよ!

Web > css 2014年6月20日(最終更新:1月前)

どもです。

というわけで、本日はHTMLとCSSの話。

SPサイトを作ろう、という話になりまして、
数カ月前に作ったPCサイトのデザインを確認しながらデザインしていたのですが。

h260620

こんな隙間、コーディングしたときには無かったハズ……

サイト運営に支障はありませんが、これは美しくない。
取り敢えずエレメントを確認してみました。

h260620_2

以前、解析系スクリプトをfooterの下、bodyの上に突っ込んだのですが、
それらが勝手にimgとspanを出力してしまったようです。

CSSからbody直下のimgとspanにposition:absoluteを指定。高さをなくします。
これで解決しました。

特に、スクロールバーが表示されているのにフッター下に隙間ができるという場合。
まずはエレメントから、フッターの下に高さ要素を持つものが出力されていないか
チェックするのをお勧めします。

この記事は役に立ちましたか?
... 続きを読む »

CSSだけでライトボックスを作る

Web > css 2014年4月9日(最終更新:5年前)

どもです。
やっぱりCMSよりCSSな餅。です。

とある古いサイトをipad等に対応させるため、Flashだった建物内マップをjsにする
という仕事がありました。
マップにはlightboxを設置するということだったので、積み込んでいざ稼動テスト…、
ここまでは良かったのですが、

・積んであるjQueryが古く、jsプラグインが積み込めない
・jQueryを更新すると既存のjsが動かなくなる
・そもそも積んであるjsプラグインが多すぎてどれがどれやらわからない

というカオスな状況になりました。

複数のjsを読み込む方法、なんてのも調べたらありましたが、何か間違えたのか失敗しまして。

もう面倒臭くなったので、ライトボックスもCSSで作ることにしました。

原理は、以前の記事(CSSでフローティングウィンドウもどき)と同じで、透明化したチェックボックスを使用し、隣接するラベルのスタイルを変更する、というものです。... 続きを読む »

z-indexで最前面にならない!

Web > css 2014年4月1日(最終更新:1年前)

どもです。
新年度明けました餅。です。

さて、今回はCSSの話。

要素の重なりを操作するCSS、「z-index」。
最前面に持ってきたつもりが、想定外の要素の下に潜り込んでしまうことがあります。

原因は結構な割合で、下に書いた要素がpositionを持っているというもの。

普通はz-indexを大きく設定すれば解決するハズですが、それでも何故かうまくいかないことがありますね。

逆に考えましょう。
「z-indexで解決できなくていいや」
と考えるんです。

z-indexではなく、positionをどうにかしてしまいましょう。

具体的には、absoluteなら最前面にしたい要素の前に書いてしまいます。

relativeなら、marginで代用します。
ネガティブマージン(margin-left:-... 続きを読む »

擬似要素で回り込みを解除する

Web > css 2014年3月14日(最終更新:5年前)

どもです。久々にスーツ着てきたのに外出予定が白紙になった餅。です。

探しているのに見つからないゲームは、近所のゲーム屋に置いていませんでした。
仕方ないのでダウンロード販売はないかと思えばなく、そんなだから今買おうとするとプレミアついて1万円超えだそうで。

…もうちょっと探します。

さて、CSSについてです。

回り込みを解除する方法といえば「clear:both」ですが、これの使い方をよく忘れるので忘備録を兼ねてのめもめも。

普通のブロック要素に「clear:both」で前にあるfloatを解除。
これは良いですが、問題は擬似要素(after)でfloatを解除するとき。

回り込み要素:after{
content: "";
clear: both;
height: 0;
... 続きを読む »

ブロック要素を上下左右中央に置きたい

Web > css 2014年3月11日(最終更新:5年前)

どもです。
今日の帰りはゲーム屋に寄って、安く売ってたら見つからないゲームを買い直そうと決めた餅。です。

まぁあくまで安売りしてたらですが…安いといいなぁ。

さて、本日は久しぶりにCSSの話題。

ブロック要素を上下左右の中央に置きたい。
よくある話…ではないですが、カップラーメンを無性に食べたくなるくらいの頻度でやりたくなることだと思います。

んで、最も一般的な方法はネガティブマージンを使う技なのですが…

左右はmargin:autoでおk。上下は要素をposition:absoluteにしてtop:50%、margin-top:-[コンテンツ高さ]にします。親要素にはposition:relativeを忘れずに。

シンプルで良いのですが、コンテンツの高さが明確でない場合には使えないのは問題です。

今回はこのやり方だと都合が悪かったので、display:table-cellを使うやり方をしてみました。

が、今までこちらの方法をよく理解してなかったので改めて。

h260311_2

ネガティブマージンを使うときと比べると、入れ子がひとつ多くなるのが注意点ですかね。

まずは親要素をdisplay:tableにします。

次に子要素をdisplay:table-cellにし、vertial-align:middleに。
これで要素の上下方向の中央揃えが完了です。

が、ここまでだと上下方向だけなので、更にdisplay:inline-blockの孫要素を入れて子要素をtext-align:centerに。... 続きを読む »

floatが効かないとき

Web > css 2014年2月10日(最終更新:5年前)

どもです。
一人が楽しすぎる餅。です。

2014/10/09 当サイトの中でも特にアクセス数の多い記事のようなので、改正版に差し替えました。

floatが上手く行かないときは

取り敢えず回りこまされるコンテンツにoverflow:autoを設定します。
(imgとpがあってimgがfloatならpの方)

floatとはどのような状態か

floatを指定すると、続く要素を回りこませることができます。
このとき、親要素にはfloatの高さや幅は認識されなくなるので、clear:bothなどで回りこみを解除するか、回りこまされる要素がfloatの要素より大きくなるように設置しなければfloatの要素は親要素をはみ出ることになります。

親要素等に高さや幅の情報を認識されなくなるcssとしては、position:absolute(あるいはfixed)がありますが、こちらは要素が回り込まず、positionを設定した要素の下に潜り込みます。

h261009_1

が、このとき、回りこまされている要素がfloat状態でない場合、その要素の位置情報はposition:absoluteのときと同じです。

h261009_2

list-styleで設定したリストのマークや、before要素などは要素の頭の位置を基準に表示されるので、上図の場合はマークやbeforeが表示されない状態になります。... 続きを読む »

Dreamweaverが激重に!?

Web > css 2014年2月7日(最終更新:5年前)

どもです。
今週は残業weekな餅。です。

今日は久々にWordPressのお仕事。
Movable Typeから開放され、お気楽な心持ちで仕事に挑みました。

さて、コーディングは既に済んでいるということでしたので、ファイルを受け取ってDreamweaverを…

って、激烈重ぇ…!?

ファイルを開くのに時間がかかり、スクロールで処理が停止し、文字をドラッグしようものなら画面が白く染まります。

昨日まできちんと動いていたじゃないかDreamweaverよ…!?

流石に異常事態ということで、原因を調べます。

Dreamweaverを軽くする方法でググって、ひと通り試しましたがどれも失敗。

メモリ使用率が高い気がしたので色々対処してみましたが意味なし。

デフラグも効果なし。

最悪の場合を想定しウイルス対策ソフトを、今までの無償のものから30日間お試しモードの商品版に。

しかしウイルスの類は発見されず!... 続きを読む »

CSSでフローティングウィンドウもどき

Web > css 2014年1月23日(最終更新:5年前)

どもです。
この頃、なんとなく癒しが足りない餅。です。

今回は久しぶりにCSSの話。

HTMLにはフローティングウィンドウというものがあります。
ボタンをクリックすると画面にウィンドウが出てくる奴。条件としては、ポップアップブロックなどに適用されず、動かすことが可能なものだそうで。

で、それを作るということになったものの、設置箇所がデータベースのリスト中。
その数が動的というのが困ったもので、しかもデータベース化するのは僕ではなく。
これは、普通にJavasriptで設置・管理するのは厳しいかも?。

ただ、動かせないウィンドウならCSSだけで実現可能そうだったので、そっちでやってみました。

参考にしたサイト様はこちら

HTML側の記述はこちら。

で、CSS側の記述はこちらです。

仕組みとしましては、チェックボックスにチェックが入っているときのみ、チェックボックスと隣接するdivがdispray:blockになるという単純なもの。... 続きを読む »