2014年08月28日

HTMLとCSSでテーブル・表

HTMLのtableをCSSでデザインを調整するときのコピペ用覚書。 CSSソース [css] table,td,th { border-collapse:collapse; border:solid 1px #998675; ... 続きを読む
2014年02月23日

レスポンシブ ウェブデザインのCSSの書き方

レスポンシブなウェブサイトを作るときの基本。 まずHTMLのhead内に以下を記述 HTMLソース [html] <meta name="viewport" content="width=de ... 続きを読む
2014年02月1日

グラデーションとborder-radiusを使ったグローバルメニューの例

CSS3のグラデーションと角丸を使ったメニューバー。 ブラウザ表示 Home Products Contact HTMLソース [html] <div ... 続きを読む
2014年01月26日

heightが反映されないときの対処法

floatを使わない親要素の中の子要素で、floatを使った場合にheightが反映されない場合。 そのときの対処法。 対処法①、②ともHTMLは共通。 HTMLのソース [html] <div id="wra ... 続きを読む
2013年11月8日

CSSでキレイな日本語フォントの明朝とゴシック

CSSでfont-familyでフォントを指定するときに、とりあえず私がベーシックとして使うパターン。 Windows、Mac OS両方に対応。 明朝系 ブラウザで明朝系のフォントを使うときにいつも使っているCSSのフォントファミ ... 続きを読む
2013年11月2日

画像リンク クリックしたときに枠線

画像や、リンク部分をクリックしたときに現れる目立たないようで目立つ点線の枠。 それを消す方法。 CSSソース [css] a {outline:none;} [/css] 画像の時のみ対応する場合は。 CSSソース ... 続きを読む
2013年08月18日

CSSだけで円と三角形を作るソース

CSS3で、円と三角形を作るときのソース。 円 ブラウザ表示例 CSSソース [css] .circle{ background:#20b2aa; width:80px; height:80px; text-ali ... 続きを読む