HTML CSS 画像を中心に文字が周囲を回転（スライド）する設定やってみた【サンプルコードあり】
今回は、画像を中心に配置してその周りを テキストが回転してるデザインを実装してみました。 この方法は、JavaScriptを使って行う方法と SVGを使って行う方法があります。 この記事ではJavaScriptを使って下記の実装を 行った方...
inopro
HTML CSS 
HTML CSS 画像とテキストコンテンツを横並び 1枚の画像を少し上にズラして配置。親要素の幅越えて画面いっぱい表示。positionとz-index 疑似要素使用 【サンプルコードあり】
画像とテキストボックスを横並びにして重ね １枚の画像を少し上にずらした感じで配置。 後ろにラインを入れたデザインをコーディング してみました。 後半では、親要素の幅を超えて画面いっぱいに表示 させる方法も書いてます。 今回は、positio...
HTML CSS Scroll設定 矢印が下向きに流れる設定 HTML・CSS・animationで設定する方法でコード書いてみた。【サンプルコードあり】
よく見るページのトップ画像にある、下にスクロール する画像の設定を、HTML・CSSで設定してみた。 下向き矢印が下にスクロールする設定です。 background-imageで画像を設定して スクロール矢印の動きは、animation で...
HTML CSS ボタン作成 HTML・CSS ボタン作成１サイトに数種類のbuttonをコーディングする時の簡単なやり方。コンポーネント【サンプルコードあり】
button作成 HTML・CSSコーディングの時。いろんなボタンがあるが 多くのサイトは、１サイトで数パターンのボタンが必要に なる場合が多い。 そんな場合は、まず基本のボタンを１つ作成して、 そのボタンを基本にして作っていくようにしてま...
プログラミング GitHubを使って、作成したサイトを公開してみた。2023年最新 簡単なサイトならドメイン取得しなくても出来るので便利
GitHubでのサイトの公開を始めてやってみました。 完成したサイトの公開の方法、ちょっとわかりにくかった ので、今後の参考で記事にしてみました。 今回は、個人でVScodeでコーディングして 作成したサイトをGithubで公開する際にやっ...
HTML CSS bodyのbackground-colorにbackgroundを重ねてその上に画像や文字の実装をやってみました。【サンプルコードあり】
今回は、background-colorでページ全体にカラー設定 さらにページの真ん中のセクションのbackgroundに違う パターンのデザインを重ねて表示してみました。 この実装にはいろんな方法がありますが今回は background-...
プログラミング フリーランスや在宅ワークの拠点。事務所代わりに使用可能。ちょっとした作業場所の確保にも便利なこコワーキングスペース。
最近、コワーキングスペースでの共同作業 が結構人気になってます。 コワーキングスペースや、レンタル事務所などの サービスも数が増えてます。 この記事では、そんなえあワーキングスペースレンタル のサービスを参考でかいてみました。 コワーキング...
HTML CSS 画像に色の幕をあててその上に文字を重ねて表示する方法。【サンプルコードあり】
画像に薄い色をあてて。その上に文字を表示させる 方法。 よく使うパターン２つ書いてみました。 文字が少ないパターン この場合、よく使うのが画像の疑似要素に カラーをあてて、position使って文字を浮かせて 最前面に表示させる。 HTML...
プログラミング FileZilla さくらのレンタルサーバーのどこの情報入れるのか記事に書きました。情報を登録する時ちょっとわかりにくかった！
FileZillaにさくらのレンタルサーバーを登録する時 項目の表示内容がちょっと違ったんで、何回かエラー になったんで、記入するべき場所を残してみました。 FileZillaにさくらレンタルサーバーを登録の仕方に 悩んでる場合は参考にして...
HTML CSS 【サンプルコードあり】ヘッダーのナビゲーションメニュー 3パターン作ってみた
サイトのナビゲーションメニューでよく見る ３タイプのコードを記録してみました。 HTML・CSSのサンプルコードあり よかったら参考にしてください。 今回作成したナビゲーションメニュー リセットCSS パターン1 文字inline使用 li...