会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

CSS(シー・エス・エス)

CSS(シー・エス・エス)

【CSS】(蛍光ペン風)文字にマーカーが引かれたような下線デザインを作る方法|background: linear-gradient

文字の下半分に「マーカーで引いたような線を入れたい」と思った時に使える方法です。CSSで簡単に加工できますので、ぜひお試しください。 文字の下半分にマーカーのような線を引く background: linear-gra...
CSS(シー・エス・エス)

【CSS】背景画像に半透明のレイヤーを重ねる方法|疑似要素::after

「背景画像を配置してその上に文字を配置」などをした場合、背景画像が明るすぎて文字が見えない…という場合もあるかと思います。そのような時に使える方法です。 普通に画像に半透明の黒画像を重ねて画像化して配置しても良いのですが、それだと芸...
CSS(シー・エス・エス)

【CSS】背景画像(background-image)を横幅100%に広げる方法【レスポンシブWEBデザイン】

「CSSで背景画像を画面幅いっぱいに広げたい」という時に使える方法です。背景画像を配置しただけでは、必ずしも画面幅いっぱいに広がる訳ではなく、no-repeatなどを指定した場合、左上の方に1枚ポツンと表示されてしまったりします。 ...
CSS(シー・エス・エス)

【CSS】文字の行右端の位置が合わない…?時に使えるjustify(均等割り付け)の方法|text-align

p(段落)でテキストを入れた時に、右側の端が微妙に合わない…?という状態になっていました。 そんな時は「text-align プロパティに「justify」を指定する」という方法で、CSSの両端揃え(均等割り付け)を設定する...
CSS(シー・エス・エス)

【CSS】メディアクエリ(Media Queries)の「only」とは何か?という素朴な疑問について

メディアクエリ(Media Queries)にonlyがある場合と無い場合があることに今さらながら気付きましたが、このonlyがある場合と無い場合の違いとは何か…?について書いてみます。 そもそもメディアクエリ(Media Quer...
CSS(シー・エス・エス)

【パララックスページ】HTMLとCSSを使ってパララックスサイトを作る方法【視差効果】

ワードプレスなどでパララックスページを作りたいと思った時に、「そもそもどうやって作るんだろう?」という疑問が出るかと思います。かくいう僕も同じ疑問でパララックスの壁にぶち当たりました。そのような時に参考にしてみていただければと思います。以...
CSS(シー・エス・エス)

【CSS】グリッドレイアウトで更に複雑なボックスを並べてみる[3/4]グリッドデザイン(display: grid)

ディスプレイグリッド(グリッドレイアウト)で調整する 前回まではディスプレイグリッド(グリッドレイアウト)を使ってCSSレイアウトの横幅や縦幅を調整する方法を書きました。今回は、さらに複雑なレイアウトに挑戦してみたいと思います。 ...
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】【1枚ずつ表示編】アニメーションで画像や文字を遅延表示(遅れて表示)させる方法|CSS animation

前回、CSSのアニメーションを使って「画像や文字を遅延表示(遅れて表示)」させる方法を書きましたが、今回はさらにパワーアップして「1枚ずつ順番に」画像や要素を表示させる方法に挑戦をしてみたいと思います。 CSS animation(...
CSS(シー・エス・エス)

【CSS】アニメーションで画像や文字を遅延表示(遅れて表示)させる方法|CSS animation

CSSで遅延アニメーションを作りたい WEBサイトを見ていると「画像や要素が遅れて表示されている!」という、かっこいいWEBサイトを見る場面も多いかと思います。 複雑なものはどうなっているのかよく分かりませんが、CSSの基本ア...
CSS(シー・エス・エス)

【2021年版】「Font Awesome」とは?アイコンのインポートと設置方法

「Font Awesome」というものをご存知でしょうか。使えるようになっておくと、WEBデザインの場でも役に立ちますので、ぜひ知見として覚えておくとよいかと思います。 「Font Awesome」とは? 「Font Awes...
CSS(シー・エス・エス)

【CSS】WEBページを開いた時の「ローディング・アニメーション」を作る方法|HTML・CSS・jQuery

ローディング・アニメーションを表示したい サイトを開いた時や画面を遷移した時に、ページが表示される時にただ待ってもらっているだけでは…という感じがしたので、画面の前に「ローディングアニメーション」を表示させたい…と思...
CSS(シー・エス・エス)

【CSS】マウスオーバーした時に浮き上がる表現をする方法|transition&transform|hoverした時のホバーアニメーション

CSS要素のホバーアニメーション 「hoverした時にふわっとしたアニメーションをさせたくて…。」そんなことを考えながら、記事の一覧ページで、マウスオーバーした時に、フワッと浮き出るような表現を作りたい…!と思った時に使えるCSSの...
CSS(シー・エス・エス)

【CSS】指定の子要素を持つ親要素をクラス選択して非表示にする方法|hasClass(class)

またちょっと悩ましいことを試したい…という今日この頃。「指定の子要素を持つ親要素を選択して非表示にする」という方法です。 指定の子要素を持つ親要素 例えば、WordPressのカテゴリー一覧ページで「指定のcat-labelを...
CSS(シー・エス・エス)

【CSS】:first-child|並んでいる最初のブロック要素だけのサイズを小さくしたりするCSS

並んでいるブロックの最初だけ小さくしたい 例えば、ワードプレスなどでCSSを設定してブロックを並べている時に、「最初の一番左のブロックだけを、幅を短くしたい」といった場合に使える方法です。 <div class="wra...
CSS(シー・エス・エス)

【CSS】position:absolute;について再度おさらい!思いのままに図形をWEBページ上に配置する

position:absolute;については、過去にも何度か書いていますが、それでもまた分からなくなってしまったので、再度おさらいの意味を込めてご紹介したいと思います。 メンティー position:absolute;が、また分か...
CSS(シー・エス・エス)

【CSS】画像に黒の透過・半透明カラーを重ねる方法

WEBサイトの背景一面に画像を配置した場合などに、メニューの文字がみづらい場合に上に半透明画像を重ねたい場合に使える方法です。 疑似要素::before ::afterを使う CSS における ::before は、選...
CSS(シー・エス・エス)

【CSS】続・WordPressで縦書きレイアウトの文字を表示する方法|writing-mode: vertical-rl;

前回、段落を縦書きにできた。 前回、「段落を縦書きにする」のお話で、段落を縦書きにするところまで成功しました。しかし、このままでは文章が画面の下の方に突き出てしまい、いまいち見にくい文章になってしまいます。 writi...
タイトルとURLをコピーしました