POPSブログ

CSSの状態を表示して確認する/2

25

  Category:  basercms2012/02/16 pops 

ブログ記事を書く自分専用のパーツ類を表示させ、CSSの状態を表示して確認する。


CSSの状態を表示して確認する


オリジナルパーツCSSを表示する

自作オリジナルパーツを表示、CSSのテストをしています。
何点かブログ用途のHTML「自作オリジナルパーツ」を用意してCSSを設定しておきます。ある程度他の記事でも使用できるようにするために、幅のみ変更すれば良いように設計します。
重くならないように工夫して、数も記事を書くための最小限度にしています。他のHTMLページで使用されることも多い。


1.定形の引用文表示用のブロックです。


これは引用を示すblockquoteブロックです
引用文

ウィキペディア(Wikipedia)


DIV要素の中に引用文表示用のblockquoteブロックを挿入


2.テキストエリアで表示してみる。



テキストエリアのため <、> は変換して挿入しています


3.pre codeで表示してみ。る



<link rel="stylesheet" href="css/pops-ibox-a.css" type="text/css" media="all" />
<!--[if IE 8]>
<link rel="stylesheet" href="css/pops-ibox-a_ie8.css" type="text/css" media="all" />
<![endif]-->
<script type="text/javascript">
$(function(){
	$(document).pops_ibox();
});
</script>

コード表示は「行番号を入れたり」「色わけしたり」と色々ありますが、結局CSSの重くならない単純なものに落ち着いてしまいます。


4.そのほかのオリジナルクラス。


list_disc クラス。

  • テキスト1
  • テキスト2
  • テキスト3

black_box クラス。

black_box クラスです


black_box2 クラス。

black_box2 クラスです


pline_block クラス。

これは pline_block クラスです


include クラス jquery を利用して記事中に html を include しています。

 


[ この記事のURL ]


タグ:CSS , basercms , HTML , series

[ CSSの状態を表示して確認する シリーズ記事 ]

CSSの状態を表示して確認する/22012.02.16
CSSの状態を表示して確認する/12012.02.15

 

ブログ記事一覧

年別アーカイブ一覧



[1]