CSS 【CSS】アニメーションのチラつきを無くす方法
CSSでアニメーション(animation)をするとチラつく時がある。 どの様なアニメーションをするとチラつくのかわからず、keyframeが原因？とか思ったり悩んでいたけど、これを書いたら解決しましたのでその方法をご紹介します。 anim...
CSS 
CSS 【CSS】何行以上「…」をjs無しで実装
何文字以上「…」や何行以上「…」ってjsでやろうとすると結構手間だよね。 jsでやろうとすると文字数半角・全角を分けて数えて、n文字以上になったらそれ以上を切り捨てて、「…」を追加して表示する。でもブラウザやデバイスや横幅によって上手く行数...
javascript 【jQuery】URLに特定文字が含まれてたらを判定
現在のURLで特定の文字列が含まれていたらを判定する処理のご紹介です。 特に特別な処理を書かなくて、下記をコピペですぐできます。 ではコードをどうぞ！ jQuery // 現在のURLに「news」が含まれていたら if($(locatio...
CSS CSSで画像を縦・横フィット！「object-fit: cover」で自動トリミング｜IE対応！
枠の中に画像を縦横ピッタリと収めたい時、横幅１００％か、縦幅１００％かを指定するけど、画面サイズによって縦か横の余白が空いちゃうから、メディアクエリで細かい指定しなくちゃいけなかったり色々手間が多いよね。 「object-fit: cove...
javascript jQueryで「プラス→マイナス」をコピペで実装！9選デ＋－ス🛸
リストやメニューでよく使う「プラス」からの「マイナス」をjQueryでコピペで実装！ アニメーションを9個用意しているので好きなのをコピペして使ってね！ それでは共通のHTML、CSS、jQueryを。 共通のCSSに、追加で欲しいアニメー...
javascript jQueryでのアニメーション方法
jQueryでアニメーションを作る方法の紹介です！ まずはデモでjQueryアニメーションを見てみよう。 ボタンを押したらボタンがおっきくなって、もう一度押すと小さくなるボタンです。 デモボタン このデモのソースは以下になります。 HTML...
CSS 【CSS】before・afterの「content」内でテキストを改行させる方
before・afterの「content」内でテキストを改行する方法の紹介です。 「content」内では、「<br>」とか「\n」では改行できないんだ。 では、その方法をご紹介！ .demo::after { content: "改行は...
javascript 【jQuery】Yes/No診断テストをバージョンアップしました！
いつも当ブログを見てくださりありがとうございます！「Yes/No診断テスト」がバージョンアップしました！ 以前のバージョンで、こうして欲しいとアイディアをいただき生意気ながら、診断テストのバージョンアップしてみようと思いました🌸（たなか様あ...
CSS 【CSS】テキストの後ろにだけ背景色を付ける方法｜box-decoration-break
テキストの後ろにだけ背景色を付ける方法のご紹介です。 backgroundだけを使って背景色を付けると思った感じにならないし、行ごとにspanで囲うのもなんかあれじゃない。 そんな時に使えるプロパティが今回ご紹介する「box-decorat...
HTML 【HTML】リンクを別ウィンドウで開く方法
リンクを別ウィンドウで開きたい時って結構あるよね。 外部リンクだったり、デモを表示したり、SNSへ飛ばしたり。今回はリンクを別ウィンドウで開く方法のご紹介です。 それではどうぞ！ <a href="URL" target="_blank">...
CSS 【CSS】Youtubeの動画をレスポンシブ対応！
Youtube動画を埋め込む際に普通にCSSで「width: 100%」でいいじゃないと思うけど、高さが出なくて表示されない。でもこのコードで1発解決！HTMLとともにご確認を。 HTML // Youtubeからコピーしたコード <ifr...
javascript 【jQuery】要素を空にする
jQueryで要素を空にする方法のご紹介です。 要素を空にする場合「empty()」と「remove()」の二つの方法があります。 それではデモで２つを確認してみましょう！ デモ １ ２ ３ 「empty」で２つ目のリストを空にする １ ２...
javascript 【jQuery】文字列に文字列を追加する方法
jQueryで文字列に文字列を追加する方法の紹介です。 HTML内のテキストにjQueryで文字列を追加することってたまにあります。 そんな時に使えるのがコチラの方法です。 それではデモを！ ボタンを押すと文字を追加する感じにしました。 デ...
javascript 【jQuery】アラート内で改行する方法
jQueryのアラート内でテキストを改行する方法のご紹介です。 デモ アラートボタン jQuery alert("HTMLの改行タグ<br>は\nそのままテキストで表示されます。"); HTMLだと「<br>」で改行することができるけど、a...
javascript 【jQuery】jQueryでphpの「foreach()」を実装！
jQueryで配列を回す時、phpのforeach()が使えたら楽なのにな～と思って覚書き。 やっぱり配列の数分forで回すのがイイみたい！ const num = ; for (let i=0; i<num.length; i++) { ...