ホームページ作成用CSSとhtml

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

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

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

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

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

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

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

CSSのみで背景画像を移動

CSSのみで背景を縦に移動

CSSのみで背景を横に移動

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

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

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

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

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

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

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

送信フォーム用htmlとCSS

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

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

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

canvasタグで画像を変形

CSSでマウスオン画像切替

DIVレイアウト（特殊）

同じＤＩＶ内で２列。幅指定等一切不要（フルスリーンに使える）

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

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

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

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

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

リンクタグとCSS

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

list-styleにイメージ使用

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

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