CSSガイド EX

▼基本的なCSS、要素等について紹介しています。


【障害者の就職!】

 

コンテンツメニュー

 ◆Chapter 1

 ◆Chapter 2

 ◆Template

 ◆Tip!

 

★サイト運営者がPHPを学んだ
お勧めの書籍です!
これ一冊で基本的なPHPの仕組み、簡単なプログラムの作成、SQLiteを使ったデータベースなどかなり学べる要素が詰まっています!

↓↓↓ ↓↓↓

PHPレッスンブック―PHP5対応

新品価格
¥2,520から
(2013/2/24 04:38時点)

 

PHPが動作するサーバー

 

はじめてのHP | 無料素材 | タグ辞典 | ツールEX | PHPを学ぼう!

 

◆Chapter 2 - 1文字目に適用

要素名:first-letter{ ~ }

指定したブロック要素の1文字目に表示される部分にスタイルを適用します。
要素名に「#ID名」や「.クラス名」を指定することができます。

 

【index2_7_1.html】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>1文字目に適用 - CSSガイドEX</title>
<style type="text/css">
<!--
p{ margin:0; }
p:first-letter{
  color: #0000ff;
  font-size: 3em;
  font-weight: bold;
  float: left;
  background:#ffffff;
}

-->
</style>
</head>
<body>
<p>
最初の1文字だけ大きくしたデザインを書籍や雑誌でよく見かけますね。
このよう表現もスタイルで適用することができるのです。
ただし、古いバージョンのブラウザでは文字化けが発生することもありますので注意が必要です。
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
</body>
</html>

 

表示は、こちらのサンプルから確認できます。

 

 

 


 

忍者AdMax

 

ex-mode.net | ツールEX | 素材EX | アフィモール | 初級者向 初めてのホームページ作り | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード
気のみ気のままなブログ | PHPを学ぼう! | ホビ★コレ | 班長日記!

▲UP

Copyright (C) ex-mode.net 2017. All Rights Reserved.