CSS(シー・エス・エス)

たとえば、前に実装をした「三角形の形」が要素の上に表示されると、下のアイコンがクリックできないという症状が発生する場合があります。上の三角形が邪魔してクリックができない。このときはCSS「pointer-events: none;」を使うこ...

例えば、ワードプレスなどでアイコンをクリックした際に画面が表示されるような場合に、吹き出しっぽく三角形▲←のような形を作りたいと思った時に使える方法です。borderプロパティで作る以前も書いたのですが、borderプロパティを使うことで「...

画像をクリックしたら動き出す…といったアニメーションを作りたいと思った時は「jQueryやJavaScriptを使う」といった方法が定石だろうとは思いますが、CSSだけでも作れそうでしたので、試してみます。input:checkedを使うi...

例えばdivでボタンっぽい形状を作った時にリンクが貼られていないと（例えばクリックイベントなどで）ボタンが通常の三角形のマウス形状のままになってクリックできるのだろうか？と一瞬違和感を感じてしまう可能性があります。ボタンをクリックであれば、...

以前にもGrid Layout(グリッドレイアウト)の話を書いたのですが、またまた分からなくなったので、改めて復習をしたいと思います。▼サンプルページはこちら基本「 display: grid; 」と書く Grid Layout(グリッドレ...

ボタンにマウスオーバーしたタイミングで、要素が画面いっぱいに広がって埋め尽くす、といったアニメーションを作ってみます。▼demoページはこちらCSSでアニメーションを設定するまずは、ボタンを作ります。HTMLでdivボックスを作ります。<d...

「疑似要素:before」のcontent内で改行したい…と思ったときに、どうやって？という壁にあたったので、その方法について紹介したいと思います。white-space: preを使う改行したい位置で \A を入力し、white-spac...

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

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

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

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

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

ディスプレイグリッド（グリッドレイアウト）で調整する前回まではディスプレイグリッド（グリッドレイアウト）を使ってCSSレイアウトの横幅や縦幅を調整する方法を書きました。今回は、さらに複雑なレイアウトに挑戦してみたいと思います。grid-te...

WEBページでよく見る「入力フォーム」ですが、今回はHTMLのinputでの入力フォームの作り方の基本とCSSでデザインする方法についてご紹介をしていきます。入力フォーム要素HTML のinput要素は、ユーザーからデータを受け取るための、...

ディスプレイグリッド（グリッドレイアウト）前回、ディスプレイグリッド（グリッドレイアウト）を使ってCSSレイアウトを作ってみました。今回は、さらにdisplay: gridで色々と試してみたいと思います。※前回の謎のレイアウトですが、どうや...

複雑なブロックレイアウトをCSSでどうやって作るのか？と考えていたら「グリッドレイアウト」を使えばどうにかなりそう…ということで、試してみました。▶デモページはこちら グリッドレイアウト(display: grid)の基本グリッドは、列と行...

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

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

「Font Awesome」というものをご存知でしょうか。使えるようになっておくと、WEBデザインの場でも役に立ちますので、ぜひ知見として覚えておくとよいかと思います。「Font Awesome」とは？「Font Awesome」とは、CS...

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

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

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

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

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

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

前回、段落を縦書きにできた。前回、「段落を縦書きにする」のお話で、段落を縦書きにするところまで成功しました。しかし、このままでは文章が画面の下の方に突き出てしまい、いまいち見にくい文章になってしまいます。writing-mode: vert...

ワードプレスなどで色々とページを作っていると、「小説風に縦書き」で表示したい・・・！という場面も出てくるかと思います。そんな時に使える方法です。writing-mode: vertical-rl;writing-modeテキストの行のレイア...