フロントエンド– category –

CSSアニメーションを使用して、自動的に色が切り替わる信号機を作ってみました。 以下が実際の制作物です。 コピペ用の実装コード一式とコードの解説をしていきますので...

Webサイト上には、クリックで開閉できるアコーディオンメニュー（折りたたみメニュー）がよく使用されていますね。 当サイトでも紹介している通り、アコーディオンメニ...

高機能なスライダーを実装できるJSライブラリ「Swiper」を使用して、以下のような機能のスライドショーを作成していきます。 一定速度で横方向にゆっくり流れる1枚ずつ...

Web上で方眼紙のような模様の背景を実装したい場合があるかと思います。 方眼紙模様の背景画像を用意して使うこともできますが、その場合は色を変えたり、線の太さを変...

以前の記事で、padding-topの性質を利用して、要素のアスペクト比を固定しつつレスポンシブ化する方法を紹介しました。 しかしこの方法だと、比率を計算して%で表記する...

今回の記事では、モーダルとスライダーを組み合わせて使用する方法を紹介していきます。 ページ上のボタンをクリックするとモーダルが開き、その中にスライダーを設置す...

ポートフォリオサイトなどで自身のスキルを示したい時、経験年月を合わせて記載することが多いかと思います。 参考：筆者のポートフォリオサイト HTMLで年月をベタ書き...

文章を強調したいときに、2重下線で文字を装飾したいという場面があるかと思います。 CSSには2重下線を実装できるtext-decorationプロパティがありますが、 色を一色し...

CSSではlinear-gradientなどの関数を使うことで、背景にグラデーションカラーを設定することができますね。 しかしこの関数はbackgroundプロパティにしか使えないため、...

マウスホバー時に裏表が反転するカードをCSSで実装してみました。 以下のカードにマウスカーソルを当ててみてください。（SPの場合はタップ） このアニメーションをCSS...

CSSでは、レスポンシブに対応させるためのメディアクエリを書く機会が多いですよね。 特にブレイクポイントの多いサイトだと、以下のように記述量が多くなってしまいが...

CSSでは、/*と*/で文字を囲うことでコメントを記述することができますね。 /* ここにコメントを記入 */ .sample { color: red; } Sassではコメントの記述方法が2種類用...

Sassとは、CSSを効率的に記述できるように設計・開発された言語です。 入れ子の使用、変数・関数の使用など便利な機能が多く、Web制作者なら必ず身につけておきたいスキ...

Sassを簡単に説明すると「CSSの拡張版」で、CSSにはない多くの便利な機能がありますね。 その中でも色を操作するための関数がとても便利ですので、紹介していこうと思い...

大規模なWeb制作案件になると、CSSのコード量も膨大になりますよね。 パーツごと・役割ごとにCSSファイルを分割することで管理しやすくなりますが、その場合、 読み込み...

Swiperとは、スライダー（カルーセル）を簡単に作成できるJSライブラリです。 jQueryなどのフレームワークに依存せず、また用意されているオプションを指定するだけで高...