カテゴリー: HTML/CSS

(25) 文字の縁取り

上下左右にぼかし無しで影を付ければよい。

text-shadow: -1px -1px 0 #222,
              1px -1px 0 #222,
             -1px  1px 0 #222,
              1px  1px 0 #222;

文字に縁取りを加える。

ぼかし有りだとこんな感じ。

text-shadow: -1px -1px 2px #222,
              1px -1px 2px #222,
             -1px  1px 2px #222,
              1px  1px 2px #222;

文字に縁取りを加える。

太くする場合は斜め方向だけでなく、上下左右方向にも影を付ける。

text-shadow: -2px -2px 0 #222,
              2px -2px 0 #222,
             -2px  2px 0 #222,
              2px  2px 0 #222,
             -2px  0   0 #222,
              2px  0   0 #222,
              0   -2px 0 #222,
              0    2px 0 #222;

文字に縁取りを加える。

でないとこうなる。

文字に縁取りを加える。


(18) テーブルの列を縦方向に並べる

やりたいこと

大画面で横方向に伸びているテーブルを、
小画面のときには縦方向に表示したい。

これを

こうしたい。

今まではやり方がわからなくて、環境変数 $_SERVERからブラウザ種別を取得して描画の仕方を分けていた。
これからはそんな面倒くさいとことをしなくてよくなりそうだ。

実現方法

CSSだけで実現可能だ。
画面幅が小さくなった時に th と td を display:block してやればよい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
table{
  width: 100%;
  border: 1px #000 solid;
  border-collapse: collapse;
}
th,td{
  border: 1px #000 solid;
}
th{
  background-color: #ffe;
}
@media (min-width: 768px) {
  th,td{
    width: 50%;
  }
}
@media (max-width: 767px) {
  th,td{
    width: 100%;
    display: block;
  }
}
</style>
</head>
<body>
<table>
  <tr>
    <th>タイトル</th>
    <td>データ</td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>データ</td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>データ</td>
  </tr>
</table>
</body>
</html>

以下、サンプルページです。
http://hp.dogrow.net/sample/00018/


(9) 画面サイズに応じて動的にレイアウト変更

・パソコン
・タブレット
・スマホ(縦向き)
・スマホ(横向き)
などなど、WEBブラウザ表示画面のサイズにより、ホームページのレイアウトを変えたい場合がある。

そんなときは、WEBブラウザ側でHTMLソースを入力・解析するときに、画面サイズによりCSSを入れ替えさせればよい。

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />

<link href="style_base_small.css"  rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)" >

<link href="style_base_medium.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 959px)" >

<link href="style_base_large.css"  rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)" >

動作サンプルはこちら
http://hp.dogrow.net/sample/00009/

(1) 文字に影を付ける


div {
  font-family: Arial;
  font-size: 24px;
}

#test12 {
  text-shadow: gray 1px 2px;
}

#test22 {
  text-shadow: red 2px 2px;
}

<div id="test12">abcdefg hijklmnop qrstuv wxyz</div>

<div id="test22">abcdefg hijklmnop qrstuv wxyz</div>