制作ブログ Web制作マークアップCSS
CSSに関する記事は、46件あります。
CSSに関する備忘録。
個人で制作する場合、BEM、とりわけ、MindBEMdingモデルをCSS設計として採用している。実際の運用では、Blockごとにscssファイルを新規追加も...
2022年11月23日 CSS
基本的に、情報を持たない画像は背景画像で処理している。ただ、どうしてもimgタグで対応する必要がある場合、それでいてbackground-size: cove...
2022年4月21日 CSS
Google Fonts はとても便利だが、画面に表示するまでの遅延が気になったので、同様の効果をローカルにあるフォントを利用して実現させる。 事前に用意...
2020年9月23日 CSS
WOFFコンバータ ダウンロードhttps://opentype.jp/woffconv.htm 以下、リンク先の「概要」を抜粋。 フォントとWO...
inputのplaceholder(プレースホルダー)のテキスト色を変更するでご紹介した内容を踏まえて、修正するだけ。 focus時にplaceholder(...
2017年7月22日 CSS
いろいろ調べると、疑似クラス「:placeholder」と「:placeholder-shown」というのにいきつく。 ちょっとハマってしまったので備忘録。ハマ...
CSS3で利用できるマルチカラムについて再確認。 カラムサンプル カラム 幅を指定 column-width: 150px; columns: 150p...
2012年9月14日 CSS
border-imageは、一枚の画像で9スライスのデザインが実現できちゃうという優れもの。 残念ながらIE8以下で適用できず、実際にはまだ使えないかなーという...
2011年4月22日 CSS
text-shadowプロパティは、その名から想像するとおり、テキストに影をつける（ドロップシャドウ）ことができます。 仕様 text-shadow:右方向 下...
2011年4月19日 CSS
box-shadowプロパティは、その名から想像するとおり、ボックスエリアに影をつける（ドロップシャドウ）ことができます。 仕様 外側にドロップシャドウ bo...
W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加されて...
2011年3月7日 CSS
上図のように、2カラムレイアウトにおいて、左右のコンテンツ長さが任意で、短い方のカラムの縦位置を長い方のカラムのセンタリングする場合、どうしましょうって話。何...
2010年6月28日 CSS
「CSSは記述しているのに適用されない」という質問が多々あるので、あらためて基本をざっくり。 CSSを指定する方法として、大きく分けて2通りの考えをマスターする...
2009年1月14日 CSS
コンテンツの量に関わらず、スクロールしても、ヘッダーとフッターは常にブラウザ上に表示されるようにする。 ポイント htmlとbodyに高さ100%を指定する ...
2008年12月27日 CSS
IE7でブラウザの右下にある数値を変えて拡大してみる。見事にレイアウトが崩れる場合がある。 IE7の拡大時のレンダリングは、Operaと同じように、bodyその...
2008年11月6日 CSS
xhtmlソース <div> <ul> <li>navi1</li> <li>navi2</...
2007年12月13日 CSS
(x)htmlにテキストを記入し、CSSでマウスオーバー時に背景画像を変更させる。 xhtmlソース <div> <ul> <l...
xhtmlの書き順 #cont2（#cont2in） → #cont1 → #cont3 （#cont1と#cont2の書き順はどちらでもよい） widthの...
xhtmlの書き順 #cont2 → #cont1 → #cont3 （#cont1と#cont2の書き順はどちらでもよい） #cont1and2{ f...
xhtmlの書き順 #cont1 → #cont2 → #cont3 #cont1{ float:left; width:○○px; } #cont2{...
3段組み #wrapper{ width:○○px; } #container{ position:relative; width:100%; } #con...
2段組み #wrapper{ width:○○px; } #container{ position:relative; width:100%; } #con...
本来であれば #wrapper{ width:○○px; margin:0 auto; } の設定だけで充分なのだが、これだとIE5が対応せず左寄せのままで...
下記に示す全称セレクタを用いた初期化方法の流行りは影を潜め始め、現在は「必要な要素のみに適切なスタイルを示す」方法が流行りはじめているらしいことを聞いた。ただ、...
2007年12月11日 CSS
line-heightを指定してる中にimgが含まれると、WinIE(IE7では修正されている)では行間が狭くなる。 <ul> <li>...
2007年12月5日 CSS
.group{ overflow:auto !important; overflow /**/:hidden; } または .group{ overflo...
2007年12月4日 CSS
具体的には、ブラウザ表示領域（ファーストビュー）とコンテンツ高さを比較して、コンテンツ高さの方が短い場合、フッターは下部に固定。コンテンツ高さの方が長い場合、ス...
2007年11月4日 CSS
文字サイズをemで指定する アクセシビリティに配慮して文字サイズ指定にpx指定を行わない（固定にしない）。そこでデフォルトサイズを10pxになるよう%指定する。...
2007年4月6日 CSS
テーブルタグの初期設定 table{ border-collapse:collapse; font-size:100%; } セルとセルの間を空けるかどう...
2007年3月22日 CSS
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",&quo...
2007年3月16日 CSS
html>body モダンブラウザ用 *;first-child+html*:first-child+html IE7のみ用 ちなみに、 <!-...
dl{ width:○○px; } dt{ float:left; width:△△px; } dd{ margin-left:△△px; } float...
2007年2月23日 CSS
とはいえ、正確にコントロールできるわけではないが、縦幅を認識させたいときに有効。 html,body{ height:100%; } 高さの％指定は親要素に...
2007年1月23日 CSS
アクセシビリティの観点から文字サイズは固定しない方がいい。 ただ、IE以外のモダンブラウザではフォントサイズを固定しても、実際にはブラウザで拡大表示が可能だ。更...
2007年1月19日 CSS
<div class="bg-cover"><img /></div> 画像を取り囲むdiv上にbg...
タイトル 速習Webテクニックスタイルシート 上級レイアウト 発行日 平成18年4月25日 値段 2,780円＋税 CSS...
2007年1月6日 CSS
xhtmlソース <div> <ul><!-- --><li><img alt="navi1" />...
様々なやり方があるが、どれがベストなんだろう？ 気にするポイントは、検索エンジン的に問題がないか？アクセシビリティは確保されているか？ソースが読みづらくないか？...
そのボックスにfloat付きの子ボックスが含まれていないか？ そのボックス（または親ボックス）内で回り込みを解除されているか？ 解除できる要素がなく親ボックス...
2007年1月3日 CSS
縦方向のレイアウト崩れ防止、ブラウザによる見え方を統一するため、vertical-alignは「top」の設定がおすすめ。ちなみにデフォルトはbaseline...
/*¥*/ letter-spacing:0.1em; /**/ letter-spacingの指定はMacIE5ではバグがでてしまうため、ハックを利用して...
floatとwidthはペアで使用する CSS2.1の勧告候補ではwidthなしでも自動的に幅がフィットされる。しかし、Mac IE5ではうまく表示されない。 ...
正しいCSSを記述しているにもかかわらず、表示が崩れることがある。ブラウザによる解釈の違い（バグ）が原因であるが、IE5や古いブラウザにバグが見られる。...
2007年1月1日 CSS
@important "test.css"; ポイントは@importantを設定し、1ファイルかますこと。ただし、この設定ではMacI...
2006年12月31日 CSS
/*¥*/ MacIE以外 /*/ MacIE用 */ どのブラウザでもOK MacIE以外だけに設定したい場合やMacIEのみに設定したい場合でも、コメント...
#006600 #33cc33 #66ff33 #66cc99 #3399ff #3366ff #0033ff #330066 #cc3366 #990033 ...
2006年12月30日 CSS
