ピックアップ記事

はじめての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. ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    小顔矯正

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

    灸頭鍼

  9. 今までの晩御飯(゚∀゚)③

人気記事

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

PV解析

  • 91現在の記事:
  • 110189総閲覧数:
  • 8今日の閲覧数:
  • 107昨日の閲覧数:
  • 593先週の閲覧数:
  • 1531月別閲覧数:
  • 77135総訪問者数:
  • 8今日の訪問者数:
  • 59昨日の訪問者数:
  • 476先週の訪問者数:
  • 1361月別訪問者数:
  • 67一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP