CSS

CSS

【CSS・JS】開閉アニメーションのアコーディオンを作る

2025/10/5  

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

CSS

【CSS】吹き出しデザイン-三角形は「clip-path」で作る

2025/3/24  

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

CSS

【CSS・JS】スクロールすると順番にフェードインして要素が表示される仕組みを作る

2025/2/24    ,

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

CSS

【CSS】背景を被せた時に全ての角を角丸にする

2025/1/27  

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

CSS

【swiper】を使ってメインビジュアルを作る

2024/12/27  

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

CSS

【CSS】クリップパスで画像を斜めにトリミングする

2024/8/3  

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

CSS

【CSS・JS】スクロールすると画像が徐々に表示するアニメーションを作る

2024/6/16  

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

CSS

【CSS】アイコンの周りで文字がクルクル回るパーツを作る

2024/4/6  

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

CSS

【CSS】マーカー風のテキストリンクを作る

2024/3/8  

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

CSS

画像を自由で歪んだ形にトリミングする

2024/1/13  

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

CSS

【CSS・JS】「ul・li」を使ったアコーディオンを作る

2023/12/6  

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

CSS

【CSS】画像の左右に縦書きのテキストを表示する

2023/11/8  

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

CSS

「details」と「summary」でアコーディオンを作る

2023/10/6  

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

CSS

【CSS】画像の下に余白が発生する問題を解決する

2023/8/21  

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

© 2025 Web担当屋 ブログ