枠の四隅の角と丸
pg*系スタイルには現在4種類ある。
- pg
以前からあるソース専用のスタイルでpreタグとともに使う。
ただし、これはパソコン用である。横幅の狭いスマホでは自動的に画面内で折り返されたり、インデントがバラバラになる。
- pg2
スマホで使えるようにソース専用のpgスタイルを改造したもの。divタグとともに使う。
四隅が「丸」になる。背景は緑色。
- pg3
スマホで使えるようにソース専用のpgスタイルを改造したもの。divタグとともに使う。
四隅が「角」になる。背景は黄色。
pg2とは角か丸かの違いだが通常はpg3を使う。
- pg4
スマホで使えるようにソース専用のpgスタイルを改造したもの。divタグとともに使う。
背景が白。枠はない。フォントは等幅(monospace)である。
16進ダンプなどではフォントは等幅でないと整然としたものにはならない。
このスタイルの使用例はここ。
pg2
四隅が「丸」いものを「角丸」と呼ぶ(pg2スタイル)。
設定例
このスタイルは次のようになっている。
<div class="pg2 tbsoto"><span class="fbg">設定例</span>
この角丸タイプの枠囲みは内容が長くなると上部の左右の「角丸」がかすれたような感じになる。下部の左右の「角丸」は正常である。
これは短いものにはいいが長くなると使えない。
また、pg2スタイルをtableで使うと上が空行になる。
【<table class="pg2">】
参考
篠崎愛はもう30になる。童顔だが昔ほどのかわいさはない。経年劣化とはいえこれだけはどうしようもない。
|
【<div class="pg2">(tdタグ内)】
参考
篠崎愛はもう30になる。童顔だが昔ほどのかわいさはない。経年劣化とはいえこれだけはどうしようもない。
|
【<td class="pg2">】
参考
篠崎愛はもう30になる。童顔だが昔ほどのかわいさはない。経年劣化とはいえこれだけはどうしようもない。
|
pg3
それで四隅が「角」のもの(これは単に「枠」と呼ぶ)を使う(pg3スタイル)。
設定例
<html lang="ja">
<head>
<meta charset="euc-jp">
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<style>
/* パソコン・スマホ共通 */
body {
color:black;
font-family:"MS ゴシック",sans-serif;
font-size:15px;
background-image:url("img/bg1.gif");
background-color:#ffffff;
line-height:1.5;
margin:3px 10px;
}
table {
color:black;
font-family:"MS 明朝",serif;
font-size:15px;
line-height:1;
}
td {padding:10px;}
table.tgr {
border-width:0;
border-spacing:1px;
color:black;
background-color:green;
font-family:"MS 明朝",serif;
font-size:15px;
line-height:1;
}
.tgr tr {background-color:#ffffff;}
.tgr td {padding:5px;}
input[type="text"] {
width:100px;
font-size:1em;
color:purple;
border:1px solid #cccccc;
}
input[type="submit"] {
font-family:"MS 明朝",serif;
font-size:0.9em;
color:red;
}
input[type="text"]:focus {background:#faf4e2;}
.pg {
color:navy;
font-family:"MS 明朝",serif;
font-size:15px;
line-height:1.5;
background-color:#fffff0;
border:1px solid #339966;
padding:5px;
}
.legs {
color:#0000ff;
letter-spacing:0.2em;
}
.bgrd {
font-size:18px;
color:#ff0000;
}
.gr {
font-family:"MS 明朝",serif;
color:green;
font-size:14px;
}
.bxc {background-color:#ccffff;}
.bxw {background-color:#ffffff;}
.bxy {background-color:#ffffcc;}
.bxg {background-color:#ccffcc;}
/* スマホだけの修正 */
@media only screen and (max-width: 768px) {
td {padding:2px;}
input[type="submit"] {font-size:0.8em;}
}
</style>
<title>文字コードの検索</title>
</head>
<body>
pg4
等幅フォントにしたもの(monospace)。外枠は付かない(border:0px)。
.pg4 {
color:navy;
font-family:monospace;
font-size:15px;
line-height:1.5;
background-color:#ffffff;
border:0px solid #ffffff;
padding:5px;
white-space:pre;
}
16進ダンプ
: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20
--- : -----------------------------------------------------------
000 : 82 B1 82 EA 82 CD 53 68 69 66 74 5F 4A 49 53 2F 43 52 4C 46
002 : 89 FC 8D 73 82 CC 83 65 83 4C 83 58 83 67 81 42 0D 0A 94 BC
004 : 8A 70 83 4A 83 5E 83 4A 83 69 82 CC CE DD C0 DE D0 CE 82 C6
006 : BC C9 BB DE B7 B1 B2 81 42 0D 0A 96 7B 93 63 94 FC 95 E4 41
008 : 42 43 31 32 33 81 42 8E C2 8D E8 88 A4 82 CD 82 A9 82 ED 82
010 : A2 82 A2 81 42 0D 0A