ホームページ作成に使用する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タグ使用