ピックアップ記事

はじめてのhtml5 CSS3

boder-rizu

はじめてのhtml5 css3

それではCSS3のベンダープレフィックスが必要となるプロパティを書いていきます。

  • writing-mode

このプロパティは横書きを縦書きにするプロパティになります。

で、指定できる値は、

  • horizontal-tb 上から下の意味です top to bottom  これは横書きの意味です
  • vertical-rl 右から左の意味です right-to-left の意味になります
  • vertical-lr   上記とは逆ですね left-to-right の意味になります

 

それではデモを作ってみましょう。

<div style=”-webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; font-family: serif; line-height: 1.7;”><h1>ほにゃらら</h1><p>ばばばばあはははたてがきできてますか?できてない!?そんな馬鹿な!!</p></div>

こんか感じで書いてみます。笑

ほにゃらら

たてがきできてますか?できてない!?そんな馬鹿な!!

できてますね?

なかなかおもしろいですね笑

まだまだありますね

text-emphasis-style プロパティです

  • text-emphasis-style: filled;
  • text-emphasis-style: open;
  • text-emphasis-style: sesame;
  • text-emphasis-style: dot;
  • text-emphasis-style: circle;
  • text-emphasis-style: double-circle;
  • text-emphasis-style: triangle;
  • text-emphasis-style: 文字指定;

これもデモ書いていきますね☆

<p style=”-webkit-text-emphasis-style: circle; -moz-emphasis-style: circle;” -ms-emphasis-style: circle;>私は実は策略家だ。</p>

私は実は策略家だ。

できてますか?

文字指定もしてみたんですが、みれなかったので、簡単のにしてみました。笑

角丸ちゃんです

これも細かく書くと、ひとつの角ごと指定できますが、

border-radius: 左上 右上 右下 左下;

という感じです。 個人的には、全部を同じ比率にする場合の値は一つにしておいて、

ここだけというときは、他のところは0の値にしておいて、それでもって、指定したいところだけするって感じがコードもきれいだしなによりややこしくない。笑

設定できる値とイメージはこちらです。

border-radius border-radius

 

それではデモってみます。

<div style=”width: 200px; height: 200px; border-radius:50px 0 50px 0; background-color: rgba(200,0,0,0.9);”>左上と右下に設定してみました</div>

 

左上と右下に設定してみました

 

できてますか?

できてますね。個別に設定するときfirefox3.6以前だとベンダープレフィックスが必要となりますので気をつけてねヽ(´▽`)/

長くなりましたのでここで一回切りたいと思います。

次回は背景について書いていきます。

かなり初歩からまとめながらいっていますので、気長にお付き合いくださいませ!!

それではご清聴ありがとうございました~~~~~!!

この記事を書いた人

中村 真徳
中村 真徳
(株)アリスプラン 代表取締社長
サービスITソリューションで関わる人を幸せに
平成5年4月1日 髙松市より香川町剛柔流空手道スポーツ少年団 発足
平成22年11月 個人事業主開業
平成24年8月  株式会社アリスプラン 代表取締役
会社理念「サービスITソリューションで関わる人を幸せに」
道徳と利潤の調和を目指し日々奮闘中
趣味…自分がしたいことをするのが趣味です

この投稿者の最近の記事

関連記事

  1. 高松市 整骨院

    利用者様といいね!!

  2. ぎっくり腰 高松市

    ぎっくり腰

  3. ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    予防の大事さ

  4. 鍼灸プレオープンチラシ

    鍼灸整骨院導入チラシ

  5. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    もうすぐ国家試験!!!

  6. ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    利用者様といいね!!その㉘

  7.  , ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    受付さん 小顔矯正3回目

  8. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    待合での姿勢

  9. 盆栽

人気記事

  1. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  2. 予防体操 チラシ
  3. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  4. 高松市 猫背

PV解析

  • 89現在の記事:
  • 99271総閲覧数:
  • 22今日の閲覧数:
  • 62昨日の閲覧数:
  • 430先週の閲覧数:
  • 1357月別閲覧数:
  • 68133総訪問者数:
  • 22今日の訪問者数:
  • 62昨日の訪問者数:
  • 428先週の訪問者数:
  • 1223月別訪問者数:
  • 58一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP