HTML CSS

bodyのbackground-colorにbackgroundを重ねてその上に画像や文字の実装をやってみました。【サンプルコードあり】

今回は、background-colorでページ全体にカラー設定 さらにページの真ん中のセクションのbackgroundに違う パターンのデザインを重ねて表示してみました。 この実装にはいろんな方法がありますが今回は background-...
プログラミング

フリーランスや在宅ワークの拠点。事務所代わりに使用可能。ちょっとした作業場所の確保にも便利なこコワーキングスペース。

最近、コワーキングスペースでの共同作業 が結構人気になってます。 コワーキングスペースや、レンタル事務所などの サービスも数が増えてます。 この記事では、そんなえあワーキングスペースレンタル のサービスを参考でかいてみました。 コワーキング...
HTML CSS

画像に色の幕をあててその上に文字を重ねて表示する方法。【サンプルコードあり】

画像に薄い色をあてて。その上に文字を表示させる 方法。 よく使うパターン2つ書いてみました。 文字が少ないパターン この場合、よく使うのが画像の疑似要素に カラーをあてて、position使って文字を浮かせて 最前面に表示させる。 HTML...
プログラミング

FileZilla さくらのレンタルサーバーのどこの情報入れるのか記事に書きました。情報を登録する時ちょっとわかりにくかった!

FileZillaにさくらのレンタルサーバーを登録する時 項目の表示内容がちょっと違ったんで、何回かエラー になったんで、記入するべき場所を残してみました。 FileZillaにさくらレンタルサーバーを登録の仕方に 悩んでる場合は参考にして...
HTML CSS

【サンプルコードあり】ヘッダーのナビゲーションメニュー 3パターン作ってみた

サイトのナビゲーションメニューでよく見る 3タイプのコードを記録してみました。 HTML・CSSのサンプルコードあり よかったら参考にしてください。 今回作成したナビゲーションメニュー リセットCSS パターン1 文字inline使用 li...
VScode

Visual Studio Code英語表示になったのを日本語表示にする方法 VScode言語設定 図解いり

VScodeのメニュー部分を日本語にする方法を図を使って説明してます。 Visual Studio Code使ってたら、突然メニュー部分が突然英語表示に ちょっとビビった! 今までは日本語で表示されてたのに・・ そんな時の対処法簡単だったん...
HTML CSS

【サンプルコードあり】テキスト(文字) を枠線だけで表示する方法。文字の中透過して枠線で文字

文字の中が透明で、文字の外枠だけが表示される方法。CSSでテキスト文字の縁取りをする方法を書いてます。サンプルコードも記述してますので初心者の人必見。CSSで 装飾してると後で色の変更やサイズ変更などのカスタマイズも簡単になり文字の表現が豊かで綺麗になる。
HTML CSS

Googleフォームと連携してサイトのお問い合わせフォームの作成やってみた。IDの取得がちょっとわかりにくかった【サンプルコードあり】

サイトのお問い合わせフォームとGoogleフォームと連携すると 見た目を自由にカスタマイズすることが出来る。 その連携が今回出来たんで、忘れないように記事にしました。 よかったら参考にして下さい。 今回行った手順(作り方) HTMLで表示し...
HTML CSS

【サンプルコードあり】drawer.js を使って、ドロワーメニューを作成した時、内部リンクの場合メニューが閉じない現象になるので、それを解消する方法が簡単だった。

drawer.js を使うと ドロワーメニューを簡単に作成することが可能 今回 drawer.jsで、ページ内リンクをクリックした時、 ページは変化するけど、メニューが開いたままになった。 ドロワーメニューメニューの閉じない場合。 解決方法...
HTML CSS

【サンプルコードあり】display flexやinline-block で横並びでボタンの配置の為 position: absolute したら要素が下に潜り込んでしまった時にやった事

flex や inline-block;で横並びした時、端のボタンをposition: absolute;で配置したら、浮かせた要素の下に入り込んで重なってしまってちょっと悩んだ。試行錯誤の末解決出来たのでそのコードも書いてます。