HTML CSS Googleフォームと連携してサイトのお問い合わせフォームの作成やってみた。IDの取得がちょっとわかりにくかった【サンプルコードあり】
サイトのお問い合わせフォームとGoogleフォームと連携すると見た目を自由にカスタマイズすることが出来る。その連携が今回出来たんで、忘れないように記事にしました。よかったら参考にして下さい。 今回行った手順（作り方）HTMLで表示したいレイ...
inopro
HTML CSS 
HTML CSS 【サンプルコードあり】ｄrawer.js を使って、ドロワーメニューを作成した時、内部リンクの場合メニューが閉じない現象になるので、それを解消する方法が簡単だった。
ｄrawer.js を使うと ドロワーメニューを簡単に作成することが可能今回 drawer.jsで、ページ内リンクをクリックした時、ページは変化するけど、メニューが開いたままになった。ドロワーメニューメニューの閉じない場合。解決方法が見つか...
HTML CSS 【サンプルコードあり】display flexやinline-block で横並びでボタンの配置の為 position: absolute したら要素が下に潜り込んでしまった時にやった事
flex や inline-block;で横並びした時、端のボタンをposition: absolute;で配置したら、浮かせた要素の下に入り込んで重なってしまってちょっと悩んだ。試行錯誤の末解決出来たのでそのコードも書いてます。
VScode VSCodeの拡張機能 Live Preview 使うとVSCodeでサイトのプレビュー画面も見れて便利
VSCodeの拡張機能 Live Preview 使うとVSCodeでサイトのプレビュー画面も見れて便利と聞いたので試しに使ってみたら便利で良かったので、Live Previewが使えるようにする方法図を使って記事にしました。
HTML CSS 【サンプルコードあり】flexで横並びにした時、文字（テキスト）が縦１列になってしまった時、これで治りました。
flexで横並びにした時、文字（テキスト）が縦１列になってしまった時にこの方法で治りました。実際にボタン作成時に起きた現象のコードと実際に解決できたコードのサンプルも記載してるので画像のようなボタンが作成できます。参考にしてください。
JavaScript drawer.js でドロワーメニューを簡単作成 でもjQueryのプラグインがあると動かない場合ある。【サンプルコードあり】
今回、drawer.js でドロワーメニューが簡単に装着できると効いたので早速実装してみました。実装はほんとに簡単で、head内にdrawer.cssなどを追加、body内に決められたコードを挿入。最後</body>の直前にscriptコー...
プログラミング Nobilista(ノビリスタ)|クラウド型 最新の検索順位チェックツールが今人気みたいです。
ブログの運営してると検索順位のチェック必要ですよね。NobilistaはWebサイトの検索順位を完全自動でチェックする「クラウド型順位チェックツール」がありました。インストール不要でWindows・Mac問わず、今すぐに利用を始めることがで...
HTML CSS flexbox （フレックスボックス）3カラム 5つの要素の時、２行目の配置を右側開けて左に寄せる方法。疑似要素で簡単に出来る。【サンプルコードあり】
flexboxで、3カラムで要素を５つ２段でならべた場合下２段目の要素が２つの時の配置がうまくいかない。横に３カラムの２行で５つの要素を並べた時に、均等配置でしたいので、justify-content: space-between;just...
Figma Figma言語設定方法 Figma日本語対応バージョン CSSコードも日本語になってたので、英語バージョンに変更した。
Figmaの言語設定で日本語対応版がリリースされたので日本語対応にしてみた。いろんな操作部分が日本語になってわかりやすい。でもCSSのコードも日本語になってたのでちょっとわかりにくかった為、英語バージョンに変更。その時変更方法わかりにくかっ...
HTML CSS 【サンプルコードあり】グリッドレイアウトでサイズがバラバラの画像の配置をでやってみた。レスポンシブ対応まで挑戦。
グリッドレイアウトを使うと、レイアウトが簡単に作れるようになる。今まで使ってたFlexboxでは、ちょっと再現しにくいレイアウトもグリッドレイアウトを使うと、いろんなパターンが簡単に作れる印象です。このグリッドレイアウト、色々調べた結果、不...