タップして閉じる


ホームページ作成に使用するCSS・htmlタグについて、備忘録・コピペ使用のために作成した一覧です。一般的なCSSやタグは割愛しています

CSSのみで、印象的なヘッダー



背景画像を使用することなく、初回訪問者に印象的なヘッダー用CSS

CSSだけで作成したヘッダー

CSSのみで光沢のあるボタン



CSSのみで、光沢のあるボタンを作成する場合、解像度の高いモバイル端末では、要注意。サイズと色を調整すればモバイル端末でも使える。

CSSだけで作成した光沢のあるボタン一覧


CSSのみで横型・縦型のドロップダウン式のレスポンシブメニュー




CSSのみで、ドロップダウン式のレスポンシブメニュー。使用端末の有効画面幅を元にJavascriptで振り分け後に、メニュー部分は、Javascript使用せずに完全にCSSのみで、ドロップダウン

CSSのみで横型・縦型のドロップダウン式のレスポンシブメニュー


CSSのみで背景画像を移動



CSSのみで背景を縦に移動

CSSのみで背景を横に移動

CSSのみで縦横・上下左右に移動しながら背景色を切替

CSSのみで背景をマウスオンで右へ拡大


htmlのボタンタグをCSSで加工



ボタンタグのサイズのみ変更し、マウスオンで文字色を変える

ボタンタグに背景色等のスタイルを加えた場合

inputタグを使用して、ボタンに背景画像

ボタンに特殊な内容を表示


送信フォーム用htmlとCSS



フォームに見出しを付けて枠で囲む


画像をCSSで変形・マウスオンで切り替え




画像の下に解説に解説を付けるhtmlタグ

canvasタグで画像を変形

CSSでマウスオン画像切替


DIVレイアウト(特殊)



同じDIV内で2列。幅指定等一切不要(フルスリーンに使える)

同じDIV内で文章を3列で表示し、仕切り線付。


ページのアクセントとして使用するマーキー




通常マーキーは、幼稚な印象を与えるので使うべきではないが、バナーリンク用は使用可。ただし、お客様要許可


マウスオンでのカーソルの形を変える




マウスが乗った場合のカーソルの形状を変えるHtmlタグ一覧


リンクタグとCSS




1枚の画像に複数のリンクを加える

list-styleにイメージ使用

ulタグで枠あり、list-styleにイメージ使用しない場合

番号付でリストを表示する場合olタグ使用