TOP / ボックス
- 1 2 3 4 >>

2015年06月08日

border-radiusプロパティ

スポンサード　リンク

CSS3 の border-radiusプロパティはボックスの角を丸める際に利用します。
各コーナーの値の設定に依って、 さまざまな形のボックスを表現できるようになりました。 (*´ω`*)
丸めは、指定された半径の円、あるいは楕円の円周、となります。

      左上

border-radiusプロパティを使って角丸ボックスを作る。

※下記　サンプルコード：　ボーダーは指定がない場合は border:2px solid #000;です。
　　必ず書き加えてください。背景色やテキストなどは別途設定してください。

４つのコーナーを同じ半径の角丸に、 値１つ

.radius-Box {
    border-radius: 15px; /* 半径を15px に */
			/* 値の単位には px,emなど 或は %を使用 */
     }

正円形　高さ、幅を同じにして　値を ５０パーセントに

.radius-Box {
    height: 100px;
    width: 100px;
    border-radius: 50%;

    /*  値がパーセントの場合は、要素の高さ・幅 に対する割合を
       半径とした角丸になります。*/
	 }

楕円形

.radius-Box {
    height: 200px;
    width: 100px; /* 幅が高さより大きいと 横向きに */
    border-radius: 50%;
	 }

★☆★☆★☆　ナウでヤングなレンタルサーバー！ロリポップ！　☆★☆★☆★
月額１０５円〜容量最大１２０ＧＢ！大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』

四隅の丸みをそれぞれ変えて 値４つ　「左上」 「右上」 「右下」 「左下」

  .radius-Box {
     border-radius: 50px 20px 5px 10px;
	}

四隅を角丸 値３つ　「左上」 「右上・左下」「右下」

.radius-Box {
    border-radius:5px 80px 5px;
     }

四隅を角丸 値２つ　「左上・右下」 「右上・左下」

.radius-Box {
    border-radius: 50px 20px;
     }

水平方向の半径 / 垂直方向の半径を指定して　四隅すべてに適用

.radius-Box {
    border-radius: 50px / 100px;
	}

水平方向 / 垂直方向　の半径をコーナー別に、まとめて指定

.radius-Box {
   border-radius: 50px 50px 20px 20px / 10px 10px 40px 40px;
	}

数値が並んでいますが、先頭から、水平方向の半径 → 「左上」 「右上」 「右下」 「左下」
' /  '（スラッシュ）を挿んで垂直方向の半径 → 「左上」 「右上」 「右下」 「左下」になります。

コーナーを示すプロパティで　四隅の半径をコーナー別に指定

.radius-Box {
    border-top-left-radius: 15px;     /* 左上 */
    border-top-right-radius: 50px;    /* 右上 */
    border-bottom-right-radius: 50px; /* 右下 */
    border-bottom-left-radius: 0px;   /* 左下 */
	}

水平方向␣垂直方向　の半径をコーナーごとに、個別指定

.radius-Box {
  border-top-left-radius: 5px 5px;/* 水平 垂直半径 */
  border-top-right-radius: 200px 100px;
  border-bottom-right-radius:0;/*値一つ,水平 垂直半径は同値*/
  border-bottom-left-radius: 20px 80px;
	}


 ← 垂直半径:100px
　　　 ↓水平半径:200px

ボーダーの幅と角丸の半径の関係

.radius-Box {
    border:20px solid chocolate;
    border-radius: 50px 15px;
     }

設定した角丸の半径は ”ボーダーの幅も含めた値” となるので ボーダーの幅が角丸の半径より
大きい場合は、ボーダーの外側の輪郭だけが丸くなります。内側は直角のままです。

上下のボーダーを太く　左右は、なし　

javascriptスタイルシートサンプル集 

.radius-Box {
	width: 400px; padding: 8px 0; text-align: center;
	border-top: 15px solid #6464ff;
	border-bottom: 15px solid #6464ff;
	border-radius: 30px;
	  }

上,右のボーダーを太く　下,左は、なし　

.radius-Box{
    height: 100px; width: 200px;
    border-top: 10px solid red;
    border-right: 10px solid red;
    border-radius: 50%;
	}

　border や border-radius を組み合わせて 値をいろいろ変えると思わぬ形に出会います。
ご覧の方々も値をいじり倒してみてください。大発見があるかも........
下記に設定を、まとめました。

border-radius：　四隅の半径を一括して指定

適用対象
すべての要素　（ border-collapseプロパティ )の値がcollapseのテーブル要素は除く。）
プロパティの値
(角丸の半径) 長さ： px,em,など | パーセント： 要素の高さ・幅 に対する割合
値の設定 （水平方向 垂直方向の半径は同値）
* 値を4つ 「左上」「右上」「右下」「左下」に設定 ：  border-radius: 40px 30px 20px 10px ;
* 値を3つ 「左上」「右上・左下」「右下」に設定 ：  border-radius: 10px 20px 30px ;
* 値を2つ 「左上・右下」「右上・左下」に設定 ：  border-radius: 50px 20px ;
* 値を1つ ４隅を同じ 大きさの角丸に設定 ：   border-radius: 15px ;
値の設定 （水平方向 垂直方向の半径を別々に設定）
水平方向半径 / 垂直方向半径を  ' /  ' （スラッシュ）で区切って指定
値の個数の設定は上記 * と同じ ：  border-radius: 50px 20px  / 10px 40px ;

border-top-left-radius： ...etc  四隅の半径を個別に指定

プロパティ
　値の設定  値を１つ： 同じ半径  |  値を２つ： 前が水平方向の半径、後が垂直方向の半径
border-top-left-radius 「左上」 ：  border-top-left-radius: 5px;
border-top-right-radius: 「右上」 ：  border-top-right-radius: 200px 100px;
border-bottom-right-radius 「右下」
border-bottom-left-radius 「左下」
タグ：border-radius 角丸 角丸ボックス border-width border-style border-color
posted by javaScript at 19:30 | 大阪 ☔ | ボックス | このブログの読者になる | 更新情報をチェックする

2012年12月09日

ボックスが横方向に伸縮 JavaScript

スポンサード　リンク

widthプロパティ の値をjavascriptで変更
Element.style.width='値';

テント

　さて使い道は......................................
画像が入れ替わるようにすれば、スライドショーができるかも？？今度挑戦！！

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版！
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆

サンプルソース

<html>
 <head>
<title>ボックスが横方向に伸縮 JavaScript </title>
  <style type="text/css">
    #Pid {
      overflow: hidden; /* 内容がボックスからはみ出た部分は非表示 */
      background-color: #fafad2;/* 背景色 */
      width: 310px; /* ボックスの横幅 */
         }
</style>
<script type="text/javascript">
  var boxW=0; //ボックスの横幅変数
  var increaseW=0; //ボックスの横幅増減変数
  var flag = false;
function toggle(){// トグルスイッチ
flag = !flag; // trueとfalseの切り替え ! 否定演算子
 if(flag == true){ Loop();} //条件を満たした場合の処理
  else{ Stop(); } //条件を満たしていない場合の処理
    }
function Loop(){
if (boxW<=0) { increaseW=5; }
 else if (boxW>=500) { increaseW=-5; }
  boxW=boxW+increaseW;
var Pbox=document.getElementById("Pid");// Pidへの参照を変数に代入
     Pbox.style.width=boxW+"px";
      Timer=setTimeout('Loop()',30);
       }
function Stop(){
clearTimeout(Timer);
  }
</script>
</head>
<body>
 <p>
  <button type="button" onclick="toggle()">Start / Stop</button>
 </p>
   <p id="Pid">
<img src="**/image/tento.gif" alt="" width="300" height="170" />
   </p>
</body>
</html>
width プロパティ
　要素の生成するボックスの横幅を指定します。
このサンプルは、ID名が"Pid"である<p>要素のボックスの横幅を
JavaScriptで指定し伸縮を実現しています。
 var Pbox=document.getElementById("Pid");
   Pbox.style.width=boxW+"px";  // P要素に width値 を指定。
setTimeout メソッド
　タイマーID=setTimeout("func()",msec) は ミリ秒で指定した遅延時間 (msec) の経過後に
指定した処理を行います。 func には処理する関数名を記述します。
clearTimeoutメソッド
　setTimeout メソッドの処理を停止するメソッド。
clearTimeout()のパラメータにタイマーIDを指定します。
  clearTimeout(タイマーID);

ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
heteml
overflow プロパティ
setTimeoutメソッド , clearTimeoutメソッド
background 背景に関するプロパティ 一覧
paddingプロパティ ボックスの内側の余白
トグルスイッチ（０と１、trueとfalseを切り替え）条件分岐

タグ：setTimeout() メソッド clearTimeoutメソッド Element.style.width
posted by javaScript at 17:50 | 大阪 ☔ | ボックス | このブログの読者になる | 更新情報をチェックする
- 1 2 3 4 >>