一瞬でiframeを比率を保ってレスポンシブさせる方法【YouTube動画埋め込み】
YouTube動画をiframeで埋め込む際、埋め込みコードには幅が記述されていて、固定されてレイアウトが崩れてしまいがちです。 そんなとき、動画の比率を保ちながらレスポンシブさせる方法です。 これからご紹介するコード一...
フロントエンドフロントエンド
フロントエンドフロントエンド【今すぐ実装】ノートの方眼風デザインCSS
背景などで方眼のようなマス目のデザインをCSSで実装するCSSのご紹介です。 実装サンプル See the Pen Untitled by mskyw (@kyswm) on CodePen. ノートの方眼風CSSのba...
フロントエンドCSSで連番をカウントして表示させる
コーディングする際に、「サービスの特徴」や「メリット」、はたまた「よくある質問」など、連番を表示させるデザインはかなり多いと思います。 そんなとき、どうやってコーディングしていますか。 リストタグ内などに直接テキストとし...
フロントエンド文字(テキスト)を円形にして回転させるアニメーション【CSSとSVGで】
文字が円形になってぐるぐると回転しているアニメーションを実装する機会があったので、覚え書きです。 画像で書き出して回すだけなら楽かもしれませんが、テキストデータとして実装する方法でチャレンジです。 STEP１. まずSV...
フロントエンドMW WP Form(WordPress)でデイトピッカーが動かないときの対処法
デイトピッカーがただのテキストボックスになってしまう…！ WordPressでお問合せフォームのプラグイン「MW WP Form」で「デイトピッカー」を追加していたところ、PCで見ると起動するのに、スマホで検証するとクリ...
フロントエンドWordPressの自動更新を止める方法を紹介
WordPress自動更新 WordPressバージョン5.3.2(2020/01/02) バージョンの3つの数字 一番左の数字が「メジャーバージョン」デザイン等の大幅なアップデートに関わる部分です。 真ん中の数字が「マ...
フロントエンドVScode 便利なショートカット 文末を選択
vscodeショートカット(行末選択) コードエディタ vscodeで便利なショートカットを紹介します。 htmlファイルなどを編集している際、下記の手順にて全ての行の末尾を選択することが出来ます。 普段ブログの記事を書...
フロントエンドVScode emmet ラップ変換のショートカット
私が普段使用しているコードエディタ（VScode）にて便利な機能を備忘録的に残そうと思います。 既存の文字列を任意のタグで囲む 上記の文章があった場合に、「①サンプル」のみspanタグで囲みたい。というような状況は頻繁に...
フロントエンドgitコマンド「checkout」の使い方、オプション。プチトラブル事例を紹介。
gitで作業し始めて、コマンドのオプションなど 備忘録を記します。 checkoutの使い方 Gitのチェックアウト(checkout)とは、一言で言うと「ブランチを切り替えたいとき」に使用するコマンドです。 私は、普段...
フロントエンド15分あれば書き方が分かる。マークダウン記法チートシート。初めてマークダウンで記事を書いてみた感想。
マークダウン（Markdown）とは 簡易的に文章を記述することが出来る記法の１つです。開発者として、書けるようになっておいて損はないでしょう。 マークダウンでメモを取ったり、ブログを書いたり、あらゆることに使用すること...
