javascript

jQueryでドロップ検知

ドロップ検知の基礎と実践 jQueryでドロップ検知を実装する際、dragenter, dragover, drop の3つのイベントが鍵となります。 これらのイベントを巧みに組み合わせることで、ユーザーがファイルをドロップした際に、様々な...
javascript

jQueryで横からの距離を取得

皆さんは、Webページ上で要素同士の距離を測りたいと思ったことはありませんか? 特に、横方向の距離を知りたい時ってありますよね。 そんな時に便利なのが、jQueryの機能です。 今回は、jQueryを使って横方向の距離を取得する方法を、笑え...
その他

箱庭タウンズの乗り物獲得条件一覧を見やすく作成⭐️

いつも箱庭タウンズを休みの時はダラダラとしていて、ご飯食べるのも忘れるぐらいハマってます。 箱庭タウンズをやってると、住民が乗り物を乗り回してるのをよく目にして、いつGETしたんだろうと思い一覧で見やすく作成しました! 乗り物の獲得条件一覧
その他

こだわりラーメン館〜全国編〜コンボするトッピング(食材)早見表を作りました!

最近、カイロソフトの「こだわりラーメン館〜全国編〜」が好きすぎる。 このゲームをスマホでプレイしてると、無性にラーメンが食べたくなる。元々、家系ラーメンがちょー好きな人間だから、デブ一直線待ったなしです。 そうそう。 この「こだわりラーメン...
javascript

jQueryでaタグからパラメータを抜いたURLを取得する方法

ブログ記事やWebサイトで、aタグにパラメータを仕込んでページ遷移させていることってありませんか?jQueryを使えば、そのパラメータを簡単に排除したURLを取得することができるんです!今回紹介するのは、たった数行のコードで実現できる超絶シ...
javascript

jQueryで特定の文字列をもつ要素を取得

jQueryで特定の文字列を含む要素を取得する方法ご紹介です。この方法はリストをループ処理して特定文字列のあるリストのスタイルを変更する処理になります。実際のコードはこちら。 // リスト要素をループ処理 $('li').each(func...
CSS

cssのtransitionタイミングを遅らせる方法

今回は、CSSの transition-delay プロパティを使って、アニメーションのタイミングを遅らせる方法を紹介します。 transition-delay プロパティとは transition-delay プロパティは、CSSトランジ...
javascript

jQueryで偶数、奇数を判定

Webサイトの開発において、数値を扱うことは頻繁にあります。その中でも、偶数と奇数の判定は様々な場面で必要となる重要な操作です。そこで今回は、jQueryを使って簡単に偶数と奇数を判定する方法を紹介します。 const number = 2...
CSS

cssでテキストを上下中央配置|テキストを真ん中に!

ウェブページを作っていると、テキストを上下中央に配置したい場面ってありますよね。実は、CSSを使って簡単に実現できちゃうんです!今回は、初心者でもわかりやすく、コード例を交えながら解説していきます。 1. 高さを使って中央配置する 一番シン...
javascript

jQueryでリストの最後に要素を追加する方法

リストの最後に要素を追加するってなんだったけ?ってよくなる。 英語がダメな自分は、「最後に追加する」的な英語がパッと出てこないからgoogle翻訳に聞いてみた。 「add at the end」って返ってきた。 jQueryに「$("")....
CSS

【CSS】線(border)の種類一覧

CSSのborderって色々種類あるじゃない。 だいたい1本線の「solid」しか使わないけどたま〜〜〜に点線とか破線とか使うとき、あれ?どう書くんだったっけってなるから一覧でコピれるようにしときます。 実線|solid border: 1...
CSS

CSSだけで角丸枠線グラデーション

枠線グラデーションと角丸は相性がめっちゃ悪い。 一筋縄じゃCSSだけで実装できない。 でもどうにかこうにかやる方法があるので今回は、そんなどうにかこうにかCSSだけで角丸枠線グラデーションを実装する方法のご紹介です。 角丸グラデーション(ボ...
CSS

CSSだけで文字グラデーション

文字グラデーションも枠線同様に画像かSVGじゃなきゃ表現できないと思ったけどCSSだけで表現できるみたいなんだ。 今回は、文字グラデーションをCSSだけで実装する方法のご紹介です。 下のコードをCSSに貼り付ければすぐにテキストグラデーショ...
CSS

CSSだけで枠線グラデーション。

CSSだけで枠線をグラデーションにする方法のご紹介です。 枠線グラデーションってもはや画像やSVGで済ませちゃえばって思うけど、CSSでできるならそれに越したことはないじゃない。 じゃ〜やろう! CSSで枠線をグラデーションにするって結構む...
CSS

flexで要素の順番を入れ替える方法

CSSでdisplay: flexを使うといい感じに横並びにできていいよね。 でもレスポンシブした時に要素の順番を変えたいなって思うこと多い。そんな時に使えるのが「order」なんだ。 じゃー早速使い方を見てみよう。 .wrapp {   ...
広告