HTML CSS 画像に色の幕をあててその上に文字を重ねて表示する方法。【サンプルコードあり】
画像に薄い色をあてて。その上に文字を表示させる 方法。 よく使うパターン２つ書いてみました。 文字が少ないパターン この場合、よく使うのが画像の疑似要素に カラーをあてて、position使って文字を浮かせて 最前面に表示させる。 HTML...
HTML CSS
HTML CSS 
HTML CSS 【サンプルコードあり】ヘッダーのナビゲーションメニュー 3パターン作ってみた
サイトのナビゲーションメニューでよく見る ３タイプのコードを記録してみました。 HTML・CSSのサンプルコードあり よかったら参考にしてください。 今回作成したナビゲーションメニュー リセットCSS パターン1 文字inline使用 li...
HTML CSS 【サンプルコードあり】テキスト(文字) を枠線だけで表示する方法。文字の中透過して枠線で文字
文字の中が透明で、文字の外枠だけが表示される方法。CSSでテキスト文字の縁取りをする方法を書いてます。サンプルコードも記述してますので初心者の人必見。CSSで
装飾してると後で色の変更やサイズ変更などのカスタマイズも簡単になり文字の表現が豊かで綺麗になる。
HTML CSS Googleフォームと連携してサイトのお問い合わせフォームの作成やってみた。IDの取得がちょっとわかりにくかった【サンプルコードあり】
サイトのお問い合わせフォームとGoogleフォームと連携すると 見た目を自由にカスタマイズすることが出来る。 その連携が今回出来たんで、忘れないように記事にしました。 よかったら参考にして下さい。 今回行った手順（作り方） HTMLで表示し...
HTML CSS 【サンプルコードあり】ｄrawer.js を使って、ドロワーメニューを作成した時、内部リンクの場合メニューが閉じない現象になるので、それを解消する方法が簡単だった。
ｄrawer.js を使うと ドロワーメニューを簡単に作成することが可能 今回 drawer.jsで、ページ内リンクをクリックした時、 ページは変化するけど、メニューが開いたままになった。 ドロワーメニューメニューの閉じない場合。 解決方法...
HTML CSS 【サンプルコードあり】display flexやinline-block で横並びでボタンの配置の為 position: absolute したら要素が下に潜り込んでしまった時にやった事
flex や inline-block;で横並びした時、端のボタンをposition: absolute;で配置したら、浮かせた要素の下に入り込んで重なってしまってちょっと悩んだ。試行錯誤の末解決出来たのでそのコードも書いてます。
HTML CSS 【サンプルコードあり】flexで横並びにした時、文字（テキスト）が縦１列になってしまった時、これで治りました。
flexで横並びにした時、文字（テキスト）が縦１列になってしまった時にこの方法で治りました。実際にボタン作成時に起きた現象のコードと実際に解決できたコードのサンプルも記載してるので画像のようなボタンが作成できます。参考にしてください。
HTML CSS flexbox （フレックスボックス）3カラム 5つの要素の時、２行目の配置を右側開けて左に寄せる方法。疑似要素で簡単に出来る。【サンプルコードあり】
flexboxで、3カラムで要素を５つ２段でならべた場合 下２段目の要素が２つの時の配置がうまくいかない。 横に３カラムの２行で ５つの要素を並べた時に、均等配置でしたいので、 justify-content: space-between;...
HTML CSS 【サンプルコードあり】グリッドレイアウトでサイズがバラバラの画像の配置をでやってみた。レスポンシブ対応まで挑戦。
グリッドレイアウトを使うと、レイアウトが簡単に作れるようになる。 今まで使ってたFlexboxでは、ちょっと再現しにくいレイアウトもグリッドレイアウトを使うと、いろんなパターンが簡単に作れる印象です。 このグリッドレイアウト、色々調べた結果...
HTML CSS 【サンプルコードあり】トップ画像にスモーク効果つけて、ロゴやタイトル入れると ロゴやタイトルにもスモーク効果がついて見にくくなった。 それを解消するのに見つけたコードの書き方。
CSS で画像にスモーク効果をあてるのは簡単で、 いろんなパターンがあります。 この記事では、トップ画像にスモーク効果つけて、ロゴやタイトル入れると ロゴやタイトルにもスモーク効果がついて見にくくなった。 それを解消するコードの書き方１つ見...