ホームページを制作する際に、絶対知っておかなければならないのが「CSS」です。
すでに「SASS」などのメタ言語が導入され、「CSS」をあまり使わない方もいらっしゃるかと思います。
しかし、「CSS」を知っていないとどうにもなりません。
私の場合はWordPressであろうと、スクラッチであろうと「CSS」を直に書いています。
その中でも、定番の「CSS」をまとめることは、自分のためだけでなく、多くのユーザーの参考にもなるのではないかと思います。
【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る
ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。
ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。
もくじ
複雑なflexboxはチートシートで解決
古くからのWEB制作者はJavaScriptやfloatなどを駆使して、要素ブロックを作っていました。
それは、長らくインターネットエクスプローラーの対策になっていたのです。
しかし、本当に便利な「flexbox」があるにも関わらず、そのような対策を行っていたものですから、「flexbox」の導入が遅れました。
いざ、「flexbox」を使ってみようとすると、その設定の複雑さに放り出しそうになりました。
あるとき、便利なチートシートを手に入れることができました。
今でも、そのシートを使用しています。
以下のサイトからダウンロード出来ます。
このチートシートを見るだけで、「flexbox」の理解が格段に早まります。
これを紹介できただけで、世界のために貢献できたような気分ですが、以下からはあまり面白くないかもしれません。
私が良く使用しているCSSを列挙していきます。
【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る
レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定（絵文字読み込み・コード最適化）他、機能多数。
ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。
基本
真ん中
要素を真ん中にしたいということは本当によくあります。
.centering {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
backface-visibility: hidden;
}とても基本的なセンタリングです。
#mannaka {
position: absolute;
right: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}これはposition: absolute;を使った例です。
要素の開始を50%にして、要素の大きさ分を50％ずらしています。
何番目
要素の最初や最後、奇数、偶数を指定します。
/* 2番目 */
ul li:nth-child(2) {
background-color: #ccc;
color: #fff;
}
/* 3つおき */
ul li:nth-child(4n) {
color: #fff;
}
/* 奇数 */
ul li:nth-child(odd){
background-color: #ccc;
color: #fff;
}
/* 偶数 */
ul li:nth-child(even){
background-color: #ccc;
color: #fff;
}
/* 最後じゃない */
ul li:not(:last-child) {
border-bottom: solid 3px #000;
}ボーダー
.border {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
}
#gNavi #gNavi-area .sub-menu li {
border-bottom: 1px solid rgba(0,0,0,0.3);
}
/* リセット */
.border {
border: none;
}ボーダーのリセットはnone;です。
パディングの幅を含める
.wrap {
padding: 2em 2em;
width: 1300px;
box-sizing: border-box;
}マウスオーバーをふわっと
input[type='submit'] {
transition: all 0.3s ease-in-out;
}これはマウスオーバーする要素に指定します。
リンクの操作
.breadcrumb .breadcrumb-item:last-child a {
color: #999999;
pointer-events:none;
}
.breadcrumb .breadcrumb-item:last-child a {
color: #222;
pointer-events:auto;
}リンクは反応させたくない場合があります。その場合pointer-events:none;を指定します。
文字を詰める
h1 {
letter-spacing: -0.1em;
}文字を消す
.hide-news-author .byline-news {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}clipを使った例です。
文字を小さくする
.small-text {
font-size:10px;
-webkit-transform: scale(.8);
transform: scale(.8);
}背景の大きさ
/* 背景大きさ指定 */
#gNavi #gNavi-area .main-menu > a {
background: url("../images/head-sen.svg") right center no-repeat;
background-size: 1px 27px;
}背景画像にグラデーション
.notice-area-wrap + .recommended.rcs-center-label-title .card-content {
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0), #fff 100%);
}オーバーフローに3点リーダーをいれる
/* パンくずリスト関連 */
.breadcrumb.pbp-footer-before {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}パンくずリストを1行のみにして、省略文字に「…」を表示させます。
【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る
ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。
ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。
隣接・直下・間接
cssには+、>、 ~を使用して「隣接する要素」「直下の要素」「間接の要素」を指定します。
h3 + p {
color: red;
}h3に隣接するp要素にスタイルを指定します。
.wrap ＞ p {
color: red;
}wrap要素の直下にあるp要素にスタイルを指定します。
p.shitei ~ p {
color: red;
}shiteiクラス以降のp要素にスタイルを指定します。
疑似クラス
要素の特定の状態を指定する場合、疑似要素を使います。
よく知られているのがリンクホバー:hoverです。コロンを付けて指定します。
けっこう便利です。
:after、:before
.simpleblogcard_wrap > a:before {
content: "■";
}
.simpleblogcard_wrap > a:after {
font-family: var(--stk-font-awesome-free,"Font Awesome 5 Free");
content: "\f07c あわせて読みたい";
position: absolute;
bottom: 0px;
right: 0px;
font-size:10px;
}要素の前や後ろにコンテンツを追加します。
:is、:where
:is(header, main, footer) a {
color: red;
}
:where(header, main, footer) a {
color: red;
}header、main、footerのいづれかの中のaに対してスタイルを適用します。
:whereの特徴は詳細度が0だということです。（常に優先度が低い）
例えば、footer aに対して別のcss定義があれば、そちらが優先されます。
:is の場合は:isで指定された定義が優先されます。
:has
h1:has(+ p) {
color: red;
}直後にp要素があるh1に対してスタイルを指定します。
Firefoxでは使用出来ないので注意してください。
:empty
.description:empty {
margin-top: 0;
}descriptionクラスがが空の場合（<div class=”description”></>）にスタイルを指定します。
まとめ
以上、良く使用する「CSS」を上げてみました。
「CSS」は記憶してしまうには複雑すぎる言語です。
コーディングツールなどを使用している場合は、よけいに記憶することができません。
そんな時、このページを覚えていただけると助かると思います。
少なくとも、私はこのページを使いますし、他にもよく使うものが出てきたら、充実させる予定です。
【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る
ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。
ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。
プロモーション
」
が安心です。初心者にも簡単インストールできます！
コメントを残す