css

sectionとarticleの違い

css

「セクション(section)」とは 「セクション」という言葉の意味を理解しましょう。 「セクション」とは、仕切り、部分、節、項などのかたまりをいいます。article要素 「article要素」は、先ほど書いた通りその部分だけ切り離しても完結する構成を表します。 …

CSSでテキストを書き換える方法

css

サーバーサイドのプログラムを変更せずに、表示されるテキストだけ変えたいときにおすすめです。 SEOには書き換え前のテキストの内容しか反映されないと思いますので注意です。 p {font-size:0;} p:before {font-size: 12px; content: "かきくけこ";}ネタ元 …

line-heightプロパティに単位をつけずに数値のみを指定すると、その数値にフォントのサイズを掛けた値が行の高さとなる

css

数値のみで指定 単位をつけずに数値のみを指定すると、その数値にフォントのサイズを掛けた値が行の高さとなります。例えば「1.5」と指定すると「150%」や「1.5em」と指定した場合と同じになります。ネタ元 http://www.htmq.com/style/line-height.shtml

IEでもそこそこできる!CSSで作る画像のようなボタン

css

CSS3 PIEというのを使えばできる。 これを使えば、IE6~9でも、border-radiusやbox-shadowなどのCSS3プロパティが使えます。http://css3pie.com/ネタ元 http://weboook.blog22.fc2.com/blog-entry-312.html

CSS クラス名リスト

css

名前考えるときに参考にしようhttps://github.com/manabuyasuda/styleguide/blob/master/css-class-name-list.md

CSSの上書きルール

css

単純に下にあるのが優先というわけじゃないそうだ。これは引っかかるなぁ。 ネタ元 http://www.mdn.co.jp/di/articles/517/?page=4

CSSでスタイル解除

CSS

ここでは、初期値を表す「initial」を使って、ブラウザの標準値で上書きをするという手法です。 .clear_text { color: initial; font-size: initial; text-shadow: initial; }ネタ元 http://www.shurey.com/html/css_initial.html

CSSで吹き出し

css

いい吹き出し /* 04.吹き出し */ #heading04{ position:relative; margin:0 15px; padding:10px 20px; font:bold 24px/1.6 Arial, Helvetica, sans-serif; color:#333; border:#333 solid 3px; border-radius:18px; background:#fff; box-shadow: -7px -5px …

CSSでドロップキャップ(先頭文字を大きくする)

css

p:first-letter { font-size: 3em; line-height: 1; float: left; margin: 0 .2em 0 0; padding: .1em 0; }ネタ元 http://m-school.biz/dev/css-coding/005-css-dropcap.htm

backgroundで指定したほうが記述が短くていい

css

background-colorとかbackground-imageとか指定する方法あるけど backgroundなら、まとめて指定できるネタ元 http://www.css-lecture.com/log/css-beginner/041.html

cssでグラデーション角丸のタイトル例

css

こんな感じ .pagetitile{ background-image:-moz-linear-gradient(top, #0064D3, #0206A5); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0064D3), to(#0206A5), color-stop(1,#0206A5)); padding: 8px 10px 8px 24px; font-size:18px…

TRとTDに対するCSS設定方法を教えてください

css

<style> table.cal, tr, td { padding:4px; } tr.fish { background-color:#F3F6FF; } td.mon span { background-color:#557766; color:#FFFFFF; display:block; } </style> <table class="cal"> <tbody> <tr class="fish"> <td class="mon"><span>1</span></td> <td class="mon">2</td> <td class="mon">3</td> </tr> <tr>…</tr></tbody></table>

スタイルシートの指定で特定のtypeのinputタグ指定する場合はinput[type="text"]という感じで指定

こんな感じ .wpcf7-form input[type="text"] {margin-left:5%;width: 50%} /*入力フィールド幅指定*/ .wpcf7-form input[type="email"] {margin-left:5%;width: 50%} /*入力フィールド幅指定*/ネタ元 http://jsdo.it/snic/8o3C

未訪問リンク色/訪問済みリンク色/オンマウス時のリンク色/クリック時のリンク色、スタイルシートで指定

以下の様にCSSでリンクをまとめて記述すると簡単です。 (動作に優先順位があるので上下の順番を間違えないように) a:link{ color: navy;} a:visited{ color: brown;} a:hover{ color:maroon; background:#FF0;} a:active{ background: aqua;}上から ・未訪…

テキストリンクには下線つけ隊が、画像には付けたくないときの対処法

CSSで画像用の定義つくって、下線付けたくない画像くくってやる ---------html------------ <div class="imgborder"><a href="#"><img src="1.jpg" border="0"></a></div> ---------css------------- .imgborder{text-decoration:none;} CSSについて。 <a>にborderで下線をつけると、画像リンクにも下線がついてしまいま... - Yahoo!知恵袋</a>

表(table)の中央揃え(センタリング)

css

style="margin-left: auto; margin-right: auto;" ネタ元 http://kumacrow.blog111.fc2.com/blog-entry-294.html

最大サイズや最小サイズを指定した上で、ウインドウ幅に合わせて自動調整させたい場合のCSSソース

css

基本ウインドウ横幅の80%。でもMAXは800pxという書き方。 style="width: 80%;max-width: 800px" ネタ元 http://allabout.co.jp/gm/gc/400630/

カーソル変化

http://copicopi.com/cursor.html 指カーソルにするには <span style="cursor:pointer;">対象となる文字</span>とか

Twitter提供のCSSフレームワークBootstrap

これを使うと簡単にお洒落UIが作成できる。簡単なモックアップつくるときなど、開発時に便利みたい。ネタ元 http://aholier.com/yorozu/2011/08/cssbootstrap.html http://twitter.github.com/bootstrap/index.html

画像を使ったシンプルな見出しサンプル

http://www.webkrauts.de/2007/06/03/headline-elemente-mit-css-stylen/

ぶら下げインデントを実現する

css

ぶら下げインデントとは2行目以降、1文字右にずれている表記のこと。 html <ul> <li>※THE HAM MEDIA</li> <li>※THE HAM MEDIA<br /> THE HAM MEDIA</li> <li>※THE HAM MEDIA<br /> THE HAM MEDIA<br /> THE HAM MEDIA</li> </ul>css ul { margin-left: 1.0em; } li { text-indent: -1.0em; }全体をmargin-leftで右に…

idはページに1度しかでてこないもの。 classは何度も出てくるもの

css

効果は同じだけど、こういう意味があるということを知って使うとコードが読み易くなる。 ネタ元 スタイルシートの class と id の使い分け

CSSで気をつけたい事やつまづいたときのちょっとしたこと

css

いっぱいあるんだなぁ。でも大事。http://webdesignrecipes.com/css-reference/

デザインが苦手なWebサービス開発者に朗報!今風のデザインがさくっと作れる『Twitter Bootstrap』が凄まじく充実している件

Twitter社謹製。簡単でおしゃれなサイトのhtml/cssが作れちゃうみたい。試さねば。http://www.ideaxidea.com/archives/2011/08/twitter_bootstrap.html

スマフォサイトでよく見るパーツのコードサンプル集

便利http://07design.net/blog/?p=477

floatを使って崩れたサイトは恥ずかしい。CSSによる崩れない段組をつくろう。

一部だけwidthを指定したりするとNGみたい。全体を絶対値でしっかり指定することが大事。 ネタ元 CSSによる崩れない段組

コンテンツ内を開閉してくれるアコーディオンメニュー

http://www.css-lecture.com/log/javascript/019.html アコーディオンメニューって名前だったんだ。

スタイルシート 見出しメーカー

http://midashi-maker.v-colors.com/ 色を選ぶだけで簡単CSS作成

相対単位 em(エム) 1em = 1文字分の長さ

css

長さの単位 相対単位 em エム 1em = 1文字分の長さ ex エックスハイト 1ex = 「x」文字の長さ px ピクセル 1px = 画面上の1ピクセル 絶対単位 mm ミリメートル 10mm = 1cm cm センチメートル 1cm = 10mm in インチ 1in = 2.54cm pt ポイント 72pt = 1in pc …

CSS やってはいけないこと floatとは

css

floatで横に並んだ要素が足して100%になってはいけない。 98%以下になるように幅を指定する。 ※98%を越える場合、横に並べたいのに、下に並んでしまったりする。 floatした要素には必ず横幅(width)を指定すること。 floatした要素にmarginやpaddingを指定…