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

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

タグ ：

CSS

Webデザイン

リスト

UL

OL

DL

マージン

margin

padding

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

タグ ：

img

imgタグ

vertical-align

bottom

Webデザイン

CSS

画像

隙間

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

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

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

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

タグ ：

jQuery

bxSlider

JavaScript

スライダー

CSS

レイアウト

Webデザイン

コーディング

Web覚書

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

タグ ：

CSS

角丸囲み

角丸

border-radius

CSS3

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



＜続きはこちら＞

タグ ：

プルダウンメニュー

CSS

CSS3

ドロップダウンメニュー

display

overflow

transition

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

タグ ：

CSS

HTML

Webデザイン

コーディング

デザイン

リセットCSS

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

タグ ：

優先順位

CSS

HTML

Webデザイン

コーディング

セレクタ

プロパティ

プロパティ値

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

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

タグ ：

iE10

IE9

インターネットエクスプローラー

Internet_Explorer

フォント

font-family

CSS

Helvetica

ヘルベチカ

バグ

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

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

タグ ：

WordPress

ワードプレス

ヘッダー

CSS

header.php

function.php

条件分岐

if

PHP

これはわからんわ。

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

□ 【CSS Tips】ネストされたボックス要素のmargin-topのブラウザ毎の解釈の違い−Margin Collapsing - Awaresoft

空でないコンテンツ、ボーダー、パディングまたはclearで分けられていない、並列またはネストによって隣接した二つ以上のボックスのマージンは結合されて一つになる。

タグ ：

margin

margin-top

マージン

CSS

カスケードスタイルシート

親要素

入れ子

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

タグ ：

position:absolute

position:relative

絶対配置

相対配置

子要素

親要素

CSS

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

タグ ：

CSS

CSS2.1

float

HTML

float:left

プロパティ

カスケードスタイルシート

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

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

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

タグ ：

CSS

CSS2.1

list-style

list-style-type

list-style-image

list-style-position

リファレンス

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

タグ ：

CSS

CSS2.1

background

バックグラウンド

バックグラウンドイメージ

バックグラウンドカラー

リファレンス

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

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

タグ ：

CSS

CSS2.1

border

border-width

border-bottom

solid

1px

罫線

ボーダー

リファレンス