2024年– date –
-
HTML/CSS
ハンバーガーメニュー
スマートフォンでのWEBサイトの画面で、画面の右上に上、中、下の三本線の図形が表示されている。これはハンバーガーメニューと言われ、そこをクリック(スマホではタップ)すると、メニューの項目が表示される。表示されたメニューの右上に×ボタンがあり... -
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 -
自己紹介
私がWEB制作フリーランスを目指した理由
10年ほど前まではIT業務を行っていましたが、その会社が親会社に吸収されした。そのあおりを受けて、販売業務など、別の仕事になりました。 8年ほど前、とある部署に配属になった時、その部署は定年が近い人か、定年後再雇用の人が多くいました。その人... -
自己紹介
自己紹介
愛媛県松山市を拠点にコーディング、WordPress構築を中心に活動しております、まっちゃんと申します。(またの名を愛媛まっちゃん)年齢は60歳。今年2月で定年退職です。 出身地は愛媛県新居浜市で、高校卒業後、京都の立命館大学に進学し、その後東京のI...
12