<<前の2件  .. 3 4 5 6 7..  次の2件>>

2015年04月28日

CSS疑似要素 :before / :after

スポンサード　リンク

 CSS疑似要素 :before(::before) / :after(::after)

:before 擬似要素(CSS2) は、対象要素内の先頭に、  :after 擬似要素(CSS2) は
対象要素内の後尾に、contentプロパティで指定した内容を生成します。
コロン 二つ(::before)/(::after) の記法は、
擬似クラスと擬似要素の判別の為に、(CSS3)で導入されました。

   

①先頭に文字列 ’ようこそ’を追加、  :before 疑似要素を使用。

②:after 疑似要素 を使って、末尾に文字列 ’New!!’ を挿入.....

③テキストの後ろに画像を挿入しました。  

④ これはツールチップを :after 擬似要素を使い スタイルシートだけで実現しています。

⑤オンマウスでＵＲＬを表示します。
JavaScript スタイルシートサンプル集

このボックスに
:after 擬似要素で
線形グラデーション
background:linear-gradientを設定
背景を上から下に徐々に透過

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

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS疑似要素 :before(::before) / :after(::after)</title>
<style>
   /* サンプル ①前に追加  */
p.atrSmp1:before{   /*  :before擬似要素  */
	content: "ようこそ "; 
	font-size: 1.5em; 
	color: green;
		}
   /* ②後に追加  */
 p.atrSmp2:after{  /*  :after擬似要素  */
      content: " New!! "; /* contentプロパティ */
      font-size: 1.5em; 
      color: red;
         }

    /* ③画像を追加 */
 p.atrSmp3:after{
	content: url("http://*****/image/purin.gif") ;/* 画像 URL*/
	display:inline-block;   /* インラインブロック表示 */
	vertical-align : middle;/* 画像の左横テキスト　上下中央配置 */
		}
   /* ④ツールチップ */
 p.atrSmp4 span[data-text]{  /* カスタムデータ属性 */
      position: relative;/* 相対配置（相対位置）*/
      border-bottom:2px blue  dotted; /* 下枠線 太さ 色 線種（点線）*/
      color: #00f;
      cursor: help;  /* カーソルの形状 ヘルプ */
           }
   /* ④に, マウスホバー  ツールチップ追加 */
 p.atrSmp4 span[data-text]:hover:after{ 
	content: attr(data-text); /* 属性参照 attr(); 要素の属性の値取得 */
	position: absolute; /* 絶対配置（絶対位置) */
	left: 10px;
	top: 30px;
	width: 200px;
	border:3px solid #5a8f00;
	border-radius: 10px;
	background-color: #ffffcc;
	padding: 5px 15px;
	 color:#333;
		}
   /* ④に マウスホバー  吹き出し三角形　作成  */
p.atrSmp4 span:hover:before{ 
      content: "";
      position: absolute; 
      top: 23px;
      left:60px;
      border-top: 15px solid transparent;
      border-left: 15px solid #5a8f00;
         }
   /* ⑤href属性値 URL取得 */
 p.atrSmp5 a:hover:after{
	content:"  ( "attr(href) " )"; 
		}
   /* ⑥ボックス作成 */
 #atrSmp6{
     font-size:16px;font-weight : bold;
     color:#fff;
     background-color:blue;
     position: relative; /* 相対配置（相対位置）*/
     width: 450px; height: 110px; /* 横幅 高さ */ 
     padding:5px;
     text-align : center;
　　　　}
   /* ⑥に, 線形グラデーション設定 */
 #atrSmp6:after{ 
	content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
     background: -webkit-linear-gradient(pink,transparent);
     background: -moz-linear-gradient(pink,transparent);
     background: -o-linear-gradient(pink,transparent);
     background:linear-gradient(pink,transparent);
         }
</style>
</head>
<body>
 <p class="atrSmp1">先頭にテキストを追加、 :before 疑似要素を使用。</p>
 <p class="atrSmp2"> :after 疑似要素 のサンプル、末尾に文字列 New!! を挿入.....</p>
 <p class="atrSmp3">テキストの後ろに画像を挿入しました。　</p>
 <p class="atrSmp4">これは
   <span data-text="tooltip , 注釈 , 補足説明">ツールチップ</span>を
   <span data-text="要素の直後に内容を挿入"> :after 擬似要素</span>を使い
   <span data-text="CSS , Cascading Style Sheets">スタイルシート</span>
          だけで実現しています。</p>
 <p class="atrSmp5">オンマウスでＵＲＬを表示します。<br />
  <a href="http://javascript123.seesaa.net/">JavaScript スタイルシートサンプル集</a>
</p>
<p id="atrSmp6">このボックスに <br />
  <code>:after</code> 擬似要素で<br />
  線形グラデーション<br />
  <code>background:linear-gradient</code>を設定<br />
  背景を上から下に徐々に透過
</p>
</body>
</html>
:before擬似要素 :after擬似要素
:before及び:after擬似要素は
対象要素内の先頭 / 末尾にコンテンツを追加します。
両擬似要素とも、追加する内容は、contentプロパティで指定します。
　※contentプロパティには文字列、画像等のURIや連番などが設定可能です。
構文
element:before {     /* サンプル ①*/
          content: "ようこそ "; /*先頭に付加する内容*/
          font-size: 2em; color: green; /* プロパティ： 値; */
                      }
element:after {      /* サンプル ②*/
           content: New!! /* 末尾に付加する内容 */
            font-size: 2em; color: red; /* プロパティ： 値; */
                    }
element:after {     /* サンプル ③*/
         content: url("http:image/purin.gif") ;/* 画像 URL*/
	display:inline-block;  /* インラインブロック表示 */
	vertical-align : middle;/* 画像の左横テキスト　上下中央配置 */
		}
カスタムデータ属性 (独自データ属性)
 HTML5から全てのHTML要素に先頭が「data-」で始まる、「data-☆☆☆ = "値"」の形式で
独自の属性を設定することが可能になりました。（複数設定も可）
☆☆☆は自分で設定します。
HTML
<p id="dokuji" data-text="属性"  data-tool="補足説明" >カスタムデータ</p>
CSS
#dokuji{ font-size: 2em;color : blue;}
#dokuji:hover:after{ /* マウスホバー */
     content: attr(data-text); /* attr(); 属性参照, 要素の属性の値取得 */
     color: red; }
結果
マウスオン ⇒ カスタムデータ
タグ：疑似要素 :before CSS疑似要素 :b :after
posted by javaScript at 20:52 | 大阪 ☁ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする

2015年04月11日

sliceメソッド JavaScript

スポンサード　リンク

 文字列の指定範囲を返します。
'対象文字列'.slice(start引数,end引数)

対象の文字列から２つの引数で指定した範囲の
部分文字列を取り出し、新しい文字列を返します。

インデックス値
対象文字列 A B C D E   メ ソ ッ ド
最初から 0 1 2 3 4 5 6 7 8 9
最後から -10  -9  -8  -7  -6  -5  -4  -3  -2   -1 

 slice()メソッドは、start引数(開始位置)とend引数(終了位置)を指定し、
その範囲内の文字列を抽出します。
対象文字列の最初がインデックス値「0」になります。

 var str="ABCDE メソッド"
str.slice(0,3) --> "ABC"    （ ※ end引数の 1つ前の文字まで )
str.slice(0,5) --> "ABCDE"
str.slice(3,8) --> "DE メソ"

end引数は省略が可能で、省略すると最後まで取り出します。

str.slice(0) --> "ABCDE メソッド"
str.slice(4) --> "E メソッド"
str.slice(6) -->"メソッド"

 インデックス値には負の整数値を設定することも可能です。
この場合は対象文字列の最後から数えた位置になります。

str.slice(-10,-6) --> "ABCD"
str.slice(-8)     --> "CDE メソッド"
str.slice(3,-2)   --> "DE メソ"

 start 引数で指定した開始位置が
end引数 で指定した終了位置より後に来る場合、何も返しません。

str.slice(8,6)   --> "   "
str.slice(7,-7)  --> "   "
str.slice(-3,-5) --> "   "
slice() メソッド  お試し box 

対象文字列：

↓　半角数値を入力　↓
start 引数：  ,  end 引数：    

実行結果：  

コロリポプラン　詳細はこちら
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
イオンのオンラインショッピングサイト ～ おうちでイオン　イオンショップ ～

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>cssTextプロパティ</title>
<!--動作に不要なコードは省略していることがあります-->

<script type="text/javascript">
function sliceSmp() {
   var strVal = document.getElementById("sliceStr").value;
   var startVal = document.getElementById("sliceStart").value;
   var endVal = document.getElementById("sliceEnd").value;
   var outputID = document.getElementById("outPut");
 if (endVal == "" ) {  // end引数を省略した場合
      outputID.innerHTML = strVal.slice(startVal);
  　　　　 } 
else {
      　outputID.innerHTML = strVal.slice(startVal, endVal);
          }
      }
  </script>

 </head>
<body>
  <form>
<fieldset><legend>slice() メソッド&nbsp; お試し box</legend>
<p>対象文字列： <input type="text" value="ABCDE メソッド"
   size="20" id="sliceStr" /></p>
<p>start 引数： <input type="text" value="1" size="3" id="sliceStart" /> 
   end 引数： <input type="text" value="-3" size="3" id="sliceEnd" />
   <input type="button" value="実行" onclick="sliceSmp()" /></p>
<p>実行結果：&nbsp;&nbsp; <span id="outPut"></span> </p>
</fieldset>
 </form>
</body>
</html>
タグ：sliceメソッド
posted by javaScript at 01:42 | 大阪 ☔ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
<<前の2件  .. 3 4 5 6 7..  次の2件>>
×

この広告は90日以上新しい記事の投稿がないブログに表示されております。