まっちゃんlog

スマートフォンでのWEBサイトの画面で、画面の右上に上、中、下の三本線の図形が表示されている。これはハンバーガーメニューと言われ、そこをクリック（スマホではタップ）すると、メニューの項目が表示される。表示されたメニューの右上に×ボタンがあり...

ある地点まで縦にスクロールすると、上部の固定されたヘッダーの背景色や項目の色が反転するステッキーヘッダーについて今回は記述する。 今回は、ヘッダーの高さ分スクロールすれば反転するようにコードを記述する １）HTML <header class="heade...

WEBサイトのヘッダー作成は、初学者がつまずきやすい所で、またさまざまなパターンがあるので時間がかかりがちである。そこで、頻出のパターンを洗いだしました。 【１行のヘッダー】 １行のヘッダーで左端に会社のロゴ、右よりにメニュー項目、更に右端に...

WEBサイト制作でかなりの頻度で出てくるカードタイプのコンテンツ３枚横並びを記述してみました。なお、最近ではグリッドレイアウトで記述する人もいるかと思いますが、ここでは古典的な？フレックスボックスで記述してみました。 ①HTML <div class=&qu...

ホバーすると左から右に背景と文字色が反転するボタンです ①HTML <div class="detail-btn"> <a href="#">詳しく見る</a> </div> ➁CSS .detail-btn { background: #333333; color: #ffffff; font-size: 20px; ...

WEBサイトを作成する上で必ずといっていいほど、ボタンがあります。ボタンの場合、ある程度パターン化されているので、スニペットを作成しました。 【 タイトルのみのボタン　】 ①背景色のないボタン <div class="contact-btn"> <a hre...

ヘッダー項目をホバーすると、その項目の下層ページのメニューが表示されるドロップダウンメニューを作成しまた。 １）HTML ２）CSS

サイトの文字の大きさを、ボタンによって動的に変更する機能を最近始めて実装しました。 画像で示すとこんな感じです   1)HTML 2)CSS 3)JS

１０年ほど前まではIT業務を行っていましたが、その会社が親会社に吸収されした。そのあおりを受けて、販売業務など、別の仕事になりました。 ８年ほど前、とある部署に配属になった時、その部署は定年が近い人か、定年後再雇用の人が多くいました。その人...

愛媛県松山市を拠点にコーディング、WordPress構築を中心に活動しております、まっちゃんと申します。（またの名を愛媛まっちゃん）年齢は60歳。今年２月で定年退職です。 出身地は愛媛県新居浜市で、高校卒業後、京都の立命館大学に進学し、その後東京のI...