HTML/CSS– category –
-
HTML/CSS
ステッキーヘッダー
ある地点まで縦にスクロールすると、上部の固定されたヘッダーの背景色や項目の色が反転するステッキーヘッダーについて今回は記述する。 今回は、ヘッダーの高さ分スクロールすれば反転するようにコードを記述する 1)HTML <header class="heade... -
HTML/CSS
ヘッダー各種
WEBサイトのヘッダー作成は、初学者がつまずきやすい所で、またさまざまなパターンがあるので時間がかかりがちである。そこで、頻出のパターンを洗いだしました。 【1行のヘッダー】 1行のヘッダーで左端に会社のロゴ、右よりにメニュー項目、更に右端に... -
HTML/CSS
カード3枚横並び
WEBサイト制作でかなりの頻度で出てくるカードタイプのコンテンツ3枚横並びを記述してみました。なお、最近ではグリッドレイアウトで記述する人もいるかと思いますが、ここでは古典的な?フレックスボックスで記述してみました。 ①HTML <div class=&qu... -
HTML/CSS
ボタンアニメーション
ホバーすると左から右に背景と文字色が反転するボタンです ①HTML <div class="detail-btn"> <a href="#">詳しく見る</a> </div> ➁CSS .detail-btn { background: #333333; color: #ffffff; font-size: 20px; ... -
HTML/CSS
各種ボタンの記述
WEBサイトを作成する上で必ずといっていいほど、ボタンがあります。ボタンの場合、ある程度パターン化されているので、スニペットを作成しました。 【 タイトルのみのボタン 】 ①背景色のないボタン <div class="contact-btn"> <a hre... -
HTML/CSS
ドロップダウンメニュー
ヘッダー項目をホバーすると、その項目の下層ページのメニューが表示されるドロップダウンメニューを作成しまた。 1)HTML 2)CSS -
HTML/CSS
サイトの文字サイズ変更
サイトの文字の大きさを、ボタンによって動的に変更する機能を最近始めて実装しました。 画像で示すとこんな感じです 1)HTML 2)CSS 3)JS
12