プログラミング– category –

jQueryで要素を動的に追加したいけど、 prepend()って何？どう使えばいいの？ そんな疑問を持ったことはありませんか？ jQuery初心者にとってはprepend()やprependTo()など、似たようなメソッドが多くて混乱しがちです。 この記事は、prepend()の基本から...

jQueryを使って「HTML要素を動的に追加したい」と思ったとき、どのメソッドを使えばいいのか迷った経験はありませんか？ .append() や .prepend()、.before() など、似たような名前の関数が多くて混乱しますよね。 ということでjQueryの要素を追加するメソ...

jQueryのappendって、なんとなく使ってるけど、実はちゃんと理解できていないかも… そんな風に感じたことはありませんか？ append()とappendTo()の違いが曖昧で使い分けに悩んだりすることも少なくありません。 この記事は、jQueryで要素を動的に追加した...

jQueryの attr() ってよく見るけど、正直よく分からない… そんな風に感じたことはありませんか？ 属性を操作するって聞いても、そもそも「属性」って何？という状態では、なかなかスムーズに理解できませんよね。 この記事は、jQueryでHTMLの属性を操作し...

Flexboxで要素を並べたけど、余白の調整が地味に面倒… marginで調整してるけど、コードがごちゃついて読みにくい… そんな風に感じたことはありませんか？ CSSのgapプロパティを使えば、要素間のスペース調整が驚くほどシンプルかつ柔軟になります。 とはい...

Webページを訪れたユーザーが「必要な情報にすぐアクセスできる」ことは、ユーザーの利便性を高める上でとても重要です。 そんなユーザビリティ（使いやすさ）を高める手段のひとつが、同一ページ内の特定箇所へスムーズに移動できるページ内リンクの活用...

「jQueryを使いたいけど、CDNって何？」「どこにコードを書けばいいの？」「読み込めないってどういうこと？」 そんな悩みや不安を感じたことはありませんか？ この記事は、jQueryを初めてCDNで導入しようとしている初心者の方や、うまく動作しなくて困っ...

jQueryを勉強したいけど、どの本を選べばいいか分からない… 初心者向けって書いてあるけど、自分に合ってるか不安… そんな風に感じて、本選びで立ち止まっていませんか？ この記事は、これからjQueryを学びたい初心者の方や、ある程度基礎は理解していて現...

jQueryでスライダーを実装したいけど、複雑なコードは書きたくない slickって聞いたことはあるけど、使い方がよく分からない… この記事は、slickの導入方法から基本的な使い方、さらには現場でよく使われるカスタマイズ例やトラブル対処法までを網羅した完...

HTMLやCSSを勉強したいけれど、どの本を選べばいいのかわからない… そんな悩みを抱えて、何冊も比較しては決めきれずにいませんか？ この記事は、これからWeb制作を始めたい初心者の方や、HTML・CSSの基礎を学び直したい方に向けておすすめの本を以下の条...

先日までに、ショートコードの基本と自己完結型の記事を書きました。 今回は、囲み型のショートコードを作成していきます。 囲み型のショートコードとは？ 前回のショートコードの自己完結型を作成でも書きましたがショートコードには自己完結型と囲み型の...

先日、ショートコードの基本の記事を書きました。 まだショートコード自体ががよくわかっていない方は是非こちらの記事から読んでみてくださいね。 今回は、基本の続きで「自己完結型」のショートコードを作成していきます。 自己完結型のショートコードと...

レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなし...

今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。 「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードです。「なるべくコードはシンプルにわかりやすく」を意識して書いて行きます。 細...

jQueryでスライダーを実装したいけど、複雑なコードは書きたくない slickって聞いたことはあるけど、使い方がよく分からない… この記事は、slickの導入方法から基本的な使い方、さらには現場でよく使われるカスタマイズ例やトラブル対処法までを網羅した完...

以前「スプリットレイアウトの参考になるサイトまとめ」という記事を書きましたが、今回は実践編として実際にスプリットレイアウトのサイトを作成していきたいと思います。 サンプル 01.スプリットレイアウトとは その名のとおり画面をスプリット＝分割す...

こちらの記事の内容は古くなっています。もっと簡単にヘッダーを固定表示できる最新の記事をアップしましたので、下記のリンクよりぜひそちらをご覧ください。 スクロールしても固定表示されるヘッダーは珍しくありませんが、その方法はいくつかあります。...

position:sticky;はスクロールしたときに、要素が指定した位置に来たところから固定させることができるとても便利なプロパティです。 position:fixed;と似ていますが、position:sticky;ならjavascriptも書かないとできなかった難しい指定がたった2行ででき...

スクロールをセクションごとに制御してくれるプラグイン「jQuery Scrollify」は主に縦に長いLPなどでよく使用されているので、ちょこっとスクロールしただけで、次のセクションまでスルスルとスクロールしていくサイトに出会ったことがある方もいるはず。 ...

最近、下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを見かけるようになりました。例えばこちらのサイトとか↓。 KAMIMURA 特に表示領域の少ないタブレットやスマフォで活きてくるテクニックですね。実際に実装してみたいと思いま...

前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。 jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒...

モーダルウィンドウを実装するjQueryプラグインはたくさんありますが、わざわざプラグインを使わなくても、意外と簡単にモーダルウィンドウを実装することができます。 自分で実装できれば、仕組みを理解しているのでカスタマイズやメンテもしやすいのが最...

みなさん、レイアウトが超簡単になるCSSのFlexbox使っていますか？ めちゃくちゃ便利なので私は使いまくっておりますが、指定できることが豊富なのでチートシートを作りました。 チートシートはそれぞれページ内リンクになっていて、クリックで詳細の解説...

CSSプロパティーの「object-fit」を使えば、簡単にCSSだけで画像を指定したサイズ（コンテナー）にフィットさせて、かつ、はみ出すの部分はトリミングができてしまいます。 要は画像として配置しているのに、「background-size」と同じことができてしまい...