CSS(シー・エス・エス) 【CSS】画像をクリックしたら動き出すイベントを作る方法
画像をクリックしたら動き出す…といったアニメーションを作りたいと思った時は「jQueryやJavaScriptを使う」といった方法が定石だろうとは思いますが、CSSだけでも作れそうでしたので、試してみます。 input:checkedを使う...
CSS(シー・エス・エス)
CSS(シー・エス・エス) 
CSS(シー・エス・エス) 【CSS】マウスカーソルの形状を変える方法「cursor」プロパティ
例えばdivでボタンっぽい形状を作った時にリンクが貼られていないと（例えばクリックイベントなどで）ボタンが通常の三角形のマウス形状のままになってクリックできるのだろうか？と一瞬違和感を感じてしまう可能性があります。 ボタンをクリックであれば...
CSS(シー・エス・エス) 【CSS】Grid Layout(グリッドレイアウト)で横縦縦縦の1×3のレイアウトを作る方法
以前にもGrid Layout(グリッドレイアウト)の話を書いたのですが、またまた分からなくなったので、改めて復習をしたいと思います。 ▼サンプルページはこちら 基本「 display: grid; 」と書く Grid Layout(グリッ...
CSS(シー・エス・エス) 【CSS】ボタンにマウスオーバーしたら画面いっぱいに要素が広がるアニメーションを作ってみる
ボタンにマウスオーバーしたタイミングで、要素が画面いっぱいに広がって埋め尽くす、といったアニメーションを作ってみます。 ▼demoページはこちら CSSでアニメーションを設定する まずは、ボタンを作ります。 HTMLでdivボックスを作りま...
CSS(シー・エス・エス) 【CSS】疑似要素:before/:afterのcontent内で改行をする方法
「疑似要素:before」のcontent内で改行したい…と思ったときに、どうやって？という壁にあたったので、その方法について紹介したいと思います。 white-space: preを使う 改行したい位置で \A を入力し、white-sp...
CSS(シー・エス・エス) 【CSS】（蛍光ペン風）文字にマーカーが引かれたような下線デザインを作る方法｜background: linear-gradient
文字の下半分に「マーカーで引いたような線を入れたい」と思った時に使える方法です。CSSで簡単に加工できますので、ぜひお試しください。 文字の下半分にマーカーのような線を引く background: linear-gradientを使います。...
CSS(シー・エス・エス) 【CSS】背景画像に半透明のレイヤーを重ねる方法｜疑似要素::after
「背景画像を配置してその上に文字を配置」などをした場合、背景画像が明るすぎて文字が見えない…という場合もあるかと思います。そのような時に使える方法です。 普通に画像に半透明の黒画像を重ねて画像化して配置しても良いのですが、それだと芸が無いの...
CSS(シー・エス・エス) 【CSS】背景画像（background-image）を横幅100%に広げる方法【レスポンシブWEBデザイン】
「CSSで背景画像を画面幅いっぱいに広げたい」という時に使える方法です。背景画像を配置しただけでは、必ずしも画面幅いっぱいに広がる訳ではなく、no-repeatなどを指定した場合、左上の方に１枚ポツンと表示されてしまったりします。 このよう...
CSS(シー・エス・エス) 【CSS】文字の行右端の位置が合わない…？時に使えるjustify（均等割り付け）の方法｜text-align
p(段落)でテキストを入れた時に、右側の端が微妙に合わない…？という状態になっていました。 そんな時は「text-align プロパティに「justify」を指定する」という方法で、CSSの両端揃え(均等割り付け)を設定すると、行の右端も揃...
CSS(シー・エス・エス) 【CSS】メディアクエリ(Media Queries)の「only」とは何か？という素朴な疑問について
メディアクエリ(Media Queries)にonlyがある場合と無い場合があることに今さらながら気付きましたが、このonlyがある場合と無い場合の違いとは何か…？について書いてみます。 そもそもメディアクエリ(Media Queries)...
CSS(シー・エス・エス) 【パララックスページ】HTMLとCSSを使ってパララックスサイトを作る方法【視差効果】
ワードプレスなどでパララックスページを作りたいと思った時に、「そもそもどうやって作るんだろう？」という疑問が出るかと思います。かくいう僕も同じ疑問でパララックスの壁にぶち当たりました。そのような時に参考にしてみていただければと思います。以前...
CSS(シー・エス・エス) 【CSS】グリッドレイアウトで更に複雑なボックスを並べてみる[3/4]グリッドデザイン(display: grid)
ディスプレイグリッド（グリッドレイアウト）で調整する 前回まではディスプレイグリッド（グリッドレイアウト）を使ってCSSレイアウトの横幅や縦幅を調整する方法を書きました。今回は、さらに複雑なレイアウトに挑戦してみたいと思います。 grid-...
CSS(シー・エス・エス) 【CSS】HTMLのinputで入力フォームを作る基本方法＆CSSでフォームのデザインを変える方法[1/3]
WEBページでよく見る「入力フォーム」ですが、今回はHTMLのinputでの入力フォームの作り方の基本とCSSでデザインする方法についてご紹介をしていきます。 入力フォーム要素 HTML のinput要素は、ユーザーからデータを受け取るため...
CSS(シー・エス・エス) 【CSS】グリッドレイアウトで更に複雑なボックスを並べてみる[2/4]グリッドデザイン(display: grid)
ディスプレイグリッド（グリッドレイアウト） 前回、ディスプレイグリッド（グリッドレイアウト）を使ってCSSレイアウトを作ってみました。今回は、さらにdisplay: gridで色々と試してみたいと思います。 ※前回の謎のレイアウトですが、ど...
CSS(シー・エス・エス) 【CSS】グリッドレイアウトでサイズが違う複数のボックスを複雑に並べてみる[1/4]グリッドデザイン(display: grid)
複雑なブロックレイアウトをCSSでどうやって作るのか？と考えていたら「グリッドレイアウト」を使えばどうにかなりそう…ということで、試してみました。 ▶デモページはこちら グリッドレイアウト(display: grid)の基本 グリッドは、列...
CSS(シー・エス・エス) 【CSS】【１枚ずつ表示編】アニメーションで画像や文字を遅延表示（遅れて表示）させる方法｜CSS animation
前回、CSSのアニメーションを使って「画像や文字を遅延表示（遅れて表示）」させる方法を書きましたが、今回はさらにパワーアップして「１枚ずつ順番に」画像や要素を表示させる方法に挑戦をしてみたいと思います。 CSS animation（復習） ...
CSS(シー・エス・エス) 【CSS】アニメーションで画像や文字を遅延表示（遅れて表示）させる方法｜CSS animation
CSSで遅延アニメーションを作りたい WEBサイトを見ていると「画像や要素が遅れて表示されている！」という、かっこいいWEBサイトを見る場面も多いかと思います。 複雑なものはどうなっているのかよく分かりませんが、CSSの基本アニメーションだ...
CSS(シー・エス・エス) 【2021年版】「Font Awesome」とは？アイコンのインポートと設置方法
「Font Awesome」というものをご存知でしょうか。使えるようになっておくと、WEBデザインの場でも役に立ちますので、ぜひ知見として覚えておくとよいかと思います。 「Font Awesome」とは？ 「Font Awesome」とは、...
CSS(シー・エス・エス) 【CSS】WEBページを開いた時の「ローディング・アニメーション」を作る方法｜HTML・CSS・jQuery
ローディング・アニメーションを表示したい サイトを開いた時や画面を遷移した時に、ページが表示される時にただ待ってもらっているだけでは…という感じがしたので、画面の前に「ローディングアニメーション」を表示させたい…と思い、実際に試してみたいと...
CSS(シー・エス・エス) 【CSS】マウスオーバーした時に浮き上がる表現をする方法｜transition＆transform|hoverした時のホバーアニメーション
CSS要素のホバーアニメーション 「hoverした時にふわっとしたアニメーションをさせたくて…。」そんなことを考えながら、記事の一覧ページで、マウスオーバーした時に、フワッと浮き出るような表現を作りたい…！と思った時に使えるCSSの方法です...
