横並びにした画像とテキストを上下中央配置になるようなレイアウトは少なくありません。そんなときその実装方法を知っているのと知らないのとではコーディングスピードに大きな差がでます。Flexboxで簡単に実装できるのでぜひ覚えておきましょう。

グローバルナビゲーションを２段表示にするにはどうすればいいのでしょう？やり方はいくつかありますが本記事ではFlexboxを使って表示します。さあ一緒に作っていきましょう。

Swiperには多くのオプションがあります。全部を網羅することは不可能ですので、ここでは実用的なスライダーの使い方を紹介します。少しずつでもSwiperに慣れていきましょう！

スライダープラグインはいろいろありますが、今回は「Swiper」を紹介します。バージョン6とバージョン7ではHTMLの記述が一部変更になっているので注意が必要です。使い方さえマスターすれば、多機能でカスタマイズも自由自在なので最強のスライダーになってくれることでしょう。

コーディング速度を上げるためにまずすべきことは、タイピング速度の向上、スニペットの登録、そしてEmmetです。一部でもEmmetを取り入れることで確実にコーディング速度は上がります。Emmetにはどんなものがあるのか一緒に見ていきましょう。

ドロワーメニュー実装はjQueryを使うもので自作かプラグインかの２択でしょと思っているそこのあなた、HTMLとCSSのみで作る方法を知りたくはありませんか？それって難しくない？と不安にならなくても大丈夫です。仕組みさえ理解できればこちらの方がよっぽど簡単です。ではその実装方法を見ていきましょう。

ドロワーメニューを自作するのは結構大変ですが、ライブラリを用いれば簡単に実装できます。その中でも「drawer.js」は初心者の方でもすぐに実装可能な優れものです。その使い方を見ていきましょう。

WordPressのツールバーをヘッダー固定していると、しばしば邪魔になるときがあります。かといって非表示にはしたくない。そんなときは「Admin Bar Position」を使ってみましょう。ツールバーをワンタッチで上下に切り替えることができます。シンプルで使いやすいプラグインです。

WordPressのツールバーは便利な半面、ツールバーが重なっていてサイトロゴの表示がよく見えない、上部固定のメニューの挙動が確認できないといった邪魔になるタイミングがあります。ツールバーを非表示にする方法を確認しておきましょう。

Web制作を学習し始めて初心者が最初につまずくのがヘッダーのコーディングです。ヘッダーの構造がわからない、作り方がわからない、何時間経っても作れない…。僕も最初はそうでした。そんな僕と同じような思いをせぬように、最もシンプルなヘッダーを最もていねいに解説します。今日からあなたもヘッダーのコーディングができるようになります。