スキルアップはこちら!!▶[click]

CSS(シーエスエス・しーえすえす)

CSS(シーエスエス・しーえすえす) CSS(シーエスエス)

CSS(Cascading Style Sheets・カスケーディング・スタイル・シート)ウェブサイトのスタイルを指定する言語です。

CSS(シーエスエス)

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

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

【CSS】WordPressでCSS変数(カスタムプロパティ)を使う方法|var(–name)

CSSのvar(--name)とは? WordPressのTwenty Twenty-One - WordPress テーマなどのCSSを見ていると、ところどころに、--global--color-background: #ffff...
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...
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 ...
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ライセンスに基づくストックフォトの共有に特化したWebサイト。207,000人以上の写真家に貢献しており、200万枚を超える写真のライブラリで月に170億枚を超える写真の印象を生み出し...
CSS(シーエスエス)

【CSSプロパティ】background|背景に関する指定を行う

background:バックグラウンド : 背景の指定をするプロパティ background 背景に関する指定をまとめて行います。 background バックグラウンド : -color -image -repeat ...
CSS(シーエスエス)

【CSS】cssのvwとは? vh, vmin, vmax,%の違いについて

width cssで画像の横幅を指定しない場合は画像サイズがそのまま設定されるので、ウィンドウサイズが大きくても小さくても画像のサイズはそのままです。 ウィンドウを小さくすると、画像が隠れて見えなくなります。 ...
CSS(シーエスエス)

【CSS】右に何も無いのになぜかスマホで右にスクロールできてしまう?右側にできた謎の余白を消す方法

横幅は収まっているはずが・・・? cssを見ていても、横幅は画面に収まっているはずなのに、なぜか横にスクロールが出来てしまう。 こんな時の、ひとまずの対処法です。 Develope...
CSS(シーエスエス)

【CSS】スマホで表示した時に画面が横にスクロールする状態を解決する方法

WordPressなどでウェブサイトを作成した時に、スマホで表示させた時に横にスクロールしてしまう場合の解決法です。 width : 100% からのはみ出し? 例えばですが、単純に、width : 100%の場合に要素に左右...
CSS(シーエスエス)

【CSS】ドロワーメニューが途中で切れてしまい下まで表示できない場合の対処法

CSSを扱っていて、PCの時は問題ないのですが、スマホでドロワーメニューを表示した時に、メニューが途中で切れてしまい、下まで表示がされない症状が発生しました。 解決したので、その方法です。 余白の高さを調整する heig...
CSS(シーエスエス)

【CSS入門】パララックスサイトを作ってみる!|準備編

パララックスとは? パララックスとは『視差効果(しさこうか)|(Parallax Effect)』のこと。スクロールした時に画面の動き方をずらすことで、奥行きのあるページ仕上げることができるデザインの手法です。 welikes...
タイトルとURLをコピーしました