ビジネス向けWEBサイトをつくる

絶対よく使う定番CSSはこれ

本ページはプロモーションが含まれています

ホームページを制作する際に、絶対知っておかなければならないのが「CSS」です。

すでに「SASS」などのメタ言語が導入され、「CSS」をあまり使わない方もいらっしゃるかと思います。

しかし、「CSS」を知っていないとどうにもなりません。

私の場合はWordPressであろうと、スクラッチであろうと「CSS」を直に書いています。

その中でも、定番の「CSS」をまとめることは、自分のためだけでなく、多くのユーザーの参考にもなるのではないかと思います。

プロモーション

複雑なflexboxはチートシートで解決

古くからのWEB制作者はJavaScriptやfloatなどを駆使して、要素ブロックを作っていました。

それは、長らくインターネットエクスプローラーの対策になっていたのです。

しかし、本当に便利な「flexbox」があるにも関わらず、そのような対策を行っていたものですから、「flexbox」の導入が遅れました。

いざ、「flexbox」を使ってみようとすると、その設定の複雑さに放り出しそうになりました。

あるとき、便利なチートシートを手に入れることができました。

今でも、そのシートを使用しています。

css flexbox チートシート

出典:WEBクリエイターボックス

以下のサイトからダウンロード出来ます。

このチートシートを見るだけで、「flexbox」の理解が格段に早まります。

これを紹介できただけで、世界のために貢献できたような気分ですが、以下からはあまり面白くないかもしれません。

私が良く使用しているCSSを列挙していきます。

「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」のPRを見る

オススメの理由は、以下のページをチェックしてください。

基本

真ん中

要素を真ん中にしたいということは本当によくあります。

.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行のみにして、省略文字に「…」を表示させます。

「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」のPRを見る

オススメの理由は、以下のページをチェックしてください。

隣接・直下・間接

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」は記憶してしまうには複雑すぎる言語です。

コーディングツールなどを使用している場合は、よけいに記憶することができません。

そんな時、このページを覚えていただけると助かると思います。

少なくとも、私はこのページを使いますし、他にもよく使うものが出てきたら、充実させる予定です。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

twenty − 19 =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※SNSは私が活動している企業アカウントにリンクしています。