‘CSS’ Category
注意書きが二行などになる場合、二行目からは1字下げて見た目を整えたい時がありますよね。
そんな時に使えるCSSです。注意書きだけじゃなく、箇条書きなどにも便利！
結構使えるテクニックだと思います。
HTML
<div class="att">※注意書きが二行などになる場合、二行目からは1字下げて見た目を整えたい時がありますよね。そんな時に使えるCSSです。注意書きだけじゃなく、箇条書きなどにも便利！</div>
CSS
.att {
padding-left: 1em;
text-indent: -1em;
}
↑WEBデザインブログランキングです
良かったら応援お願いします♪
CSS Optimizer (CSS最適化ツール)
※CSSファイルを圧縮、並び替えなどを行うためのツールです。CSS 入力にCSSコードもしくはCSSのURLを記入の上、必要に応じてオプションを選択して、『CSS最適化』ボタンをクリックしてください。画面下に最適化されたCSSコードをが表示されます。
自分で書いたＣＳＳをこちらで圧縮してみると34％という数字が出ました（^^;
数字で表れると、何だか嬉しいですね。
使い方は簡単。
CSSコードを入力して、「CSS最適化」ボタンを押すだけ。
「Message」の部分にどこを変えたかというのも出てくるので、そこで自分の書いたCSSの間違いなども勉強できます。
何より、日本語サイトっていう所も魅力！
↑WEBデザインブログランキングです
良かったら応援お願いします♪
料金表や、会社概要など、テーブルレイアウトをする事があります。
そこで、ストック用にCSSでレイアウトするテーブルを作りました。
とりあえずカスタマイズしやすいように、シンプルな感じです。
ご自由にカスタムしてお使い下さい♪
HTMLソース
<table class="table-a"> <tbody> <tr> <th></th> <th>内容</th> <th>内容</th> <th>内容</th> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> </tbody> </table>
CSS
.table-a {
border-collapse: collapse;
width: 400px;
border: 1px solid #CCC;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-a th {
border: 1px solid #DDD;
color: #333;
background-color: #D5FAFB;
font-weight: bold;
padding: 10px;
}
.table-a td {
border: 1px solid #DDD;
padding: 10px;
color: #666;
}
HTMLソース
<table class="table-b"> <tbody> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <th>内容</th> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> </tbody> </table>
CSS
.table-b {
border-collapse: collapse;
width: 400px;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-b th {
color: #FFF;
background-color: #099;
font-weight: bold;
padding: 10px;
border-bottom: 1px solid #CCC;
}
.table-b td {
padding: 10px;
color: #666;
border-bottom: 1px solid #CCC;
}
HTMLソース
<table class="table-c"> <tbody> <tr> <th>内容</th> <th>内容</th> <th>内容</th> <th>内容</th> </tr> <tr> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> <tr> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> <td>ＴＥＸＴ</td> </tr> </tbody> </table>
CSS
.table-c {
border-collapse: collapse;
width: 400px;
font-size: 12px;
margin: 20px;
text-align: left;
}
.table-c th {
color: #333;
font-weight: bold;
padding: 10px;
border-bottom: 3px solid #0CC;
}
.table-c td {
padding: 10px;
color: #666;
border-bottom: 1px solid #CCC;
}
HTMLソース
<table class="table-d">
<tr>
<th scope="col">内容</th>
<th scope="col">内容</th>
<th scope="col">内容</th>
<th scope="col">内容</th>
</tr>
<tbody>
<tr class="color">
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr class="color">
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
<tr>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
<td>ＴＥＸＴ</td>
</tr>
</tbody>
</table>
CSS
.table-d {
font-size: 12px;
margin: 20px;
width: 400px;
text-align: left;
border-collapse: collapse;
border: 1px solid #CCC;
}
.table-d th
{
padding: 10px;
color: #333;
border-bottom: 1px solid #CCC;
}
.table-d td
{
padding: 10px;
color: #666;
}
.table-d .color
{
background-color: #D5FAFB;
}
↑WEBデザインブログランキングです
良かったら応援お願いします♪
共通のHTMLを使ってCSSだけでレイアウトするサンプル。
★3カラムレイアウト
画像をクリックでHTMLファイルが開きます。ソースはこちら
★- 3カラムCSSサンプルは以下です -
@charset “Shift_JIS”;
/* 3カラム CSS Document */
* {
margin: 0;
padding: 0;
font-size:12px;
font-family: “ヒラギノ角ゴ Pro W3″, Osaka, “ＭＳ Ｐゴシック”;
line-height: 130%;
}
body {
text-align: center;
}
h1 {
margin: 0;
padding: 0;
font-size: 16px;
color: #CC0000;
}
h2 {
margin: 0;
padding: 0;
font-size: 16px;
color: #FFFFFF;
}
h3 {
margin: 0;
padding: 0;
font-size: 16px;
color: #FFFFFF;
}
div#container {
width:800px;
margin:0 auto;
text-align:left;
}
div#content {
background-color:#99CCFF;
width: 400px;
float: left;
}
div#menu{
background-color:#66CC66;
padding: 0px;
width: 200px;
float: right;
}
div#navi{
background-color:#99CC99;
width: 200px;
float: left;
clear: none;
}
div#footer{
background-color:#33CCCC;
clear: both;
height: 20px;
}
※3カラムスタイルは、「float」プロパティでcontentとnaviブロックを左側に寄せます。
次にmenuブロックを右側に寄せ、最後にfooterに「clear: both;」を指定してfloatを解除しておきます。
↑WEBデザインブログランキングです
良かったら応援お願いします♪
↑ブログランキングに参加しています♪よかったらクリックしてくださいね
共通のHTMLを使ってCSSだけでレイアウトするサンプル。
★2カラムレイアウト
画像をクリックでHTMLファイルが開きます。ソースはこちら
★- 2カラムCSSサンプルは以下です -
@charset “Shift_JIS”;
/* 2カラム CSS Document */
* {
margin: 0;
padding: 0;
font-size:12px;
font-family: “ヒラギノ角ゴ Pro W3″, Osaka, “ＭＳ Ｐゴシック”;
line-height: 130%;
}
body {
text-align: center;
}
h1 {
margin: 0;
padding: 0;
font-size: 16px;
color: #CC0000;
}
h2 {
margin: 0;
padding: 0;
font-size: 16px;
color: #FFFFFF;
}
h3 {
margin: 0;
padding: 0;
font-size: 16px;
color: #FFFFFF;
}
div#container {
width:800px;
margin:0 auto;
text-align:left;
}
div#content {
background-color:#99CCFF;
margin: 0px;
padding: 0px;
float: left;
width: 600px;
}
div#menu{
background-color:#66CC66;
margin: 0px;
padding: 0px;
float: right;
width: 200px;
}
div#navi{
background-color:#99CC99;
clear: right;
float: right;
width: 200px;
}
div#footer{
background-color:#33CCCC;
clear: both;
height: 20px;
}
※2カラムスタイルは、「float」プロパティでcontentブロックを左側に寄せます。
次にmenuブロックを右側に寄せ、同じくnaviブロックも右側にfloatします。
この時にmenuブロックのfloatを一旦「clear:right;」で解除させてから
再度「float: right;」で指定する事で右寄せになります。
最後にfooterに「clear: both;」を指定してfloatを解除しておきます。
↑WEBデザインブログランキングです
良かったら応援お願いします♪
↑ブログランキングに参加しています♪よかったらクリックしてくださいね
共通のHTMLファイルを使って、CSSだけでレイウトするサンプルです。
★1カラムレイアウト
画像をクリックでサンプルHTMLが開きます。
- 1カラムCSS -
@charset “Shift_JIS”;
/* 1カラム CSS Document */
* {
margin: 0;
padding: 0;
font-size:12px;
font-family: “ヒラギノ角ゴ Pro W3″, Osaka, “ＭＳ Ｐゴシック”;
line-height: 130%;
}
body {
text-align: center;
}
h1 {
margin: 0;
padding: 0;
font-size: 16px;
color: #CC0000;
}
h2 {
margin: 0;
padding: 0;
font-size: 16px;
color: #FFFFFF;
}
h3 {
margin: 0;
padding: 0;
font-size: 16px;
color: #FFFFFF;
}
div#container {
width:800px;
margin:0 auto;
text-align:left;
}
div#content {
background-color:#99CCFF;
margin: 0px;
padding: 0px;
}
div#menu{
background-color:#66CC66;
margin: 0px;
padding: 0px;
}
div#navi{
background-color:#99CC99;
}
div#footer{
background-color:#33CCCC;
height: 20px;
}
※ウィンドウ幅を変えてもコンテンツがいつも中央に表示されるように
全てのコンテンツを含む「container」ブロックをセンタリングしています。
「container」ブロックを「width」で幅を指定すると友に、左右のマージンに「auto」を指定。
※「body」で 「text-align: center;」を指定し、
「container」で「text-align:left;」を指定しているのはIE6用のハックです。
↑WEBデザインブログランキングです
良かったら応援お願いします♪
↑ブログランキングに参加しています♪よかったらクリックしてくださいね
IEでプレビューしたら、ちゃんと表示されてるんだけど・・・
Firefoxの場合、親ボックスの中に「float」をかけた要素を入れると
親ボックスの高さが反映されずに、背景が表示されなくなってしまいます。
これで、悩むこと1時間あまり・・・
回避方法を見つけたのでメモしておきます。
#container {overflow:auto;}
親ボックスに「overflow:auto;」を入れるだけです。
↑ブログランキングに参加しています♪よかったらクリックしてくださいね
11/25（土）に「CSS nite in Osaka」というイベントセミナーに行ってきました。
今回、講師の方の中の一人の方がWeb標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
そもそもCSSとは・・・という話に始まり「これを押さえとかなきゃ！」的なルールの中では「自分がやっているものでは違ってたんや～・・」とか、
「おお！これはこういう意味があったのか～～！」と、改めて思いました。
まだまだCSSコーディングは完璧ではないけど、これからもっともっと勉強してすっきりしたコードが書けるようになりたいと思います！
そして、もう一人の講師、スタイルシート スタイルブック
「エコ」と「webデザイン」をどう絡めて行くのかな？と思いきや、
どんどん引き込まれて行く内容で、気づいた時には「私もエコなwebデザイナーになるぞ！」と決心させられるものでした。
そして、”情報を発信し続けることの大切さ”を改めて気づかせてもらいました。
ちゃんとCSSするためのスタイルガイド入門
↑こちらの本も来月発売なので、予約したいと思います。
150名という沢山の方が参加され、この業界の人たちとの交流が出来てとても刺激になりました！！！
いつも作業をする時間にとらわれて、なかなかこういった交流に参加できずにいた自分ですが、出て行く事も大切なんだな・・と思います！
↑ブログランキングに参加しています♪よかったらクリックしてくださいね
忘れないうちに、覚え書きにしておこう！
MK2-STYLEの更新情報を前からインラインフレームにしたかったのですが
インラインフレームははやり使いたくないので、HTMLにしていました。
今日、「CSS」でのインラインフレームというのをやってみたので
ソースを書いておきます。
「htmlファイル」
<div id="frame">ここに内容を書く＜/div>
「cssファイル」
#frame {width:380px; height:200px; border:0; margin:0px; padding:0; overflow:scroll;}
この「overflow:scroll;」というのがミソですね♪
この表示方法なら、擬似フレーム内にリンクを貼っても、ターゲット指定なしでリンク先に飛ぶもんね。
まだまだ、勉強することいっぱいだ～！
↑ブログランキングに参加しています♪よかったらクリックしてくださいね