css

プルダウンメニュー(select)の文字サイズを変える

フォーム内で使われるselect メニューで文字を大きくしたかったんだけど、ちょっととまどったのでメモとして。

文字サイズ変更はselect要素に設定してみるも変わらず。。。

調べてみたらボーダーの設定を変更すると有効になるとのこと

こちらのサイトを参考に
http://manodeldio.exblog.jp/9527929

プラスフォーム関連で使いそうなスタイル

フォームイメージ

webフォント(Font Awesome)の使い方

ウェブサイトでアイコンを使いたいときに、画像ではなく、Webフォントを使って表現することって多くなりました。
手軽だし、サイズが変わっても荒くならないのもいいですよね。

いろいろなWebフォントサービスがありますが、Font Awesomeが一番有名でしょうか。

Font Awesome  the iconic font and CSS toolkit

 

Font Awesome
https://fortawesome.github.io/Font-Awesome/

種類も多いし、導入し易いこともあり時々使います。

使いかた簡単に。

CDNでも提供されているので、ダウンロードせずに<head></head>内に記述するだけでも使えます。

ファイルをダウンロードして使う場合は、
ダウンロードしたフォルダの中にあるcssとfontsフォルダを自分のサイトにアップロード。

fontsフォルダの場所を変えた場合は、font-awesome.min.css内の

@font-face {
font-family: ‘FontAwesome’;
src: url(‘../fonts/fontawesome-webfont.eot?v=4.3.0’);
src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0’) format(‘embedded-opentype’), url(‘../fonts/fontawesome-webfont.woff2?v=4.3.0’) format(‘woff2’), url(‘../fonts/fontawesome-webfont.woff?v=4.3.0’) format(‘woff’), url(‘../fonts/fontawesome-webfont.ttf?v=4.3.0’) format(‘truetype’), url(‘../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

を変更する必要あり。
※Sass,LESS用のファイルも用意されています。

基本的な使い方

fa + fa-○○○

<i class=”fa fa-camera-retro”></i> fa-camera-retro

サイズを大きくしたい場合は

<i class=”fa fa-camera-retro fa-lg”></i> fa-lg
<i class=”fa fa-camera-retro fa-2x”></i> fa-2x
<i class=”fa fa-camera-retro fa-3x”></i> fa-3x
<i class=”fa fa-camera-retro fa-4x”></i> fa-4x
<i class=”fa fa-camera-retro fa-5x”></i> fa-5x

よく使いそうなリスト要素で使う場合

fa-ul,fa-li を加えると、アイコンとテキストの幅を持たせてくれます。

font2

 

上記はhtml に i要素を記述することになりますが、htmlには余計なタグを入れたくない場合は、contentプロパティでもいけます。

fa-arrow-circle-rightのユニコード、 [&#xf0a9;]の先頭の&#xを\に変更します。フォントファミリーにFontAwesomeを指定。

font1

 

アイコン・ユニコードの一覧はfont awesome チートシートで
http://fortawesome.github.io/Font-Awesome/cheatsheet/

使い方サンプルはこちらから
http://fortawesome.github.io/Font-Awesome/examples/

 

 

読み込みを少なくしたいときには、必要なファイルだけインポートするファイルという手も。

 

CSSだけでボーターを重ねる

しばらく書くのをサボってしまいました–;

また今日から頑張ります。

やりたかったのはこんな感じのやつです。

demo

一昔前なら、画像で表現していたと思うんですがスタイルシートでできるよなーと。

:after擬似クラスを使ってみました。

HTML

wrapper 要らないですね・・・

CSS

デベロッパーツールでの確認ですが、IE8でもちゃんと表示、IE7は擬似クラス非対応なので、黒いボーダーのみ表示されていました。

まあこれはこれでいいですね

DEMO

 

:nth-childの基本とIE対応

リスト、テーブルやカラムを並べるときに、:nth-child は大活躍の疑似クラス。

使い方の基本

○番目のエレメントを指定する
※3番目の場合

 奇数、偶数を指定する

※奇数

※偶数

 ○番目以降をすべて指定する
※3番目以降を指定

 IE8以下での対応

ハックを利用する
3番目を指定する場合

:first-childは ie8に対応しています。
jsを使いたくない場合はこの方法で。でも○番目ごとになどは難しい。

jQueryで対応する

jqueryで「addClass」を定義して対応することができます。

3つごとのliに「li-third」というクラスが付加されます。
nth-childだけ対応させればいいだけなら、直接記述する方法でもいいのかも。

Selectivizrを利用する

css3セレクタをIE6~IE8に対応させることができるjavascriptライブラリです。
nth-child以外にも適用させたいcss3スタイルがあればこちらの方がいいですよね。

http://selectivizr.com/

※利用するときはjqueryも一緒に(一緒に利用するライブラリによって、使えるcss3も違ってきます。詳しくは、selectivizrのトップページに表示あり)

Selectivizr   CSS3 pseudo class and attribute selectors for IE 6 8

tab css style タブメニューのCSS

コンテンツを効率的にレイアウトしたいときにタブを使ってレイアウトすることはよく有ります。

そんな時にCSS+javascript で実装するサンプル

javascript は Yetii (ちょっと古いけど使いやすいので)を使います。

Yetii
http://www.kminek.pl/lab/yetii

Yetiiの設置については後日改めて。今回はCSSでのレイアウトを。

html

CSS【1】

タブの周りをラインで囲み、アクティブなタブが全面にくるようなイメージです。

tab style  example1

DEMO

Stylesheet

リストの横並びは、display:inline で対応します。floatだと余分なスペースができてうまく行かなかったので。

CSS【2】 float の場合

ラインを使わず、塗りつぶす感じならfloat でもいい感じになります。

tab style  example2

DEMO

stylesheet

基本的なタブスタイルでした。

 

SNSボタンをきれいに横並びに

HP上にSNSの各ボタンを並べるのを今更ながらやってみたら、余分なスペースがあったり、ガタガタになってしまったので、今後きれいに横並びできるようにするための覚え書きです。

今回は、Twitter、Google+、Facebookの3つです。

横に並べる html

デフォルトでは以下の様な状態です。

sns0

とりあえず、横並びにしてみる

すると、余白が・・・

sns1

Twitter は 124px、Google+は90pxぐらい自動的にwidth が指定されているようです。

なので以下のようにCSS修正

twitter とgoogle+はワイドを指定して、はみ出た部分はli にoverflow:hidden で対処しました。

Facebookで上部に余白ができるのは line-height:1 で余白を消すことができました。

sns2

 

こちらのサイト参考にさせていただきました:
TwitterやFacebookなどのソーシャルボタンを横に並べて設置する
http://s115.jp/wordpress/the-sort-method-next-to-the-social-buttons/

リンクの周りの点線(or線)を消す

リンクをクリックしたときにでるまわりの点線?
IEやFirefoxで表示される。これを表示させたくない場合は

とすると消せるそうなんですが、tabキーを使ってリンクを移動している人たちにとっては、その点線が見えないと、どこを移動しているかわからないのでとても不便だそうです。

ただイメージマップ(クリッカブルマップ)のリンクには、スタイルシードだけでは効かなかったような。。。
(未確認)
その場合は、アンカーにonfocus属性を追記すると消えます。

 

jquery無しCSSのみの縦型ドロップダウンメニュー

アニメーションがなくても良い場合はcssだけドロップダウンメニュー作れます。

HTML

CSS

サンプルHTML

http://shibamaru.s602.xrea.com/demo/vertical_dropdownnav.html

 

 

IEで動作確認していないので崩れているかも・・・・

WordPress 記事3件ごと、4件ごとに〜する

アーカイブページなどでエントリーを3件とか4件とかで横並びにしたいことってたまにありますよね

ちゃんとプログラムを理解している人ならすごく簡単なことだと思うのですが、ノンプログラマの私には毎回戸惑います。

なのでこれを機会にあらためておさらいを。

通常の記事ループ

4記事ごとにdivで囲みたい

$hoge = 1;

ループの回数を入れる変数

$hoge % 4 == 1 && $hoge != 1

4で割った余りが1で、かつカウンターが1(最初)でなければdivを閉じて次のdivタグを出力 します。

$hoge++;

ループ回数を1つ増やす。

 

 

参考にさせてもらった記事

[解決済み] [閉] 記事を決められた数毎にタグ(div等)で囲みたい
http://ja.forums.wordpress.org/topic/1101

WordPressのエントリーを横並びにしてぴったり揃える
http://www.webopixel.net/wordpress/140.html

web pixelさんではoverflow:hidden を使ってcssだけで横並びする方法も記載せれています。

久しぶりのIE7 バグ

最近はIE7は動作対象からはずすことが多くなったので、忘れていた(知らなかった?)バグに遭遇。備忘録として残します。

 

その1: floatした要素の中身が表示されたり、されなかったりする。

cssでdt,ddを横並びさせます。

こんな感じで設定してたのですが、IE7で見ると、2番目のdtの中の要素が
消えている!

いつものようにググってみたら、同じ症状ではないですが、参考になるサイトを見てやってみたら表示されました。

それは、消えた要素の親要素にwidth:100%を指定するということです。
height:1px;でもいいみたいです。

私の場合は、width:100%;を指定したら解決できました!

floatした際に背景が消える件(IE編)
http://blog.webcreativepark.net/2007/01/08-231453.html

 

その2:インライン要素の上下のボーダーが消える

どうも、高さが親要素の高さを超えているのが原因らしいです。

これも解決方法みつけました!

消えるインライン要素に

を加える方法。

参考になりました。ありがとうございます!

インライン要素に指定したパディングやボーダーの上下が消えるhttp://pentan.info/stylesheet/bug/winie046.html

 

今さらながら勉強になります。。。。