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

css

iPadでブラウザの高さ100%が100%にならない件

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

新年明けましてどもです。

最近ナゾノクサ系が愛しい餅。です。
キレイハナも慣れると可愛いなぁ。
但しクサイハナ、おめーはダメだ(´・ω・`)

 

今回、iPad用Webシステムのコーディング修正を依頼されました。
自分で書いてないコーディングの修正は結構厄介ですが、概ね問題なく完了。

ただ一点、html,body:height:100%にしているのに僅かに縦スクロールしてしまう問題を除いて。

え、いや何故? Chromeで見たらちゃんと100%やん…

さぁて、躓いた。

PCのGoogleChromeで見ると、ちゃんと縦幅は100%です。
念のため他のブラウザでも見てみますが、問題なし。... 続きを読む »

display:table-cellでwidth:100%に設定したいとき

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

どもです。
久々の連続更新(゚∀゚)

要素を手っ取り早く上下中央揃えにしたいとき、親要素のdisplayをtable-cellにするのが楽ちん。
でも、display:table-cellはwidth:xx%が効かない罠。

親要素のwidthが決まっている場合、width:inherit;(親の数値を引き継ぐ)でイケる。
まぁ、親要素が決まってるならそのpx書けば良いだけだけど、その変動も考えるとinheritのが堅実。

しかし親要素もパーセンテージ指定だったら…。
width:想定される最大pxより大きな数値;でイケた。ちょっと驚いた。

どうやらtable-cellには親要素を絶対にはみ出ないという原則があるようだ。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (
... 続きを読む »

画像の上下左右中央揃えができないときの最終手段

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

どもです。

この仕事始めて一年半弱。またコーディングで詰まりました。

従来の方法

さて、画像の上下中央揃えをしたいのですが、これにハマりました。
HTMLの方を自由に調整できるなら、以前の記事で書いたやり方をすれば堅実です。

が、これができない場合がある。
既にコーディングが終わっているものを弄る場合、変にhtmlを弄るとスタイルが大幅に崩れる、なんてことはザラ。
できるだけCSSで済ませたいのに、親要素と子要素で終わってしまっていて、しかも子要素がimgタグなんかだったりするともうこの方法は使えません。

僕は最近までこの方法を使っていたのですが、これができるときできないときがあるのが悩みでした。
しかも、IEだと他ブラウザでできていてもできないときがある。

さて、今回も上述の方法を使っていたのですが、これが効かない。
親要素のline-heigthが上手く効いてくれない場合があるっぽいんですよね。
頭を抱えつつ色々調べてみたところ、なんと画期的な解決法を書かれていた方がいました!... 続きを読む »

list-styleが表示されないときに確認すること

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

どもです。
ポケモンΩルビー、草タイプ縛り中の餅。です。

マグマ団も怖いけど、飛行タイプがこれまた怖い。

今回はコーディング中にちと蹴躓いた点をば。

僕はlist-styleでulを使うのがあまり好きではありません。
故に、普段はlist-style:noneにして、li:beforeで記号を入れているのですが、連番――つまりolを使いたいとなるとそうはいかなくなります。

仕方ないのでlist-style:decimalを設定したのですが、普段list-styleを指定したリストに慣れていなかったせいで躓いてしまいました。

list-styleで指定したハズの連番が表示されなかったのです。
要素を見る限りはきちんと表示されているハズなのに……

理由は親要素(ol)にありました。

ol:overflow:hiddenが設定されていたことが原因でした。

つまりはこういうことです。
h261126
list-styleで設定された内容は、liの前につきます。... 続きを読む »

新規コーディングのとき、CSSは大体これだけ設定しておけば良い気がする。

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

どもです。
新規コーディングの際、取り敢えず設定するCSSは何でしょうか。

リセットCSSとかありますが、僕は使わない派。
いちいちアップしてリンク繋ぐのが面倒なのと、要素を虱潰しにリセットするせいで親子関係が殺されることがあるのが嫌なので。

とはいえ、リセットCSSを使わないなら自前でリセットしなければなりません。
取り敢えず、これだけ設定しておけば充分なんじゃね?
と思うスタイルを晒してみます。

僕的にはこれだけ設定しておけばコーディング始めるのに充分なんじゃないかなーと。

まず、全体の隙間を除去して、旧IEだと画像に勝手にborder引かれることがあるので除去。
画像はwidthを設定することが多いので、比率が正しくなるように高さにautoを設定。
not必須ですが日本語サイトだと画像にvertical-align:bottomがお薦め(下揃えになります)。
旧いブラウザだと親要素の設定によってoutlineがついてしまう場合があるのでnoneに。
a:hover imgはお好みだと思いますが、何らかの挙動を共通して設定すると良いでしょう。

レスポンシブサイトを作る際、全ての要素に... 続きを読む »

サイトコンテンツの幅よりブラウザ最小サイズの方が小さく設定されたサイト

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

どもです。
近頃めっきり肌寒い餅。です。

今日はCSSについて。

サイトトップのコーディングを依頼されたので、渡されたPSD通りに作りました。
ただ、サイト幅が1400pxって少々広すぎやしないかと思っていたのですが…

完成してから、サイトの仕様を言い渡されました。遅いわ(´・ω・`)

幅1400pxだが、ブラウザ最小サイズは1000pxのサイト。
外側各200pxはブラウザサイズによっては見えなくなる。
スクロールバーの表示も1000pxからで、その際外側200pxはスクロール範囲に入らない。

 

図解するとこういうことです。

h261112
図解してもよくわからないので例示するとこんな感じです。

h261112_2

あるいは、こんな感じです。

h261112_3

できるかそんなもん。
と咄嗟に思いましたが、考えてみれば普通にできそうですねこれ。... 続きを読む »

フェイスブックのサイト貼り付けで幅100%にする方法

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

2015.05.22追記
Facebookのサイト貼り付けの仕様が変わり、幅100%が正攻法ではできなくなってしまいました。詳しくはこちら

 

どもです。

フェイスブックのサイト貼り付けといえば、こちらの変換ページですが…

どう足掻いてもフレーム幅固定。
このままではレスポンシブサイトへの対応ができません。

というわけでcssの方で無理やり矯正します。

ちなみにこれはHTML5バージョンの場合のみ動作を保証します。
h260829これな。

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

CMSやレスポンシブサイトで押さえときたい「word-break」

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

どもです。
お久しぶりの餅。です。

昨晩、帰宅しようとしたら会社前の道路が川になっていました。
台風や水害とは縁遠い内陸民ですが、昨日ばかりは笑い転げながら帰宅しました。

 

さて、最近すっかりネタが不足してブログの更新も止まっていたのですが…

今更ながらCMSやレスポンシブに便利なCSSの情報を仕入れたので晒しておきます。

 

CMSサイト故に<li>の内容が可変だったり、
レスポンシブサイトでサイトの長さが可変だったりして、
並べたinline要素やinline-block要素が望まぬところで折れてしまう、
なんてことありますよね。

具体的にはこんな感じで。

h260806

 

これを手っ取り早く解決するCSSがありました... 続きを読む »

スマホでoverflow:hiddenが効きらなかった件

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

どもです。
目がヤバい餅。です。

本気で仕事からちょっと離れて森の中にでもダイヴしてきた方が良いかもしれません。
うーん、学生の頃はこんなことなかったのに。やっぱ「毎日」ってのがやヴぁいpointでしょうか。

 

それはともかく、今日はCSSの話。

既存のコーディングでCMSテンプレートを作ったのですが、問題がひとつ発生していました。

inline-blockの内容がCMSによって可変、
しかしinline-blockのサイズは一定でなければならず、
overflow:hiddenを設定することで、はみ出した分を非表示にする処置を取りました。

しかし、実機で見ると、inline-blockの中身こそhiddenされていますが、
何故か高さ情報だけがhiddenされておらず、それによりレイアウトが崩れていました。

色々試したのですが、抜本的な解決策は見つけられず。
親要素をposition:relativeし、inline-blockをposition:absoluteすることで解決。

スマホサイトのコーディングにおいては、... 続きを読む »