JavaScript drawer.js でドロワーメニューを簡単作成 でもjQueryのプラグインがあると動かない場合ある。【サンプルコードあり】
今回、drawer.js でドロワーメニューが簡単に装着できると効いたので早速実装してみました。実装はほんとに簡単で、head内にdrawer.cssなどを追加、body内に決められたコードを挿入。最後</body>の直前にscriptコー...
JavaScript 
プログラミング 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では、ちょっと再現しにくいレイアウトもグリッドレイアウトを使うと、いろんなパターンが簡単に作れる印象です。このグリッドレイアウト、色々調べた結果、不...
VScode Visual Studio Codeの拡張機能で Auto Rename Tag が便利なんで入れて使ってみたら便利だった。
Visual Studio Codeの拡張機能で Auto Rename TagこのAuto Rename Tagを入れると、コードを書きてる時にちょっと変更したいときに、開始タグを変更すれば、自動で終了タグも変更してくれるので便利です。よ...
HTML CSS 【サンプルコードあり】トップ画像にスモーク効果つけて、ロゴやタイトル入れると ロゴやタイトルにもスモーク効果がついて見にくくなった。 それを解消するのに見つけたコードの書き方。
CSS で画像にスモーク効果をあてるのは簡単で、いろんなパターンがあります。この記事では、トップ画像にスモーク効果つけて、ロゴやタイトル入れるとロゴやタイトルにもスモーク効果がついて見にくくなった。それを解消するコードの書き方１つ見つけたの...
VScode VScodeでコーディングする時、HTMLの最初に DOCTYPEやに記入する内容 ショートカットキーで出なくなった、一瞬で入力されない
VScodeでコーディングする時、HTMLの最初にDOCTYPEや<head></head>に記入する内容、ショートカットキー「Shift+1⇒Tab」使って自動で出る設定にしてたのに、（こんな内容が自動で記入されてた。）急にこんなエラーに...
HTML CSS 初心者必見。VScode使ってコーディング中にやってしまった失敗。よくやる失敗例も紹介。
VSCodeでコーディング中に、設定が反映されてないようなおかしい現象なったことありませんか？私は、しょっちゅうです。今回も、やっちゃいました。コードを書いて、修正作業してる時に関係のない文字を打ち込んでいたみたいです。それが原因で、その直...
HTML CSS カードレイアウト BOX型デザインでカード全体をクリック出来るようにする方法。【サンプルコードあり】 初心者がよくやる失敗しないように
BOX型（カード）デザインのコーディングで初心者がよくやる失敗の１つで、aタグを入れてるが、BOX（カード）内でリンク先に飛ばない部分が出来る場合がある。BOX（カード）型デザインで、ボックス内全体をクリック可能範囲にしよと思ったが、思うよ...