ペライチテーマCSS編集プロセミナー

テーマCSS編集プロセミナーのテキストWebページです

はじめのご案内


はじめに
自己紹介
セミナーのゴール

CSSを使い
ペライチで自分好みの設定が
できるようになる

わからないところはご質問くださいね!

セミナーの目次

1.CSS編集する前に

2.CSSのキホン

休憩(10分)

3.よく使う宣言ブロックをご紹介

休憩(5分)

4.その他に覚えてほしいこと

少しずつ進めていきます!

1.CSS編集をする前に

ベーステーマのCSSファイルを使うか、使わないか
  • 自分のなりたいイメージに近いスタイルがあればベーステーマのCSS
  • 少しだけ装飾を足したい時、一から設定したい時はベーステーマは使わない

最初に決めよう!

テーマCSS編集をするときは編集画面の装飾機能は使わない
  • ページ編集画面のテーマ変更
  • テーマカラー変更

こちらの設定の方が優先されてしまいます

バックアップを取ると安心

設定に失敗したときや、誤って消してしまった時のためにバックアップがあると安心です。

コピペして戻れるような状態にしておくといいですね!

CSS編集に必要なツール

Google chrome
デベロッパーツール

CSSコードを書く時にあると便利

Visual Studio Code

コード用のテキストエディタ。VSCode(ブイエスコード)とも呼ばれてる。

CSS設定の流れ
変更したい場所のCSSをデベロッパーツールで見つける
どんなスタイルになっているか確認
内容を変更して、思う通りのスタイルにする
そのスタイル一式をペライチのテーマCSS編集へコピペする
設定が反映されているかを確認

2.CSSのキホン

基本のかたち

セレクタについて

セレクタの種類

1)divやpなどのhtmlタグで指定

指定したタグ全てに反映される

例えば、すべてのpを指定したい時に使うよ!

ワーク:以下のコードをコピーしてCSS編集画面の一番下に貼ってみてください。
div {
    color: #ff0000;
}
2)idで指定

ページの中では絶対に一つしかない
HTMLでid=で指定されている

ペライチだと各ブロックに必ずついている (例:#section-8)

ワーク1:ブロックのIDを見つけてみましょう
ワーク2:先程追加したCSSコードのセレクタをブロックのIDにしてみましょう
3)classで指定

ページの中で複数つけられている
HTMLでclass=で指定されている

共通のスタイルに設定したいときについているよ!

ワーク:ボタンのclassを見てみよう
セミナー中に後ほど追加しますと言っていたコード

.c-btn a {
	color: #ff0000;
}

他にも指定の方法がいろいろある

タグ+idやタグ+classでも指定ができる

そのidやclassがなんのタグについているのか、後から分かりやすくなる

div#section-8 {
    color: #ff0000;
}
間にスペースを入れると、子要素の指定ができる

特定のブロック内の文字を変えたい時などに使う

div#section-8 p {
    color: #ff0000;
}
間にカンマ,を入れると、両方に同じ設定を指定できる

複数のブロックを共通の設定にしたいときに使う

div#section-8, div#section-9 {
    color: #ff0000;
}
タグの横にダブルコロン:を入れるともう少し特殊な設定ができる

例:hover →マウスオーバーした時

擬似クラスと言います

div#section-8 a:hover {
    color: #ff0000;
}

プロパティと値について

プロパティで何をするか指定して、値で数値などを設定する

宣言ブロックと呼びます

3.よく使う宣言ブロック12個をご紹介

1)外側に隙間を開けたい!

margin
マージン

数値は上から時計回りで、『上、右、下、左』

margin: 10px 20px 30px 20px;

margin-top: 10px;
2)内側に隙間を開けたい!

padding
パディング

数値は上から時計回りで、『上、右、下、左』

padding: 10px 20px 30px 20px;

padding-top: 10px;
3)文字の色を変えたい!

color
カラー

カラーコードで指定しても、RGB値で設定してもいい

color: #ff0000;

color: rgb(255 0 0 / 50%);
4)枠線をつけたい!

border
ボーダー

  • solid 一本線
  • dashed 破線
  • dotted 点線

border-radius 角丸

border: 1px solid #ff0000;

border-top: 1px solid #ff0000;

border-radius: 20px;
5)幅を指定したい!

width
ウィッズ

max-width 最大幅を指定する。指定した大きさ以上にならない。

width: 400px;

max-width: 300px;
6)真ん中・右・左に寄せたい

text-align
テキストアライン

center 真ん中
left 左寄せ
right 右寄せ

text-align: center;
7)背景を設定したい!

background
バックグラウンド

background-color 背景の色
background-image 背景画像
background-repeat 背景画像のリピート
background-position 背景画像のポジション
background-size 背景画像のサイズ

background-color: #ff0000;

background-image: url(https://○○);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
応用編:複数の背景画像も設定できる

background-image: url(https://○○), url(https://○○);
background-repeat: no-repeat;
background-position: center center, left top;
background-size: 100%, 400px;
応用編:ブロックを跨いだ背景画像にしたい時

#上のブロック .c-bg-img {
    background-image: url(上の背景画像のURL);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
}

#下のブロック .c-bg-img {
    background-image: url(下の背景画像のURL);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
}
8)文字のサイズ・太さ・書体を変えたい

font
フォント

  • font-size 文字のサイズ (20px 1.5em 105%)
  • font-weight 文字の太さ (bold normal)
font-size: 1.6em;
font-weight: normal;
9)行間を開けたい!

line-height
ラインハイト

数値に単位はいらない。1.8だと文字の1.8倍に広がる

line-height: 1.8;
10)文字間を開けたい!

letter-spacing
レタースペーシング

letter-spacing: 10px;
11)文字にシャドウをつけたい

text-shadow
テキストシャドウ

text-shadow: 1px 1px 5px #fff;

重ね付もできる

text-shadow: 1px 1px 5px #fff, -1px 1px 5px #fff, 1px -1px 5px #fff, -1px -1px 5px #fff;

text-shadowジェネレーターを使うと便利

12)表示を消したい!

display
ディスプレイ

none 表示が消える
消えたものは、blockなどを指定すると表示される

display : none;

4.その他に覚えてほしいこと

パソコンとスマホで表示を変える方法

@media

@mediaを使って、ウィンドウ幅で切り替えます
(メディアクエリと言います)

768pxまでのウィンドウサイズの時に非表示になる

@media only screen and (min-width: 1px) and (max-width: 768px) {

div#section-1 {
    display : none;
}

}



480pxまでのウィンドウサイズの時に表示になる

@media only screen and (min-width: 1px) and (max-width: 480px) {

div#section-1 {
    display : block;
}

}
強制的に反映させる

!important

優先順位が低くて反映されないスタイルを強制的に反映させる

color: #ff0000 !important;
コメントを表示させる

コメントアウト
後からCSSコードを見返した時にわかりやすくなります

/* コメントになります */
div#section-1 {
    display : block;
}


/* コメントになります-------------------------- */
一番上に文字コードの指定

CSSファイルの一番上に入れる
入れないとCSSが文字化けする場合がある
※ベーステーマCSSを使っている場合は一番上に入っているから大丈夫

@charset "UTF-8";

5.さいごのご案内

アンケートのご協力をお願いします

セミナーのご視聴ありがとうございました。
今後の参考とさせていただきますので、ぜひご協力をお願い致します。

CSSの添削サービスについて

セミナー後にご自身で設定したCSSを1回限定で添削します。
ご希望の方は、以下お問い合わせフォームよりリクエストください。

SEOとデザインを極める2日間
とりはにキャンプ

一緒にブランド力を高める媒体づくりしませんか?

こちらのページはセミナー参加者さま限定ページです
シェアや発信はご遠慮ください
© Honey create All Rights Reserved.

あなたの想いをカタチにするお手伝いをします。ご相談やお問い合わせはこちらからどうぞ。またメルマガ「ハニークリエイト通信」にご登録いただくと、最新情報やデザインのヒントをお届けします。