プログラミング– category –

Webサイトを作ってみたいと思い、「HTML」を調べてみたものの、タグや属性といった言葉が並び、「初心者には難しそう」と感じてしまうのは、ごく自然なことです。 この記事は、HTMLをこれから学び始める初心者の方、または一度学習したものの理解が曖昧な...

after()って何となく使ってるけど、正しく理解できているか自信がない… insertAfter()との違いがいつもごっちゃになる… そんなふうに感じたことはありませんか？ この記事は、jQueryを使ってWebページの要素を動的に操作したい初級者の方に向けて、after()...

jQueryのセレクタって、たくさん種類があって何をどう使えばいいのか分からない… そんな風に感じたことはありませんか？ この記事は、jQuery初心者の方に向けて、「セレクタの種類と使い方」を体系的に分かりやすくまとめた内容です。 この記事を読むこと...

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

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を学びたい初心者の方や、ある程度基礎は理解していて現...

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

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

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

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

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

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

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

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

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

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

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

先日「フルスクリーンナビゲーションの参考サイト15選」という記事を書きました。 今回は実践編をやっていこうと思います。シンプルに縦に並ぶフルスクーリーンナビゲーションを作ります。 サンプル1 全体のHTML まずは今回の全体のHTMLのコードです。 <...