トップ 最新 追記

Masa's blog

検索キーワード:

2010年02月06日 スタイルシート(CSS)儂(わし)的解釈によるメモ [長年日記]

_ スタイルシート(CSS)儂(わし)的解釈によるメモ

例によって自分勝手な解釈、用語でメモメモっと...

サンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<title>CSS sample</title>

<style TYPE="text/css">
<!--

ヘッダー部で定義する場合は<style>タグと<!--で開始。

/*
 * コメントも書けるよ
 */
H3, H4 {
    color: red;
    background: yellow
}

タグ(<h3><h4>)に対するスタイルの指定。

P.green {
    color: green;
}

タグ(<p>)に指定するクラス(class="green")に対するスタイルの指定。

ちなみに、タグ中に指定するクラスは class="hoge foo bar" のように複数指定が可能(2011.12.15 追記)。

また、

P.green span{
    color: green;
}

とした場合は、「class="green"を指定した<p>タグの内部の<span>タグ」に対するスタイル指定となる(2011.12.15 追記)。

*.red {
    color: red;
}

クラス(class="red")に対するスタイルの指定。

#blue {
    color: blue;
}

ID(id="blue")に対するスタイルの指定。

/* hover : マウスが乗った時
 * link : リンク
 * visited : クリック済のリンク
 * active : クリックされた時
 * focus : TABキーで選択された時
 */
:hover {
    color: blue;
}

疑似クラス(hover)に対するスタイルの指定(2011.12.15 追記)。

*.iro_shitei {
    color: red;
}

文字色の指定。

*.back_iro_shitei {
    background: #FF0000; /* #RRGGBB */
}

文字の背景色の指定。

*.soto_yohaku {
    /* margin: 3em; 下記の4つをまとめて指定する場合 */
    margin-top: 3em; /* 3文字の余白 */
    margin-bottom: 3em; /* 3文字の余白 */
    margin-right: 3em; /* 3文字の余白 */
    margin-left: 3em; /* 3文字の余白 */
    border: 1px solid gray;
}

マージンの指定。指定したタグの外側の余白幅。

*.uchi_yohaku {
    /* padding: 3em; 下記の4つをまとめて指定する場合 */
    padding-top: 3em; /* 3文字の余白 */
    padding-bottom: 3em; /* 3文字の余白 */
    padding-right: 3em; /* 3文字の余白 */
    padding-left: 3em; /* 3文字の余白 */
    border: 1px solid gray;
}

パディングの指定。指定したタグの内側の余白幅。

*.waku {
    /* border: 1px solid gray; 下記の4つをまとめて指定する場合 */
    border-top: 1px none red;
    border-bottom: 3px dotted green;
    border-right: 5px dashed blue;
    border-left: 7px double black;
}

枠線の指定。

*.hide {
    /* block, inline, list-item, none */
    display: none;
}

表示方法の指定

  • block : ブロック要素として表示
  • inline : インライン要素として表示
  • list-item : リストの要素として表示
  • none : 表示しない(領域も無くなる)
*.basyo_static {
    position: static; /* 既定の場所 */
    border: 1px solid gray;
}

表示位置の指定。デフォルトの位置。

*.basyo_abs {
    position: absolute; top: 2em; left: 4em;
    border: 1px solid gray;
}

指定したタグの親要素の左上を原点とする表示位置の指定。

*.basyo_rel {
    position: relative; top: 2em; left: 4em;
    border: 1px solid gray;
}

デフォルトの表示位置を原点とする位置指定。

*.basyo_fix {
    position: fixed; top: 2em; left: 4em;
    border: 1px solid gray;
    opacity: 0.5;                   /* for Firefox */
    filter: alpha(opacity=50);      /* for Internet Explorer */
    color: black;
    background-color: pink;
}

ブラウザの左上を原点とする表示位置の指定。スクロールの影響を受けない。IE6以前ダメ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">

上記のように、htmlファイルの先頭で <!DOCTYPE ...> 宣言していれば、IE7以降ではOK。

あと、ついでに opacity, filter を使って透明度を指定(背景が透けて見える)。

*.gazou_basyo {
    float: right; /* left, right, none */
    width: 120px;
    height: 90px;
}

右または左に回り込む位置指定。

*.invis {
    /* visible, hidden, inherit */
    visibility: hidden;
}

表示、非表示の指定。表示領域は保持される。

*.indent {
    text-indent: 1em;
    border: 1px solid gray;
}

字下げの指定。

*.text_basyo {
    text-align: center; /* left, right, center, inherit */
    border: 1px solid gray;
}

センタリング等の指定。

*.text_kazari {
    text-decoration: line-through; /* none, underline, overline, line-through, blink, inherit */
    border: 1px solid gray;
}

文字列飾りの指定。

*.table_cell {
    empty-cells: show; /* show, hide, inherit */
}

テーブルの空セルに対する枠表示の指定。

*.ime_on {
    ime-mode: active; /* auto, active, inactive, disabled */
}

かな漢字変換の指定

-->
</style>

-->, </style>で閉じる。

<link rel="stylesheet" type="text/css" href="csssample.css">

外部ファイル(csssample.css)にスタイルシートをまとめる事もできる。

</head>
<body>
<h1>CSS sample</h1>
<hr />
<h2>指定の仕方(その1)</h2>
タグに「style=」パラメータを指定して行う。
<blockquote>
一部だけ<span style="color:red;">赤文字</span>にしてみる。
</blockquote>

タグに直接スタイルを指定することもできる。

<hr />
<h2>指定の仕方(その2)</h2>
ヘッダー部分でタグのスタイルをまとめて指定する。
<blockquote>
一部だけ<h3>色を変えて</h3>みる。
</blockquote>

<hr />
<h2>指定の仕方(その3)</h2>
ヘッダー部分でタグに対応するクラスのスタイルをまとめて指定する。
<blockquote>
<p class="green">
段落全体の色を変えてみる。
</p>
</blockquote>

<hr />
<h2>指定の仕方(その4)</h2>
ヘッダー部分でクラスのスタイルをまとめて指定する。
<blockquote>
一部だけ<span class="red">色を変えて</span>みる。
</blockquote>

<hr />
<h2>指定の仕方(その5)</h2>
ヘッダー部分でIDのスタイルをまとめて指定する。
<blockquote>
一部だけ<span id="blue">色を変えて</span>みる。
</blockquote>

<hr />
<h2>指定の仕方(その6)</h2>
外部ファイルでスタイルをまとめて指定する。
<blockquote>
一部だけ<span class="blue_yellow">色を変えて</span>みる。
</blockquote>

<hr />
<h2>色の指定 color: (既出ですが)</h2>
<blockquote>
一部だけ<span class="iro_shitei">色を変えて</span>みる。
</blockquote>

<hr />
<h2>背景色の指定 background: (既出ですが)</h2>
<blockquote>
一部だけ<span class="back_iro_shitei">色を変えて</span>みる。
</blockquote>

<hr />
<h2>マージンの指定 margin(-top,-bottom,-right,-left):</h2>
<blockquote class="soto_yohaku">
マージンは外側の余白。
</blockquote>

<hr />
<h2>パディングの指定 padding(-top,-bottom,-right,-left):</h2>
<blockquote class="uchi_yohaku">
パディングは内側の余白。
</blockquote>

<hr />
<h2>枠の指定 border(-top,-bottom,-right,-left):</h2>
<blockquote class="waku">
ワクワクする枠...。
</blockquote>

<hr />
<h2>表示の仕方を指定 display:</h2>
<blockquote>
括弧の中は(<span class="hide">見えたら</span>)ダメ。
</blockquote>

<hr />
<h2>場所の指定 position: (static)</h2>
<blockquote>
場所の指定 <span class="basyo_static">static(既定の場所)</span>
</blockquote>

<hr />
<h2>場所の指定 position: (absolute)</h2>
<blockquote>
場所の指定 <span class="basyo_abs">absolute(親要素の左上を原点とする)</span>
</blockquote>

<hr />
<h2>場所の指定 position: (relative)</h2>
<blockquote>
場所の指定 <span class="basyo_rel">relative(規定の場所からの相対位置)</span>
</blockquote>

<hr />
<h2>場所の指定 position: (fixed IEダメ)</h2>
<blockquote>
場所の指定 <span class="basyo_fix">fixed(スクロールせずに絶対位置に固定。IEではダメ)</span>
</blockquote>

<hr />
<h2>レイアウト指定 float:</h2>
<img src="http://myh.no-ip.org/~m-ito/lib100/lib100_1.jpg" class="gazou_basyo" />
画像の説明がいろいろと入るわけですが、面倒なので適当な文章を入力してます。
<br style="clear: both;">
ここ以降は回り込みが解除されているはず。

<hr />
<h2>表示の仕方を指定 visibility:</h2>
<blockquote>
括弧の中は(<span class="invis">見えたら</span>)ダメ。
</blockquote>

<hr />
<h2>字下げ text-indent:</h2>
<blockquote class="indent">
字下げで表示。
</blockquote>

<hr />
<h2>文字の表示位置 text-align:</h2>
<blockquote class="text_basyo">
センタリングしてみました。
</blockquote>

<hr />
<h2>文字の飾り text-decoration:</h2>
<blockquote>
<span class="text_kazari">打ち消し線。</span>
</blockquote>

<hr />
<h2>テーブルの枠を常に表示 empty-cells: (IEダメ?)</h2>
<table border="1" class="table_cell">
<tr><th>header1</th><th></th><th>header3</th></tr>
<tr><td></td><td>data12</td><td></td></tr>
<tr><td>data21</td><td></td><td>data23</td></tr>
</table>

<hr />
<h2>日本語変換 ime-mode: (IE限定)</h2>
<blockquote>
<input type="text" class="ime_on" />
</blockquote>
</body>
</html>
[ツッコミを入れる]

2010年02月14日 myh.no-ip.org(lib100)色々バージョンアップ [長年日記]

_ myh.no-ip.org(lib100)色々バージョンアップ

ただし、bind-9.6.1-P3.tar.gzは1日に1度くらい/var/named/coreを作ってsegmentation fault(core dump)するので、さらに

へバージョンアップ。

[ツッコミを入れる]

2010年02月16日 bind-9.6.2rc1.tar.gz segmentation fault [長年日記]

_ bind-9.6.2rc1.tar.gz segmentation fault

bind-9.6.2rc1.tar.gzも1日ぐらいで /var/named/coreを吐いてしまっていたのだが、サーバ自体をリブートしたら落ち着いた。

ldconfigをする必要があっただけなのかも。

[ツッコミを入れる]

2010年02月28日 zaurus SL-C760 angstrom [長年日記]

_ zaurus SL-C760 angstrom

ひょんなことで職場の大先輩からzaurus SL-C760を譲り受けることになった。SL-6000Dは毎日持ち歩いて実務に利用していて無茶が出来なかったので、これ幸いとイジリ倒してみようと思う。

とりあえず、以前から興味の会ったAngstromを突っ込んでみる。

NAND Backup

但し、その前に内蔵フラッシュメモリーの内容をバックアップする必要がある。そうでないと、いざという時にSharpの標準環境に戻せない。

  • バックアップ用の媒体としてFATフォーマットしたSD(CF)をスロットにセットする。
  • ACアダプタを外す。
  • バッテリーを外す。
  • [D] + [M] + ACアダプタ接続。
  • サービスメニューが表示される。
  • 3ページ目（SERVICE 3/3）の[1. NAND Flash Back Up]を実行。
  • [Execute Backup?]に対して、[OK]ボタン。
  • [Backup ... OK]と表示されたら完了。

Angstromのインストール

  • Angstrom-x11-image-glibc-ipk-2007.12-r13-c7x0-installkit.tgzを取得する。
  • tar xvzf Angstrom-x11-image-glibc-ipk-2007.12-r13-c7x0-installkit.tgz
  • 展開された updater.sh zImage.bin initrd.binをFATフォーマットされたSDのルートに放り込む。
  • 上記のSDをスロットにセットする。
  • ACアダプタで給電していることを確認する。
  • 本体裏側の電池交換スイッチを「解除（交換時）」側に切り替え、5秒待ってから、「Fn」キーと「HOME」キーを同時に押しながら電池交換スイッチを「ロック（使用時）」に切り替える。 　　
  • 充電ランプ（オレンジ色）が点灯していることを確認して、「OK」キーを押しながら、「電源」キーを押す。
  • メンテナンスメニューが表示されるので、「4.アップデート」を選択する。
  • 用意したメモリカード（「2.CF」または「3.SD」）を選択し、「はい(Y)」を選択する(USBはサポート外)。
  • アップデート(=Angstromのインストール)が完了すると、自動的に再起動され、Angstromが起動する。

初回起動時はrootのパスワードやらなんやら聞かれるので、粛々と答えて行くとmatchboxな環境で立ち上がる。

インストールそのものは呆気無いほど簡単に完了する。

keymapの調整

SL-6000の時と同様にzaurusはキーボードのデザインが特殊なので調整が必要になる。なんせこちらはSlackwareの流儀しか知らぬ年寄りなので、あれこれ探索するはめになったのだが、結局のところ/etc/keymap-2.6.mapがloadkeysで読み込んで設定するファイルになっており、この中で、

  • [Ctrl]は[カナひら]
  • [Alt]は[全/半]
  • [Esc]は[Cancel]

に割り当てられていることが判明。ただし、[`(grave)]だけが、どのキーにも割り当てられてなかった(ように思える...)ので、

keycode 28 = Return

を

keycode 28 = Return grave

に修正し、[Shift] + [Return]で入力できるように設定した。このように、コンソールレベル(?)でのキーマップを調整したのでxmodmapをいじくる必要は無かった。

ちなみに、コンソールレベル(?)でのキーコードの確認はshowkeyコマンドで出来る。また、上記の方法でインストールしたAngstrom環境にはxevコマンドは入っていなかった。

ここまでの作業で、とりあえずストレス無くテキストファイルを編集できる状態にはなった。

さて、本来ならばこの後は日本語化するなり、先達の成果を取り込むなりで環境を充実させていくのだが、実はARMedslackなるプロジェクトが存在し、さらにはこれをSL-6000にポーティングしようとするプロジェクトも有ることを見付けてしまった。

両方のプロジェクトを調べて分ったのは、

  • ARMedslackの方では(私の知らない)特定のARMハードウエア環境(またはQEMU環境)にインストールできるバイナリ(Slackware-12.2, current)が用意されている。
  • Angstromプロジェクトの成果物であるkexecbootを利用するとSDや、CFにインストールしたカーネルから起動することが出来る。
  • ARMedslackで用意されているバイナリをユーザランドとし、そこにAngstromで用意されているカーネルを放り込んだ形でSDなりCFなりに展開し、内蔵フラッシュにインストールしたkexecbootから起動をかける...

みたいな感じで、zaurus上でSlackware環境を実現できそうな雰囲気が有るので、ちょっとAngstrom環境そのものをイジクルのはやめて、Slackware on SL-C760の可能性を自分なりに追求してみたいと思う。

xev in ARMedslack on Angstrom

まず小手調べにARMedslackで公開されているcurrentのxevをAngstrom環境に展開してみたら、実行することが出来た。

これは結構いけるかも...。

[ツッコミを入れる]
前 2010年
2月		 次
日 月 火 水 木 金 土
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28

最近の日記

最近のツッコミ

最近のTrackBack

Generated by tDiary version 5.0.2
Powered by Ruby version 2.2.10-p489