CSS(シー・エス・エス) 【CSS】指定の子要素を持つ親要素をクラス選択して非表示にする方法｜hasClass(class)
またちょっと悩ましいことを試したい…という今日この頃。「指定の子要素を持つ親要素を選択して非表示にする」という方法です。 指定の子要素を持つ親要素 例えば、WordPressのカテゴリー一覧ページで「指定のcat-labelを持ったカテゴリ...
CSS(シー・エス・エス)
CSS(シー・エス・エス) 
CSS(シー・エス・エス) 【CSS】:first-child|並んでいる最初のブロック要素だけのサイズを小さくしたりするCSS
並んでいるブロックの最初だけ小さくしたい 例えば、ワードプレスなどでCSSを設定してブロックを並べている時に、「最初の一番左のブロックだけを、幅を短くしたい」といった場合に使える方法です。 <div class="wrap"> <span ...
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: ve...
CSS(シー・エス・エス) 【CSS】WordPressで縦書きレイアウトの文字を表示する方法｜writing-mode: vertical-rl;
ワードプレスなどで色々とページを作っていると、「小説風に縦書き」で表示したい・・・！という場面も出てくるかと思います。そんな時に使える方法です。 writing-mode: vertical-rl; writing-modeテキストの行のレ...
CSS(シー・エス・エス) 【CSS】：has CSS Selectorとは？
：has CSS Selector Did You Know About the :has CSSSelector? Twitterの投稿で見つけましたが、CSSの:has( )セレクタについて。意味が分からなかったので実際に試してみました...
CSS(シー・エス・エス) 【CSS】position: absoluteとposition: relativeについてもう一度おさらい｜絶対位置・相対位置
図形をレイアウトする時に使うposition:「absolute」「relative」がまたまた分からなくなってしまったので・・・改めておさらいをしたいと思います。 HTMLとCSSでBOXを並べる <!doctype html> <htm...
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,00...
CSS(シー・エス・エス) 【CSSプロパティ】background｜背景に関する指定を行う
background：バックグラウンド : 背景の指定をするプロパティ background 背景に関する指定をまとめて行います。 background バックグラウンド : -color -image -repeat -position ...
CSS(シー・エス・エス) 【CSS】cssのvwとは？ vh, vmin, vmax,%の違いについて
width cssで画像の横幅を指定しない場合は画像サイズがそのまま設定されるので、ウィンドウサイズが大きくても小さくても画像のサイズはそのままです。 ウィンドウを小さくすると、画像が隠れて見えなくなります。 width:100% 画面の横...
CSS(シー・エス・エス) 【CSS】右に何も無いのになぜかスマホで右にスクロールできてしまう？右側にできた謎の余白を消す方法
横幅は収まっているはずが・・・？ cssを見ていても、横幅は画面に収まっているはずなのに、なぜか横にスクロールが出来てしまう。 こんな時の、ひとまずの対処法です。 DeveloperToolsでCSSのプロパティ＆値を片っ端から消す おそら...
CSS(シー・エス・エス) 【CSS】スマホで表示した時に画面が横にスクロールする状態を解決する方法
WordPressなどでウェブサイトを作成した時に、スマホで表示させた時に横にスクロールしてしまう場合の解決法です。 width : 100% からのはみ出し? 例えばですが、単純に、width : 100%の場合に要素に左右にmargin...
CSS(シー・エス・エス) 【CSS】ドロワーメニューが途中で切れてしまい下まで表示できない場合の対処法
CSSを扱っていて、PCの時は問題ないのですが、スマホでドロワーメニューを表示した時に、メニューが途中で切れてしまい、下まで表示がされない症状が発生しました。 解決したので、その方法です。 余白の高さを調整する height：100%だとま...
CSS(シー・エス・エス) 【CSS入門】パララックスサイトを作ってみる！｜準備編
パララックスとは？ パララックスとは『視差効果（しさこうか）｜(Parallax Effect)』のこと。スクロールした時に画面の動き方をずらすことで、奥行きのあるページ仕上げることができるデザインの手法です。 welikesmall.co...
CSS(シー・エス・エス) 【CSS入門】WEBサイトのスマホ画面シミュレーションができる便利サイト｜responsinator.com
WEBサイトをスマートフォンで見た時にどんな感じになるのか？という画面のイメージをサクッと見てみたいときに便利なサイトです。 Enter your site サイト左上の「Enter your site」にスマートフォンで見てみたいサイトの...
