ホームページ作成に使用するCSS・htmlタグについて、備忘録・コピペ使用のために作成した一覧です。一般的なCSSやタグは割愛しています
CSSのみで、印象的なヘッダー
背景画像を使用することなく、初回訪問者に印象的なヘッダー用CSS
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タグ使用