VScode VSCodeの拡張機能 Live Preview 使うとVSCodeでサイトのプレビュー画面も見れて便利
VSCodeの拡張機能 Live Preview 使うとVSCodeでサイトのプレビュー画面も見れて便利と聞いたので試しに使ってみたら便利で良かったので、Live Previewが使えるようにする方法図を使って記事にしました。
inopro
VScode 
HTML CSS 【サンプルコードあり】flexで横並びにした時、文字（テキスト）が縦１列になってしまった時、これで治りました。
flexで横並びにした時、文字（テキスト）が縦１列になってしまった時にこの方法で治りました。実際にボタン作成時に起きた現象のコードと実際に解決できたコードのサンプルも記載してるので画像のようなボタンが作成できます。参考にしてください。
JavaScript drawer.js でドロワーメニューを簡単作成 でもjQueryのプラグインがあると動かない場合ある。【サンプルコードあり】
今回、drawer.js でドロワーメニューが簡単に装着できると 効いたので早速実装してみました。 実装はほんとに簡単で、head内にdrawer.cssなどを追加、 body内に決められたコードを挿入。 最後</body>の直前にscri...
プログラミング Nobilista(ノビリスタ)|クラウド型 最新の検索順位チェックツールが今人気みたいです。
ブログの運営してると検索順位のチェック必要ですよね。 NobilistaはWebサイトの検索順位を完全自動でチェックする 「クラウド型順位チェックツール」がありました。 インストール不要でWindows・Mac問わず、今すぐに利用を始めるこ...
HTML CSS flexbox （フレックスボックス）3カラム 5つの要素の時、２行目の配置を右側開けて左に寄せる方法。疑似要素で簡単に出来る。【サンプルコードあり】
flexboxで、3カラムで要素を５つ２段でならべた場合 下２段目の要素が２つの時の配置がうまくいかない。 横に３カラムの２行で ５つの要素を並べた時に、均等配置でしたいので、 justify-content: space-between;...
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」使って自動で出る設定にしてたのに、 （こんな内容が自動で記入されてた。） 急にこんな...