emmetの展開方法を忘れるのでメモしておきます。html5のデフォルトテンプレを用意したいとき html5と書いて「Tab」で展開する。最近あまり使わなくなったがCSSのベンダープレフィックスを bxで展開すると以下の通り webkit-display: block; moz-display: blo…

ul { list-style-position: inside; } ul li { padding-left: 1em; text-indent: -1em; } リストが改行されたときのテストです。リストが外側に表示され、1行目と2行目の頭は揃います。list-styleの時は良いのですが、imageに変えたときlistが少し上について…

既に過去の出来事となっているので、気にする事もないとは思いますが、メモ書きとして残しておきます。IE5Mac版やNetscape Navigator7などCSSに不完全な状態で対応しているブラウザに対して、 CSSを読み込ませず、テキストのみの状態を表示させる方法です。i…

overflow-y:scroll;とすればインラインフレームのように見える スクロールバーがつきますが、overflow:hidden;とセットで使用する必要があります。 #news { height: 200px; width: 240px; overflow:hidden; overflow-y:scroll; scrollbar-base-color: #999; …

ロールオーバには、javascriptとCSS版がある。マウスが操作された時、下記の状態を変化させる。 ・ノーマル ・マウスオーバー ・マウスダウン - ★★マウスオーバーJS版★★■その1 分かりやすく書いた初心者向けの書き方。 <li><a href="#mokuteki" id="sidenav01" onmouseover="overSN01();" onmousedown="downSN01();" onmouseout="outSN01();"><span>文字列1</span></a></li> <script type="text/javascript"> function o…

bodyにposition:absoluteをかけ高さを100%にするとmainの高さも100％が使えるようになります。 通常は、height100%にしても値は取得できませんが、 htmlまたはbody要素にposition:absolute;とheight100%にします。 main100%にして、中身の要素が足りなくて、…

<style type="text/css"> <!-- div{ margin: 0px; border: 1px solid black; width: 0px; height: 100px; } --> </style>

外部CSSの一行目に下記を追加する。 『@charset "utf-8";』

CSSでは後に記述されたものが優先して適用されるます。 例えば、a:linkの指定を最後に記述すると、他の指定によるスタイルに上書きされて無効となります。スタイルを指定する記述順には注意が必要です。 次の順番で記述するようにします。:link擬似クラスa:l…

ナビのli要素に margin-bottom:5px； margin-top:10px；と指定してあった場合 それぞれのli間の上下のマージンは 値の大きいほう（負の値の小さいほう）、または一方が正の値、他方が負の値の場合、足し引きした値が設定されます。

数年前までユニバーサルセレクタ（*）を使用しブラウザのデフォルトスタイルをリセットしていましたが、inputやbutton要素の表示に影響を及ぼすことから、現在ではタグそれぞれに対し設定を行っています。 〜昔〜 * { margin: 0; padding: 0; border: none; …

media属性は、携帯電話などに重い画像が表示されないように「PC画面用」と「印刷用」を記述します。 CSSの｛｝波括弧（なみかっこ）は、ブレース・ブレイス (brace) および カーリーブラケット (curly bracket) ・カール (curl) とも言う。 リンクの指定a:li…

コンテナid/class名備考全体コンテナcontainerbody要素の直下汎用コンテナwrapperマルチカラム用などブロックid/classヘッダーheaderフッターfooter メイン部分mainAreaサイドバーsidebarロゴlogoグローバルナビglobalNavローカルナビlocalNavユーザー支援ナ…