ホームページ制作のネタ発信

シンプル見出しシリーズ第5弾。今回もボーダーを使ってのデザインです。 サンプルはこちら

今回はhタグとstrongタグを使った併せ技！ サンプルはこちら

背景画像を使った見出し（タイトル）です。左上にグラデーションのかかった画像を配置することによって、万が一タイトルが2行のなってしまっても見た目の違和感をなくすことができます。 サンプルはこちら

シンプル見出しシリーズ第3弾。今回もボーダーを使ってのデザインです。よく見かけるあれです。 サンプルはこちら

サイドメニューのリスト部分やヘッダーメニューのリスト部分に使えるスタイル。 サンプルはこちら

ちょっと立体的なテーブルデザインを作ってみました。 僕はあまりこのタイプのテーブルはあまり使わないけど、まぁありかもね。 サンプルはこちら

pdfやdocなどの決まった拡張子にCSSを使って自動でアイコンを表示させる方法がphpspot開発日誌に紹介されていました。 とっても便利なのでゼヒ使ってみましょう。 ※IE6では表示されないのでj …

シンプル見出しシリーズ第2弾。 今回もボーダーを使ってのデザインです。それなりに利用頻度は高いかも！？ サンプルはこちら

最近はあまり使わなくなりましたが、定義型リストの横並びをやってみました。 日付の入るようなものはテーブルでいいと思うがどうでしょう？ もしくは、横並びにする必要はないのかも… サンプルはこ …

ボーダーを使ってのシンプルな見出しを作ってみました。 画像を使わないボーダーの見出しはバリエーションが豊富にあるので今後更新していきます。 サンプルはこちら

会社概要などのデザインをシンプルにしたい時に有効なテーブルCSSデザインです。 サンプルはこちら

ちょっとした時などに、わざわざ新しくCSSを定義しなくてもリスト風のスタイルがtext-indentでできます。 サンプルはこちら

今回はヘッダーなどに利用するグローバルメニューのご紹介です。 画像は一切使わず、CSSのみで実現してみました。 サンプルはこちら

もっともシンプルでよく使われている2カラムのレイアウトをご紹介。 特にはじめてCSSレイアウトにチャレンジする方には分かりやすいレイアウトだと思います。 サンプルはこちら

もっともオーソドックスでどこにでも使えるCSSテーブルデザイン。 ほぼこれ１つでテーブルCSSは大丈夫かも！？ サンプルはこちら

あったら便利なCSS TIPSを本日から不定期で更新していきます。 第１回目は見出しを取り上げました。h2,h3などの見出しに利用してください。特に毎回画像を作るのが面倒な時やcssの背景カラーでは物 …