whitenote

WordPressをはじめとするStudy Noteです。

Wordpress使いはじめ

CSSで見出しを作るコツ

投稿日:




h2 {
position: relative;
background: #ffeeff;
color: #1a1a1a;
font-size: 20px;
line-height: 27px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
h2:after {
content: ”;
position: absolute;
border-top: 10px solid #1a1a1a;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
border-radius: 2px;
}

h2:before {
content: ”;
position: absolute;
border-top: 10px solid #1a1a1a;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
}

 

h2{
background: #ffeeff;
box-shadow: 0px 0px 0px 5px#ffeeff;
border: dashed 2px white;
padding: 0.2em 0.5em;
}

「before」と「after」の基本的な使い方というのは、ただ単に、指定した場所の前後に好きな文字を挿入することです。

background プロパティ 色、画像、原点と寸法、反復方法、その他の機能など、背景に関するすべてのスタイルオプションを一括で設定する方法です。
positionプロパティ ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。
colorプロパティ 文字色を指定する際に使用します。
font-size 文字の大きさ
line-height 行の高さを指定する際に使用します。
margin-bottom 下マージンを指定する際に使用します。 尚、マージンには負の値を指定することもできます。 マージンに負の値を指定することで、複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置がブラウザによって異なる。
padding-top 要素のパディング領域における上部の高さを設定します。
padding-right 要素のパディング領域における右部の高さを設定します。
padding-bottom 要素のパディング領域における下部の高さを設定します。
padding-left 要素のパディング領域における左部の高さを設定します。

出店:CSS: marginの正しい理解

カラーコード

スポンサードリンク

スポンサードリンク

-Wordpress使いはじめ

執筆者:


comment

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

CAPTCHA


関連記事

WordPressのタグ付けとカテゴリーの違いって?

Wordpressを昨年一年間使ってみて、 かなり慣れてきてはいるけど制覇はしていない。 とても使いこなしていないし、 やはり平日派遣で外勤しているから 時間がとれなかったと言い訳モードにはいっている …

ふぅ~BackWPupプラグインをインストしてよかった

記事のリライト作業をしていた、 変更の内容を確認していたときに 血の気がひいた。 記事の半分が失くなっている。 ページも若干くずれている。   何がおこったんだろう、 原因も分からず元に戻せ …

Xserverでも新規にwordpressインストしてみましたよ–☆

XSERVERでWordpressのインストって なぜか難しいと昨年まつくらいまで思いこんでいた私。 その昔、ローカルやさくらサーバーで Wordpressの勉強をするために一からインストしました。 …

WordPressでコーポレートサイトを作るコツ

    初心者が、WordPressでコーポレートサイトを作る全手順-1 “Free Responsive Retina Ready WordPress Theme” WordPr …

このサイトを準備するのにひととおりしたこと–☆

今回こちらのサイトを準備した手順を記録します。 お名前.comレンタルサーバにwordpressをインスト まずは管理パネルを使ってサブドメインを用意し、 そのサブドメインにwordpressをインス …

スポンサードリンク

2018年7月
« 6月   8月 »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

最近のコメント

    アーカイブ

    カテゴリー