Web Blog WEBブログ

フッター手前で止まるスムーズスクロール

UPDATE : 2019.01.29

こんにちは。コーダーの兼山です。 以前、『ページトップボタンが色々な出現をするスムーズスクロール』をご紹介しました。 続編となりますが、今回は、 『フッター手前で止まるスムーズスクロール』をご紹介します。

兼山暖美
兼山 暖美
エンジニア
続きを読む

CSSでグラデーションを表示する

UPDATE : 2019.01.03

こんにちは。コーダーの兼山です。 CSSのグラデーションを表示するlinear-gradientを使用し、 グラデーションで表示する基本的なパターンをご紹介します。

兼山暖美
兼山 暖美
エンジニア
続きを読む
ドロップダウンのナビゲーションをjQueryで作成する

ドロップダウンのナビゲーションをjQueryで作成する

UPDATE : 2018.09.17

コーダーの兼山です。 今回は、jQueryで作成するドロップダウンのナビゲーションをご紹介します。 jQueryを利用するとjavascriptの記述が少なく済み、簡単です。 jQueryの読み込みを忘れないようにしましょう。

兼山暖美
兼山 暖美
エンジニア
続きを読む
ページトップボタンが色々な出現をするスムーズスクロール

ページトップボタンが色々な出現をするスムーズスクロール

UPDATE : 2018.09.10

こんにちは。コーダーの兼山です。 今回は、スムーズスクロールについてです。 スムーズスクロールは、ページをページ下部へスクロールし、ページ上部へ戻る際、 「ページトップ」ボタンをクリックすることで、スルスルとゆっくり戻る動作を指します。 設置する際、

兼山暖美
兼山 暖美
エンジニア
続きを読む
CSS positionを配置した親要素を起点にfixedさせる

CSS positionを配置した親要素を起点にfixedさせる

UPDATE : 2018.09.03

こんにちは。コーダーの兼山です。 今回は、CSS positionを配置した親要素を起点にfixedさせる方法をご紹介します。 「トップへ戻る」ボタンを指定する際、 普通にfixedを指定すると、ページ全体を基準に絶対位置で位置が固定されます。 それを、...

兼山暖美
兼山 暖美
エンジニア
続きを読む
ヘッダーを『position:fixed;』指定時にヘッダーの高さ分だけコンテンツを下げる

ヘッダーを『position:fixed;』指定時にヘッダーの高さ分だけコンテンツを下げる

UPDATE : 2018.08.27

こんにちは。コーダーの兼山です。 ヘッダーを『position:fixed;』を指定時に、下部のコンテンツを、 Javascriptを使ってヘッダーの高さ分だけ下げる方法をご紹介します。 こういった場合、body要素の上部にヘッダーの高さ分だけ、padding...

兼山暖美
兼山 暖美
エンジニア
続きを読む
ドロップダウンのナビゲーションをCSSのみで作成する

ドロップダウンのナビゲーションをCSSのみで作成する

UPDATE : 2018.08.21

コーダーの兼山です。 今回は、CSSのみで作成する、 ドロップダウンのナビゲーションをご紹介します。 jQueryの使用が多くなるのを避けたいときや、データの軽量化をしたいときに便利です。

兼山暖美
兼山 暖美
エンジニア
続きを読む
Webアイコンフォント『Font Awesome』の使い方

Webアイコンフォント『Font Awesome』の使い方(活用編)

UPDATE : 2018.05.25

こんにちは。コーダーの兼山です。 今回は、Webアイコンフォント『Font Awesome』の活用編をご紹介します。 疑似要素beforeやafterを合わせて使用すると便利です。

兼山暖美
兼山 暖美
エンジニア
続きを読む
SVGアニメーションを使って拡大しても粗くならない画像を描画してみよう!

SVGアニメーションを使って拡大しても粗くならない画像を描画してみよう!

UPDATE : 2018.05.14

今回は、illustratorで作成したロゴデザインをSVGアニメーションで実装していきます。 基本的なSVGの使い方です。 CSSのアニメーションで動きをつけていきます。

杉浦直子
杉浦 直子
ディレクター
続きを読む
特定の要素にだけスタイルを設定する方法

【CSS:疑似クラス】特定の要素にだけスタイルを設定する方法

UPDATE : 2018.04.19

こんにちは。コーダーの兼山です。 特定のコンテンツのみ、指定をしたいことがある場合、 CSS3で追加された「nth-child」擬似クラスを使うことで実装することができます。 その方法をリストタグで紹介します。

兼山暖美
兼山 暖美
エンジニア
続きを読む
無料相談窓口