niwadesign

ホームページ制作のネタ発信

CSS講座 小ネタ

幅いっぱいのスマホサイトのメニューで1pxのボーダーを追加する方法

投稿日:

基本的にスマホサイトを作る際はリキッドレイアウトにすることが多いと思う。
その際1つ1つの要素に対して%(パーセント)指定をするが、1pxのボーダーを要素の間にいれようと思うと、
これがなかなかうまくいかない。。。

そんな時はtable-layout:fixedとtable-cellを使うとうまくいく。

こちらがCSS

ul {
	display: table;
	table-layout: fixed;
	width: 100%;
}

li {
	display: table-cell;
	background: #ccc;
	text-align: center;
	height: 50px;
	vertical-align: middle;
}

li:nth-child(2) {
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

こちらはHTML

<ul>
	<li><a href="#">MENU</a></li>
	<li><a href="#">MENU</a></li>
	<li><a href="#">MENU</a></li>
</ul>

-CSS講座, 小ネタ
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

CSS PDFなどのアイコンを自動で表示する裏技

pdfやdocなどの決まった拡張子にCSSを使って自動でアイコンを表示させる方法がphpspot開発日誌に紹介されていました。 とっても便利なのでゼヒ使ってみましょう。 ※IE6では表示されないのでj …

CSS リストを使わなくても簡単にリスト風になるtext-indent

ちょっとした時などに、わざわざ新しくCSSを定義しなくてもリスト風のスタイルがtext-indentでできます。 サンプルはこちら

パーセント(%)指定したボックスにボーダーを指定する方法

最近はスマホサイトの制作も増え、ボックスの幅をパーセント(%)指定することが増えてきました。 その際にボックスにボーダーを追加するとボーダー分幅が広くなりカラム落ちすることがあります。 そんな時は、ボ …

iPhone Safariのsubmitボタンのデザインを変更する方法

通常CSSでbackgroundやborder-radiusをかけることによってスタイルを定義することができますが、 iPhoneSafariの場合は最初にリセットする必要があります。 #hdSear …

iPhoneのフォームでフォーカスがズームされるのを防ぐ方法

スマホ用のサイトを作っている時にフォームのテキストフィールドやセレクトをタップすると、画面がズームされることはありませんか? そんな時はフォントサイズを16px以上にするとズームされるとこなく、入力す …