CSS(シー・エス・エス) 【CSS】（蛍光ペン風）文字にマーカーが引かれたような下線デザインを作る方法｜background: linear-gradient
文字の下半分に「マーカーで引いたような線を入れたい」と思った時に使える方法です。CSSで簡単に加工できますので、ぜひお試しください。文字の下半分にマーカーのような線を引くbackground: linear-gradientを使います。li...
CSS(シー・エス・エス)
CSS(シー・エス・エス) 
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-te...
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」とは、CS...
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="wrap"> <span cl...
CSS(シー・エス・エス) 【CSS】position:absolute;について再度おさらい！思いのままに図形をWEBページ上に配置する
position:absolute;については、過去にも何度か書いていますが、それでもまた分からなくなってしまったので、再度おさらいの意味を込めてご紹介したいと思います。メンティーposition:absolute;が、また分からなくなりま...
CSS(シー・エス・エス) 【CSS】画像に黒の透過・半透明カラーを重ねる方法
WEBサイトの背景一面に画像を配置した場合などに、メニューの文字がみづらい場合に上に半透明画像を重ねたい場合に使える方法です。疑似要素::before ::afterを使うCSS における ::before は、選択した要素の最初の子要素と...
CSS(シー・エス・エス) 【CSS】続・WordPressで縦書きレイアウトの文字を表示する方法｜writing-mode: vertical-rl;
前回、段落を縦書きにできた。前回、「段落を縦書きにする」のお話で、段落を縦書きにするところまで成功しました。しかし、このままでは文章が画面の下の方に突き出てしまい、いまいち見にくい文章になってしまいます。writing-mode: vert...
CSS(シー・エス・エス) 【CSS】WordPressで縦書きレイアウトの文字を表示する方法｜writing-mode: vertical-rl;
ワードプレスなどで色々とページを作っていると、「小説風に縦書き」で表示したい・・・！という場面も出てくるかと思います。そんな時に使える方法です。writing-mode: vertical-rl;writing-modeテキストの行のレイア...
CSS(シー・エス・エス) 【CSS】：has CSS Selectorとは？
：has CSS SelectorDid You Know About the :has CSSSelector?Twitterの投稿で見つけましたが、CSSの:has( )セレクタについて。意味が分からなかったので実際に試してみました。d...
CSS(シー・エス・エス) 【CSS】position: absoluteとposition: relativeについてもう一度おさらい｜絶対位置・相対位置
図形をレイアウトする時に使うposition:「absolute」「relative」がまたまた分からなくなってしまったので・・・改めておさらいをしたいと思います。HTMLとCSSでBOXを並べる<!doctype html><html><...
CSS(シー・エス・エス) 【WordPress】画面サイズが小さくなるにつれて文字サイズを可変にするCSSの設定方法
画面はテキストをposition:absolute;で位置を指定した状態です。テキストサイズ（font size）をpxで直接、指定しています。この場合、画面サイズが小さくなったときも、同じフォントサイズのままになります。こちらを「画面の幅...
CSS(シー・エス・エス) 【HTML・CSS】文字を中央揃えや右揃え・均等割り付けにする方法
HTMLやCSSで文字を中央揃えにしたいと思った時には、「text-align」というCSSプロパティを使って指定をすることで、揃えることができます。text-alignを指定する下記のような感じでプロパティにテキストアラインを指定します。...
CSS(シー・エス・エス) 【CSS】CSSを使って三角形を作る方法｜borderプロパティ｜transparent
CSSで三角形を作るborder:属性を使うことで、三角形を作成できます。土台を作るborderプロパティを使って三角形の土台を作ってみます。このようにすると、上編に青色のボーダーが入った四角形が作られます。※見やすいように背景に黄色を設定...
CSS(シー・エス・エス) 【CSS】 Flexbox(フレックスボックス)とは何？を解説！基本編PART1
CSSを使っていると、必ずと言っていいほど出てくる「Flexbox（フレックスボックス）」とは何か？について説明していきたいと思います。フレックスボックスの基本概念フレックスボックスを使うと、例えば下記のようなレイアウトを簡単に作ることがで...
CSS(シー・エス・エス) 【CSS】unsplash.com｜CSSのサンプルを作る時のサンプル用画像に便利なストックフォトサイト【商用利用フリー画像】
無料で商用利用可なフリー画像や写真素材を探しているのであれば「unsplash.com」さんもオススメのひとつです。unsplash.comとは？Unsplashライセンスに基づくストックフォトの共有に特化したWebサイト。207,000人...
CSS(シー・エス・エス) 【CSSプロパティ】background｜背景に関する指定を行う
background：バックグラウンド : 背景の指定をするプロパティbackground背景に関する指定をまとめて行います。background バックグラウンド : -color -image -repeat -position -at...
CSS(シー・エス・エス) 【CSS】cssのvwとは？ vh, vmin, vmax,%の違いについて
widthcssで画像の横幅を指定しない場合は画像サイズがそのまま設定されるので、ウィンドウサイズが大きくても小さくても画像のサイズはそのままです。ウィンドウを小さくすると、画像が隠れて見えなくなります。width:100%画面の横幅いっぱ...
