CSS

文章の途中に「続きを見る」ボタンが設置してあり、クリックすると続きの文章が表示されるアコーディオンを作ります。 ◆まずはデモページをご覧ください。 デモページを見る   「jQuery」を事 ...

今回は、吹き出しデザインを作ってみます。 スマホでは吹き出しとイラストが上下になるようにしています。 ポイントは、三角形の作り方です。 「border」を使って作るのがよく知られていますが、今回は「c ...

スクロールして要素が表示される位置に来ると、順番にふわっとフェードインして表示される仕組みです。 ◆まずはデモページをご覧ください。 デモページを見る   HTML <div clas ...

画像に単色の背景などを被せた時に、全ての角を角丸にするCSSです。 下の画像のようにします。デモページもご覧ください。 デモページを見る     やる事としては、角丸にしたい個所に ...

年内最後の更新は、今年よく利用させてもらった「swiper」の使い方を解説します。 サイトのメインビジュアルでよく目にするスライダーですが、導入するなら「swiper」がお勧めです。 有名な大手サイト ...

clip-path（クリップパス）を使うと、その画像や要素をトリミングすることが出来ます。 ◆まずはデモページをご覧ください。 デモページを見る   clip-path（クリップパス）の種類 ...

ページをスクロールして画像が表示される位置になると、徐々に表示されるアニメーション作ります。 ◆まずはデモページをご覧ください。 デモページを見る   ◆HTMLです。 最初の「contai ...

メインビジュアルなど、ファーストビューで文字がクルクル回るパーツを見かけます。 今回はそのパーツを作ってみます。 ◆まずはデモページをご覧ください。 デモページを見る   メインビジュアルの ...

今回は、テキストをマーカー風に線を引く方法と、マウスオーバーでマーカー線を引くようなリンクも作ってみます。 おまけで、マウスオーバーで線を波のように動かすリンクもご紹介します。 ◆まずはデモページをご ...

アイキャッチのように、画像を自由な形にトリミングする方法を解説します。 トリミングする方法として、自分でCSSを書く方法がありますが、今回は「FANCY-BORDER-RADIUS」というジェネレータ ...

「ul・li」を使ったシンプルなアコーディオンを作ります。 タイトルをクリックすると、アニメーションで内容が展開され、もう一度クリックすると閉じられます。 「＋マーク」と「×マーク」もアニメーションで ...

今回は、CSSを使って画像の横に縦書きのテキストを表示する方法を解説します。 ◆まずはデモページをご覧ください。 デモページを見る   テキストを右と左の交互に表示する形式にしています。 H ...

<details>と<summary>はアコーディオンのような折りたたみ要素を作る場合に最適です。 この2つのタグだけで、アコーディオンの開閉が出来ます。 今回はシンプルな作り ...

アイキャッチ画像のグレー部分のように、画像を配置すると下に若干の余白が発生してしまいます。 この原因は、画像のインライン要素の初期値がベースライン（vertical-align: baseline;） ...