COJIIWATA.COM

大阪市 今里 美容室【HAIR トレンザ】東京で働く美容師イワタコウジの美容情報.美容商品特化メディア

DigiPressによるコンテンツ装飾テスト - 2

約18分

商品カテゴリー

オススメ記事

【お家で簡単ホームケア】 ZEROカラーカラーケアフォームご購入は下記の下記の画像クリック。

 

 

フォントカラーを変えてみよう

spanタグなどのインライン要素に class="blue"などのクラスを指定すると、タグで括られたテキストのフォントカラーを変更できます。

表示サンプル

このテキストはグレーで表示しています。
このテキストはブルーで表示しています。
このテキストはライトブルーで表示しています。
このテキストはグリーンで表示しています。
このテキストはイエローで表示しています。
このテキストはオレンジで表示しています。
このテキストはレッドで表示しています。
このテキストはピンクで表示しています。

このサンプルのコード

<span class="gray">このテキストはグレー</span>で表示しています。
<span class="blue">このテキストはブルー</span>で表示しています。
<span class="lightblue">このテキストはライトブルー</span>で表示しています。
<span class="green">このテキストはグリーン</span>で表示しています。
<span class="yellow">このテキストはイエロー</span>で表示しています。
<span class="orange">このテキストはオレンジ</span>で表示しています。
<span class="red">このテキストはレッド</span>で表示しています。
<span class="pink">このテキストはピンク</span>で表示しています。

文字にハイライトをつけてみよう

spanタグなどのインライン要素に class="mk-blue"などのクラスを指定すると、タグで括られたテキストをハイライト表示します。

表示サンプル

この部分はブラックでハイライト表示しています。
この部分はグレーでハイライト表示しています。
この部分はブルーでハイライト表示しています。
この部分はライトブルーでハイライト表示しています。
この部分はグリーンでハイライト表示しています。
この部分はイエローでハイライト表示しています。
この部分はオレンジでハイライト表示しています。
この部分はレッドでハイライト表示しています。
この部分はピンクでハイライト表示しています。

このサンプルのコード

<span class="mk-black">この部分はブラック</span>でハイライト表示しています。
<span class="mk-gray">この部分はグレー</span>でハイライト表示しています。
<span class="mk-blue">この部分はブルー</span>でハイライト表示しています。
<span class="mk-lightblue">この部分はライトブルー</span>でハイライト表示しています。
<span class="mk-green">この部分はグリーン</span>でハイライト表示しています。
<span class="mk-yellow">この部分はイエロー</span>でハイライト表示しています。
<span class="mk-orange">この部分はオレンジ</span>でハイライト表示しています。
<span class="mk-red">この部分はレッド</span>でハイライト表示しています。
<span class="mk-pink">この部分はピンク</span>でハイライト表示しています。

文字に下線をひいてみよう

spanタグなどのインライン要素に class="bd-blue"などのクラスを指定すると、タグで括られたテキストに指定したカラーの下線を引くことができます。

表示サンプル

このテキストはグレーの下線で表示してこの部分は太い下線で表示しています。
このテキストはブルーの下線で表示してこの部分は太い下線で表示しています。
このテキストはライトブルーの下線で表示してこの部分は太い下線で表示しています。
このテキストはグリーンの下線で表示してこの部分は太い下線で表示しています。
このテキストはイエローの下線で表示してこの部分は太い下線で表示しています。
このテキストはオレンジの下線で表示してこの部分は太い下線で表示しています。
このテキストはレッドの下線で表示してこの部分は太い下線で表示しています。
このテキストはピンクの下線で表示してこの部分は太い下線で表示しています。

このサンプルのコード

<span class="bd-gray">このテキストはグレーの下線</span>で表示して<span class="bd-gray-b">この部分は太い下線</span>で表示しています。
<span class="bd-blue">このテキストはブルーの下線</span>で表示して<span class="bd-blue-b">この部分は太い下線</span>で表示しています。
<span class="bd-lightblue">このテキストはライトブルーの下線</span>で表示して<span class="bd-lightblue-b">この部分は太い下線</span>で表示しています。
<span class="bd-green">このテキストはグリーンの下線</span>で表示して<span class="bd-green-b">この部分は太い下線</span>で表示しています。
<span class="bd-yellow">このテキストはイエローの下線</span>で表示して<span class="bd-yellow-b">この部分は太い下線</span>で表示しています。
<span class="bd-orange">このテキストはオレンジの下線</span>で表示して<span class="bd-orange-b">この部分は太い下線</span>で表示しています。
<span class="bd-red">このテキストはレッドの下線</span>で表示して<span class="bd-red-b">この部分は太い下線</span>で表示しています。
<span class="bd-pink">このテキストはピンクの下線</span>で表示して<span class="bd-pink-b">この部分は太い下線</span>で表示しています。

背景色をつけてみよう

divやpタグなどのブロック要素に class="bg-blue"などのクラスを指定すると、指定した領域を様々な背景カラーで装飾できます。

表示サンプル

背景カラーbg-blackを指定して14ピクセルの余白を設けたよ。
背景カラーbg-grayを指定して14ピクセルの余白を設けたよ。
背景カラーbg-greenを指定して14ピクセルの余白を設けたよ。
背景カラーbg-yellowを指定して14ピクセルの余白を設けたよ。
背景カラーbg-orangeを指定して14ピクセルの余白を設けたよ。
背景カラーbg-pinkを指定して14ピクセルの余白を設けたよ。
背景カラーbg-redを指定して14ピクセルの余白を設けたよ。
背景カラーbg-blueを指定して14ピクセルの余白を設けたよ。
背景カラーbg-lightblueを指定して14ピクセルの余白を設けたよ。

このサンプルのコード

<div class="bg-black pd14px">背景カラー<code>bg-black</code>を指定して14ピクセルの余白を設けたよ。</div>
<div class="bg-gray pd14px">背景カラー<code>bg-gray</code>を指定して14ピクセルの余白を設けたよ。</div>
<div class="bg-green pd14px">背景カラー<code>bg-green</code>を指定して14ピクセルの余白を設けたよ。</div>
<div class="bg-yellow pd14px">背景カラー<code>bg-yellow</code>を指定して14ピクセルの余白を設けたよ。</div>
<div class="bg-orange pd14px">背景カラー<code>bg-orange</code>を指定して14ピクセルの余白を設けたよ。</div>
<div class="bg-pink pd14px">背景カラー<code>bg-pink</code>を指定して14ピクセルの余白を設けたよ。</div>
<div class="bg-red pd14px">背景カラー<code>bg-red</code>を指定して14ピクセルの余白を設けたよ。</div>
<div class="bg-blue pd14px">背景カラー<code>bg-blue</code>を指定して14ピクセルの余白を設けたよ。</div>
<div class="bg-lightblue pd14px">背景カラー<code>bg-lightblue</code>を指定して14ピクセルの余白を設けたよ。</div>

ボックスを表示してみよう

divやpなどのブロック要素のタグに、class="box"などのクラスを指定するだけで、文章中にちょっとしたメッセージ用などに使えるボックスを表示できます。

表示サンプル

これは最もシンプルなボックスです。boxというクラス属性値を指定しています。
これは色付きのボックスです。box-kblueというクラス属性値を指定しています。
これは色付きのボックスです。box-pinkというクラス属性値を指定しています。
これは色付きのボックスです。box-redというクラス属性値を指定しています。
これは色付きのボックスです。box-orangeというクラス属性値を指定しています。
これは色付きのボックスです。box-yellowというクラス属性値を指定しています。
これは色付きのボックスです。box-greenというクラス属性値を指定しています。

このサンプルのコード

<div class="box">これは最もシンプルなボックスです。<code>box</code>というクラス属性値を指定しています。</div>
<div class="box-blue">これは色付きのボックスです。<code>box-kblue</code>というクラス属性値を指定しています。</div>
<div class="box-pink">これは色付きのボックスです。<code>box-pink</code>というクラス属性値を指定しています。</div>
<div class="box-red">これは色付きのボックスです。<code>box-red</code>というクラス属性値を指定しています。</div>
<div class="box-orange">これは色付きのボックスです。<code>box-orange</code>というクラス属性値を指定しています。</div>
<div class="box-yellow">これは色付きのボックスです。<code>box-yellow</code>というクラス属性値を指定しています。</div>
<div class="box-green">これは色付きのボックスです。<code>box-green</code>というクラス属性値を指定しています。</div>

About The Author

イワタ コウジ
【Hairトレンザ】今里店 
【EMANON】 銀座・梅田茶屋町で勤務。
 ITが得意な美容師
マンツーマンでお客様にわかりやすい説明、毎日のセットが楽になる
スタイルを提案している。
オンラインサロン 「Routine」の運営
オンラインサロン「bex-lab」
の顧問をしている。
他メディアTHROW jounal ライターとしてカラー記事も執筆中
ご予約はLINE等でお願いします
Follow :

Leave A Reply

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Routine〜SNSプロモーション特化型美容師オンラインサロン〜


関西で発信力に長けた美容師による会員制オンラインサロンです。 地域に関わらず「個人発信力」を主に学べます。 スタイリストやアシスタントはもちろんのこと、美容師のみならず多くの業種にとって為になると思います。 沢山のオンラインサロンがあるなか、そこで学んだことをいかに発信に繋げれるか、 は今後とても重要なスキルだと思います。 そういったノウハウを一から学べる唯一無二のオンラインサロンです。

唯一無二の至高の美髪育成シャンプーFlowers ご購入のお客様はこちらFlowers オフィシャルストア

Lily公式ストア

シャンプー


成分の70%が水とホホバオイルで出来ているシャンプー。 ホホバオイルがメインで高配合されているため、頭皮や髪を保湿しながらも適度に油汚れを浮かせるため、非常に低刺激でありながらも、シャンプー本来の適度な洗浄力の両立を実現した画期的なシャンプー。

トリートメント


成分の90%が水とナチュラルオイルで出来ているトリートメント。 成分のほとんどが水とナチュラルオイルであり、なおかつ配合されているその他の成分も非常に刺激性が低いので、お肌が敏感な方でも安心してお使い頂けます。 非常にサラサラとした軽い仕上がりながら、美しい艶と適度なしっとり感が特徴です。

フラワーズオイル


Flowersシャンプー&トリートメントのために特別に専用設計された、ホホバオイルと特殊なスクワランで出来ている洗い流さないトリートメント。
髪の毛を乾かす前や乾かした後など、お使い頂くタイミングで自由に質感を調整して頂く事が可能です。 サラサラの軽い質感からしっとりとまとまりのある髪まで、あなたの思い描く質感を自由に叶えてくれるはずです。
06-6977-0832
X
0
    0
    Your Cart
    Your cart is emptyReturn to Shop