スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
display:table-cellって便利なんですねｗ | ChomoIsland
ちょっと久しぶりの更新です(^^ゞ 実はこっそりとこのブログのスマホ版のテーマをちょこっと変更してました(^_^)v 前のを覚えてらっしゃる方も少ないと思うので、本当にこっそりと（笑） sourireへのリンクやフォトサイトへのリンクを入れたかったので、ついでに気になる点をやり直しです(^_^;) サムネイルとテキストの水平位置合わせ 今回の変更で、一番やりたかったのがこれです！当初のスマホ用テーマは、サムネイル写真とタイトルが縦方向の中心線が合ってなかったんです。 スマホの縦だとまあまあごまかせるものの、横にしてしまうとかっこ悪い！！イケてない！！（泣） ・・・と、思いながらも放置してたダメな初心者です(*_*) で、今回それを修正したかったんですが！ サムネイルとテキスト、それぞれfloatで配置してたので、ボックスの高さって合わないですよね？しかもwidthが％指定やから
CSS「display: table」と「display: table-cell」で出来ること | アイビーネットblog
2008年4月24日 14:11 (X)HTMLCSS IE8は「display: table-cell」に対応 「display: table-cell」とは、テーブルの構造を表現することができるCSSプロパティです。先日公開されたベータ版(IE8 Beta1)で確認しましたが、IE8からは「display: table-cell」に対応しているようです。 そこで、今回はこの「display: table-cell」を使うことで、どんなことが出来るのかを見ていきたいと思います。 「float」と「display: table-cell」でのカラムレイアウトを比較 左右のカラムが固定で、中央のカラムが可変というような3カラムのレイアウトを表現したい場合、CSSでは通常「float」を使います。カラムレイアウトは「display: table-cell」でも表現できますので、この2つの方法を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
