すべての記事

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の基礎を学び直したい方に向けておすすめの本を以下の条...

WordPressは初心者でも使いやすい一方で、本の種類が非常に多く、レベルや内容がバラバラ。自分に合わない本を選んでしまうと、操作が難しく感じて挫折してしまう原因にもなります。 この記事では、WordPressの操作に初めて触れる方から、オリジナルテーマ...

ブログを始めたけど、どうやって運営していけばいいの？ 収益化やSEO、文章の書き方も気になるけど、情報が多すぎて何から手をつけていいか分からない… そんな風に悩んでいませんか？ 独学でブログを続けていると、行き詰まったり、遠回りしてしまったりす...

ブログを開設していざ記事を書いてみようと思ったら「どんな記事を、どうやって書けばいいのかわからない...」そう思って手が止まってしまう人もいるかと思います。 しかし、書き方のポイントさえ押さえれば、誰にでも読みやすいく読者のメリットになる記...

「ブログを書きたいけど、どう構成すればいいのか分からない…」「書き始めても途中で手が止まってしまう…」 そんな悩みを抱えている初心者の方はとても多いです。 実は、読まれるブログ記事に共通しているのは、「記事構成がしっかりしていること」です。 ...

ひと昔前までは、ローディングアニメーションと言えばCSSアニメーションで円がクルクル回ってるだけだったり、ロゴが中央に表示されて消えていくだけだった印象ですが、今は趣向が凝ったローディングアニメーションのサイトがたくさんあります。 また、ロ...

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

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

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

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

最近ではWebサイトにアニメーションを取り入れるのが当たり前になってきています。 ひと昔前はフルフラッシュサイトで見かけたようなゴリゴリ動く表現がhtml5やCSS、JS・JQueryによって実装可能になりました。 今回はそんなアニメーションの表現が優れたサ...

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

昨年くらいから見かけるようになった印象の「スプリットレイアウト」のサイト。 今回は「スプリットレイアウト」を取り入れる際の参考になるサイトをまとめてご紹介します。 スプリットレイアウトとは？ 「スプリットレイアウト」は「スプリットスクリーン...

人は初めて会う人の印象を３～５秒で決め、その決定材料となる情報のほとんどを「視覚情報」から得ています。 Webサイトにおいても同様で、インターネットユーザーはほんの数秒でそのサイトの判断をするということ。 私たちの脳はものすごいスピードで視覚...

当サイトに掲載する素敵なWebサイトを毎日収集していて、斜め上から見たような立体的なイメージ（アイソメトリックプロジェクション）を取り入れたサイトよく見るようになりました。 立体感があって印象的なデザインになるのでショーケースをまとめて見ま...

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

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