元・地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

リストタグ(<UL>、<OL>)の左マージンはpadding-left。<DL>だけmargin-left【Webデザイン・CSS】

Webデザインをする上でかねてから気になっていたことをしっかりとしらべてみました。
それは、リストタグの左マージンのこと。 
実際は、リセットCSSで「margin:0;padding:0」 をしてしまうので、気にすることはないのですが、
でも、知っておいても損はないですもんね。 

 UL・DLのマージン
左がソース、右がブラウザ表示。
今回調べたのは赤で書かれている初期マージンの部分。 
>> 続きを読む

画像の下にどうしても隙間が残る場合は<img>タグにvertical-align:bottomが正解【Webデザイン・CSS】

これは知らなかった。。というか、ここまで意識してなかった。。

imgタグの罠

>> 続きを読む

jQueryスライドショー「bxSlider」のレイアウトをカスタマイズする際に注意すべきたったひとつのポイント

なんとも有名なjQueryを使用したスライドショー(スライダー)「bxSlider」ですが、
デザインがなかなか思うようにいかなくて嫌いになりそうになっていました。
が、その理由がわかったので報告したいと思います。

なお、 「bxSlider」の設置等に関しては以下のサイト等を参考にしてください。

■ jQuery Content Slider | Responsive jQuery Slider | bxSlider
□ jQueryスライドショー「bxslider」の使い方まとめ - NAVER まとめ

今回設置させていただいたスライドショー。
右上、通常の写真風な部分で「bxSlider」を使っています。
>> 続きを読む

ブログの角丸部分をCSS3の「border-radius」プロパティに変えてみた【Webデザイン】

今年、HTML5及びCSS3が正式に勧告されるなんて言われていますが、いつ頃なんでしょうかね?
いずれにしてもそろそろ当ブログもCSS3を盛り込んだコーディングに変えていこうということで、まずは、角丸部分をCSS3で書いてみることにしました。
右のメニューの部分です。見た目は変わっていませんが、CSS3になってます。
(古いブラウザだと角丸じゃなくてソリッドな直角になってると思います。 )
ちなみに上のヘッダー部分はオール画像。

CSS3で角丸

>> 続きを読む

CSSだけで作る最も単純なプルダウンメニュー(ドロップダウンメニュー)【Webデザイン】

今まではIE6の存在等もあってCSSだけでプルダウンメニューを作るのはほぼ不可能でしたが、CSSがより多くのブラウザでしっかりと反映されるようになってきたので、CSSだけでプルダウンメニューを書くことができるようになりました。
今回は、その手順を解説していこうと思います。

WEB

続きはこちら

最もシンプルなオリジナルのリセットCSSを考えてみた【Webデザイン】

そろそろHTML5が正式に勧告される昨今に今更感漂いますが、個人的にそろそろ積み重ねをかたちにしてやる頃だなぁというのもあって、オリジナルのリセットCSSを考えてみました。
考えるにあたり、とにかくシンプルに最低限のところのみ記述することを心がけました。
結果として非常に短いCSSになってしまいましたが、そのあたりはご了承下さい。

WEB

>> 続きを読む

Webデザイン時のHTML・CSSコーディングにおけるCSSセレクタの優先順位の出し方

WebデザインにおいてHTML同様重要となってくるCSS(カスケードスタイルシート)に関して、セレクタの優先順位をまとめてみることにしました。
同じプロパティが各セレクタに書かれている場合、優先順位の高いセレクタに対して書かれたプロパティ値の方が適応されるというわけです。

>> 続きを読む

やっちゃった!「IE9」、「IE10」でHelvetica(ヘルベチカ)が表示されないバグ

相変わらずIE(インターネットエクスプローラー)はこんな酷いことをやってるんですねぇ。。

□ IE9, IE10が抱えるHelvetica問題について初めて知った件 | IDEA*IDEA

>> 続きを読む

WordPress(ワードプレス)でヘッダー部に入るCSSリンクをページごとに変える方法 #wp

最近では、「サイト作成」=「CMS導入」=「WordPress対応」という仕事が多くなってきました。
もともと、WordPress(ワードプレス)はブログ用CMSだったのですが、最近のバージョンアップで一般サイトでも十分使える機能が搭載されてきてるんですよね。

ただし、一般的なサイトではトップページとコンテンツページが違うデザインのことが多いのに比べ、
WordPressで作られるテーマ(テンプレートの集まり)の多くはヘッダー、フッター共通のものばかりです。
フッターは、まあいいでしょう。困るのはヘッダーです。
ヘッダーにはデザインを司るのに重要なのはCSS、そのリンクはがあるわけでして、
これをページごとに変えてやることでデザインを変えてあげているという人も結構いるんじゃないでしょうか?

>> 続きを読む

内包されたDIVにmarginを設定すると親要素にも同じマージンが設定されることがある【CSS】

これはわからんわ。

生徒さんの一人が陥った罠。
先生も知りませんでしたごめんなさい。

□ 【CSS Tips】ネストされたボックス要素のmargin-topのブラウザ毎の解釈の違い−Margin Collapsing - Awaresoft
空でないコンテンツ、ボーダー、パディングまたはclearで分けられていない、並列またはネストによって隣接した二つ以上のボックスのマージンは結合されて一つになる。

>> 続きを読む

「position:absolute」を子要素に使いたいときは親要素に「position:relative」【CSS】

CSSには「position(ポジション)」というプロパティがあって、これを使って「position:absolute」と指定すると、
画面上の好きな場所にそのブロック要素を配置することができます。
ただし、自由に動かせすぎるだけに、注意しないとこういったことになりかねません。

>> 続きを読む

「float」で親要素の高さがなくなってしまったときは親要素に「float」【CSS】

HTML・CSSコーディングで2カラム、3カラムを実装するときに最も使用頻度の高いCSSプロパティはfloatでしょうね。
左のボックス(div等)にfloat:left、右のボックス(div等)にfloat:rightとすることで2カラムを作ることができます。
(それぞれ、widthの設定も忘れずに) 
ただ、これを囲む親要素のバックグラウンドに色を入れたいときなどにうまくいかないことがあります。
たとえばこんな例です。

>> 続きを読む

CSS2.1まとめ書き−list-style編(HTML・CSSリファレンス)

CSS2.1まとめ書きは今回のlist-styleで一応最終回にしたいと思います。
margin、padding等もありますがこの辺りはまあ、紹介するまでもないだろうということで。。

ってか、CSS2.1の地点で今さら何をという話なんですけどね。

▼もうそろそろこちらを勉強した方がいいかもしれません。
>> 続きを読む

CSS2.1まとめ書き−background編(HTML・CSSリファレンス)

CSS2.1まとめ書きも3回目。
今回はバックグラウンドカラー(背景の色)やバックグラウンドイメージ(背景に敷くイメージ)を設定するプロパティbackgroundに関してです。
これは、WebをCSSでデザインするにあたって非常に重要になるプロパティなので、しっかり覚えておいたほうがいいでしょう。
まあ、Dreamweaver使っちゃえば簡単に設定できちゃうんですけどねぇ。。

>> 続きを読む

CSS2.1まとめ書き−border編(HTML・CSSリファレンス)

CSS2.1まとめ書きとしていますが、3.0でも基本的には使えると思います。
一般的には上位互換ですからね。

で、今回は枠罫線「border」。
特に「border」に関しては様々なプロパティ、様々な書き方があるので臨機応変に書いていく必要があります。

>> 続きを読む




最新コメント