2024.11.06 WEBWebデザイン 【jQuery】ページ内のどのコンテンツにいるのか分かるエレベーターメニューを実装してみた 最近のwebサイトではエレベーターメニューをよく見るようになりました。 LPなど長いページでの使用や、沿革ページで年ごとに区分するなど、使い方は様々です。 今回はjQueryを使って、エレベーターメニューを実装してみたいと思います。 エレベーターメニューの仕様 最初に、エレベーターメニューの仕様に [...]
2024.08.27 WEBWebデザイン 【bxSlider】コールバック関数を使って2つのスライダーを連動させてみた 弊社ではトップページのメイン画像をスライダーにすることが多く、jQueryプラグインのbxSliderをよく利用しています。 最近このbxSliderのコールバック関数を勉強する機会があったので、より理解度を深めるため実際の提案でもあった2つのスライダーの連動を実装してみたいと思います。 弊社ブロ [...]
2024.06.26 WEBWebデザイン 【CSS】CSSで画像をクリッピング！clip-pathの使い方を解説！ コーディングに要求されるハードルが年々上がってきていますが、その一つにデザインの複雑化が挙げられます。 単純な四角形だけではなく斜め線や三角形、正円や角丸など、様々な図形を使用したデザインが、近年では見られるようになりました。 画像で書き出すと何かと融通の利かない図形ですが、CSSで切り抜いてしま [...]
2024.05.02 WEBWebデザイン 【CSS】比較関数を使ってみよう！min()、max()、clamp()の使い方を解説！ CSSには様々な関数があります。transformプロパティで使用するtranslate()や、算術演算を行うcalc()などがなじみ深いかと思いますが、その中で複数の値を比較して値を計算する比較関数というものがあります。 今回はこの比較関数であるmin()、max()、clamp()の3つについ [...]
2024.03.25 WEBWebデザイン Google Chromeのデベロッパーツールでリアルタイム修正をしよう（HTML・CSS編） web制作において、ブラウザでコーディングを確認、修正できるデベロッパーツールは欠かせない存在です。 デベロッパーツールとはブラウザに標準で搭載しているデバッグツールで、リアルタイムでのコード編集・確認や、コンソールエラーのチェック、スマーフォンなどの携帯端末の表示をチェックできたりとその機能は多 [...]
2023.12.29 WEBWebデザイン 【CSS】max-width、min-widthの活用方法と実用的なwidthの指定パターン 前回フレックスボックスについて紹介しましたが、今回はレイアウトにおける幅の指定に関するプロパティと、実際のコーディングで役立つ具体的な幅の指定方法をパターン別に紹介します。 フレックスボックスに関する過去の記事はこちらになります。併せて参考にしてみてください。 フレックスボックスに関する記事 [...]
2023.10.26 WEBWebデザイン 【CSS】displayプロパティの2値構文ってなに？新しい記述方法について解説！ displayはなじみのあるプロパティですが、最近、値の指定方法に新しく2値構文がサポートされました。 普段display: block;やdisplay: flex;など単一の値を指定して使っているかと思いますが、2つの値が入れられるようになってどんな変化があるのか。 今回はdisplayの新し [...]
2023.08.30 WEBWebデザイン 【初心者向け】フレックスボックスとは？display:flexの使い方（応用編） 前回フレックスボックスの基本的な構造と親要素（コンテナ）に指定するプロパティを紹介しました。 前回の記事：【初心者向け】フレックスボックスとは？display:flexの使い方（基礎編） 今回は子要素に指定するプロパティとその使い方について紹介します。 順序を指定する（order） 通常、子要素は [...]
2023.06.29 WEBWebデザイン 【初心者向け】フレックスボックスとは？display:flexの使い方（基礎編） コーディングをしていて横並びレイアウトを実装する機会は多くあります。 以前であればfloatやtableを使ったりしていましたが、フレックスボックスの登場で、要素のレイアウトが格段にやりやすくなりました。今回はフレックスボックスの使い方について、分かりやすく解説していきます。 フレックスボックスの [...]
2023.04.26 WEBWebデザイン 【jQuery】スクロール位置に応じて複数のコンテンツで背景を変化させる方法 最近、スクロール位置に応じてコンテンツごとに背景を変更する提案があり、実装してみたところ多くの学びがありました。 ユーザのアクションによって背景が変化するので、大きなユーザ体験を与えられるとともに、コンテンツに関してもとてもドラマチックに見せることが出来ます。 そこで今回はjQueryを使った、ス [...]
2023.02.27 WEBWebデザイン 【canvas入門】canvas要素にテキストを描画しよう！スタイル設定方法も紹介！ canvas要素について、これまでは図形の描画を主に取り扱ってきましたが、今回はテキストを描画する方法をご紹介いたします。 また、描画するテキストのフォントサイズやベースラインなどスタイルの設定方法についてもご紹介いたします。 canvas要素の基本的な使い方については前回までの記事をご確認くださ [...]
2022.12.22 WEBWebデザイン 【canvas入門】canvas要素にグラデーションのスタイルを設定しよう！ 前回の記事「canvas要素の線や塗りのスタイルを変更しよう！」でcanvas要素において色の変更方法をご紹介しました。 canvas要素ではCSS等と同じく単色の色だけではなくグラデーションも設定することが可能です。今回はグラデーションの設定方法について解説していきます。 INDEXグラデーシ [...]
2022.10.31 WEBWebデザイン 【canvas入門】canvas要素の線や塗りのスタイルを変更しよう！ 前々回（canvas要素とは？HTMLとJavaScriptを使って図形を描いてみよう！）と前回（【canvas入門】HTMLとJavaScriptを使って図形を描いてみよう！（曲線編））の記事でcanvas要素において図形やパス、曲線などの描き方をご紹介しました。 今回はその図形や線に対して、色 [...]
2022.08.25 WEBWebデザイン 【canvas入門】HTMLとJavaScriptを使って図形を描いてみよう！（曲線編） 前回の記事「canvas要素とは？HTMLとJavaScriptを使って図形を描いてみよう！」では、canvas要素の設置方法と簡単な図形やパスの描き方をご紹介しました。 今回は前回触れられなかった曲線の書き方についてご紹介します。 INDEX2次ベジェ曲線を描く3次ベジェ曲線を描くさいごに 2 [...]
2022.06.16 WEBWebデザイン canvas要素とは？HTMLとJavaScriptを使って図形を描いてみよう！ HTMLで図形を表現する場合img要素が一般的ですが、HTML5からcanvas要素で描画処理を行うことが可能となりました。 しかしJavaScriptを使うためハードルが高いと感じている方も多いのではないでしょうか。 今回はcanvas要素の設置の仕方と簡単な図形の描き方についてご紹介します。 [...]
2022.04.21 WEBWebデザイン JavaScript不要！CSSだけで出来るドロップダウンメニューの実装方法 webサイトを作成しているとドロップダウンメニューの設置をすることがよくあります。 メニューがグローバルナビゲーションに収まりきらない場合や、階層が多いサイトなどで重宝する形式です。 今回はこのドロップダウンメニューをCSSのみで実装する方法をご紹介いたします。 INDEXドロップダウンメニュー [...]
2022.02.22 WEBWebデザイン 【jQuery】スクロールすると出てきてフッター直前で止まるフローティングボタンの実装 webサイトを作成しているとフローティングボタンを設置することがよくあります。 フローティングボタンとは、ページの先頭へ戻るボタンやお問い合わせボタンなど、画面の右下などに表示され、スクロールしてもその位置で追従してくるボタンのことを言います。 今回はjQueryを使って、フローティングボタンの挙 [...]
