HTML CSS HTML・CSSでドロップダウンリストのクリックしたらリストが表示されるパターンを作成してみました。【サンプルコードあり】
HTML・CSSでドロップダウンリストを作成してみた。今回は、ホバーじゃなくクリックでリストが下に出てくる方法でやってみました。今回は、HTML・CSSだけでやってます。JavaScriptの指定なども加えるともっと動きをつけることも可能に...
inopro
HTML CSS 
VScode VScode スニペット登録方法と注意点記事にしました。コードを書く時間短縮・スペルミスによるエラー減少になるのでオススメ！【サンプルコード有り】
VScodeを使ってコードを書いてる時、スニペットに前もって任意のコードを登録しとくと、登録した文字で自動でコードを記入してくれる機能がある。その登録方法と注意点を記事にしてみました。この作業は、スニペットを登録すると言います。登録していけ...
HTML CSS Swiperで画像にbox-shadowの効果を実装する１例とSwiperのレスポンシブの指定方法わかったんで記事にしてみました。【サンプルコードあり】
Swiperで画像をスライドする時に、画像に影をつける方法を、図を使って説明。また、Swiperで表示する画像の枚数を画面サイズで変更する、レスポンシブの指定もやってみました。この方法実装しようとした時に、いろいろ検索したがピンとくる情報が...
HTML CSS デザインカンプ Adobe IllustratorのデータをFigmaで確認する方法ないか調べてみた。
コーディングの仕事でカンプデータの受け取りの方法はXD・Illustrator・Figmaを使用する場合が多い。私の場合は、今はFigmaが多い。今回、カンプはAdobe Illustratorでとゆうことで、ちょっと慌てました。そこはクラ...
HTML CSS 特定商取引法に基づく表示をHTML・CSSで書いてみた。tableタグ・listタグ・dlタグ各タイプで作成。【サンプルコードあり】
特定商取引法に基づく表示のページどうしてますか？HTMLで書いたり、画像にしてアップしてる場合もみかけます。今回HTMLでコーディングしてみました。完成はこんな感じです。サンプルコードもこの記事の中で掲載しております。今回HTMLでコーディ...
WordPress WordPressでサイト構築時、ページの上部の黒いバー（ツールバー）を消す方法やってみた。簡単だけどわかりにくいところにある。
Wordpressでサイト作成時、管理画面でサイトを開くと画面の上部に表示される黒いバーを消す方法。この黒いバーが表示された状態で、コードを書いて変更しても、確認時にこのバーが表示されて、その分見え方が変わってくるので、カスタマイズ環境では...
プログラミング drawerメニューがハンバーガーボタンをクリックしても 表示されない時の解消方法。ChatGPTさんに聞いてみたらJavaScriptライブラリがページで競合が原因
JavaScriptを使ってdrawer.jpの設定が結構苦手で今回もdrawerメニューがハンバーガーボタンをクリックしても表示されないという、沼にはまっちゃいました。いろいろ試行錯誤した結果、解決できたのでこの記事で共有したいと思います...
HTML CSS 画像を中心に文字が周囲を回転（スライド）する設定やってみた【サンプルコードあり】
今回は、画像を中心に配置してその周りをテキストが回転してるデザインを実装してみました。この方法は、JavaScriptを使って行う方法とSVGを使って行う方法があります。この記事ではJavaScriptを使って下記の実装を行った方法を書いて...
HTML CSS 画像とテキストコンテンツを横並び 1枚の画像を少し上にズラして配置。親要素の幅越えて画面いっぱい表示。positionとz-index 疑似要素使用 【サンプルコードあり】
画像とテキストボックスを横並びにして重ね１枚の画像を少し上にずらした感じで配置。後ろにラインを入れたデザインをコーディングしてみました。後半では、親要素の幅を超えて画面いっぱいに表示させる方法も書いてます。今回は、positionとz-in...
HTML CSS Scroll設定 矢印が下向きに流れる設定 HTML・CSS・animationで設定する方法でコード書いてみた。【サンプルコードあり】
よく見るページのトップ画像にある、下にスクロールする画像の設定を、HTML・CSSで設定してみた。下向き矢印が下にスクロールする設定です。background-imageで画像を設定してスクロール矢印の動きは、animationで動きをつけ...