2008年9月26日
とにかくブロック要素
ブロック要素ブロック要素
ブロック要素は記述された順に下に表示され、横に並ぶことはない。body要素はそのブロック要素のみを含むことが出来る決まりだが、考えてみれば理に適っている。
もしもブロック要素がインライン表示されるなら、ブロック要素に続けてインライン要素を書き並べると
ブロック要素ブロック要素あいうえお
となり、「あいうえお」をブロック要素の下に持って来るには改行するしかない。
ところが改行<br>はインライン要素であり、ブロック要素を改行するのは理に反することになる。
ではどうするか？それは「あいうえお」をブロック要素化すればいいわけだ。ブロック要素は段落表示される約束であるから下へ下へと並ぶわけ。
ブロック要素ブロック要素あいうえお
ブロック要素を横に並べるには「フロート」を使えばいいわけで
ブロック要素ブロック要素あいうえお
これを成立させるためにも、body要素内にインライン要素を直接置いてはダメと言うのは理に適ってますね。
「body要素はブロック要素のみを含むことが出来る」というのは、簡単なようで上手く出来ているなと、今さらながら感心する秋の一日。なんだかこじつけっぽい(笑)。
投稿者 Nao7 : 18時03分 HTML 175コメント(0)
»追記
ブロック要素あいうえおブロック要素
ブロック要素、インライン要素、ブロック要素と書き並べれば、当然ながら上のように表示される。これではインライン要素がブロック要素扱いされているようなもので、ブロック要素の立場が無い(^^;で、インライン要素をbody内に直接置くにはブロック化しなさいというわけだ。これまたこじつけっぽい(^^;
要するに理論的に明快な説明を考えるよりも、お約束と捉えるほうが分かりやすいってことですね。
投稿者 Nao7 : 2008年9月27日 13時09分
2008年9月13日
Operaのバグか？
Opera9.52に更新してからCSSの異常に悩まされた。IE,Firefoxでは従来通りの表示なので、Operaのバグじゃないかと思う。
要点だけ書くと
[css]
body { background : url(*1.jpg) no-repeat; }
#wrapper { background : url(*2.jpg) no-repeat; }
#sidebar,
#container { float : left; }
#footer { background : url(*3.jpg) no-repeat; }
[html]
<body>
<div id="wrapper">
<div id="container">
<div id="sidebar"> </div>
<div id="main_content"> </div>
</div>
<div id="footer"> </div>
</div>
</body>
bodyの左上に縦長の背景画像があり、コンテンツ全体を包む wrapperの左右に1pxのボーダーがある。そういった見た目です。で、アップした画像のように、その背景画像の切れるあたりから下の部分のボーダーが消えてしまうんですね。さらに sidebar内の a要素が a:hoverの時、その位置に相当する部分のボーダーも消えます。何でしょうねえ(^^;
途中の試行錯誤は面倒ですから結論だけ言うと、なんと wrapperの背景色を指定するだけです。
#wrapper { background : #fff url(*2.jpg) no-repeat; }
他の部分では背景色の指定なしでも異常はありません。背景色は白がデフォルトのはずですから、指定しないと拙いというのもおかしいですよね。こりゃ、バグとしか思えないなあ(^^;いつもはIE対策に悩むのにOperaで悩むとはねぇ。最新版になっておかしくなるとはねぇ。
こら、歌って誤魔化そうたってそうはいかんぞ！(笑)
投稿者 Nao7 : 15時40分 HTML 173コメント(0)
2008年3月22日
Amayaのつづき
Amayaについてもう少し書いておきましょう。日本語には非対応と書きましたが実際のところは表示されますね。ただし"Shift_jis"は化けます。"EUC-JP"か"UTF-8"ならば大丈夫です。大丈夫と言っても、フォントの指定は無理ですが(^^;
Amayaを起動して新規のまっさらな画面で文字を書き込み、画像を挿入してみました。画像を見ると分かるように、見た目をそのまま指定しながら書いていきます。慣れるとかなり使い道がありそうです。講習などで使うと面白いかも知れませんね。
初心者にHTMLを書いてブラウザーで確認という手間を取らせずに、テキストを書いてツールから「h1」などを選択すれば即座に画面に反映します。分かりやすいのではないでしょうか。私もつい面白がって遊んでしまいました(笑)
簡単なマニュアルを用意すればいいかも知れませんね。ソースを見るとムダにpタグが挿入されたりしますが、テキストエディタで修正するのもいいですね。モダンスタイルを指定すると、デフォルトのCSSが出用意されていて、これまた教材になりそうです(笑)
で、誰を対象に使おうってんですかね？(苦笑)
投稿者 Nao7 : 16時51分 HTML 146コメント(0)
2008年3月4日
Amayaを試してみる
日本語には非対応だが、ものは試しとAmayaをインストールした。日本語の化けるのは承知の上で使うなら、かなり役立ちそうです。
画像はNAOCRAFTのトップページを読み込んだものですが、CSSの一部にミスがあるのが見つかりました(^^; A要素のブロック化を忘れていたのですが、これは単純に書き忘れです。ただ、このミスをきちんと表示したのはAmayaが始めてですね。Editor/Browserとして面白いというか貴重な存在です。
3月になって暖かくなってきました。ふとした時に春を感じるようになりましたね。2月末にCTスキャンを受けましたが、3日に結果を聞いてきました。まぁまぁです。
それでもコレステロールが高めということで薬を出されました。とりあえず40日間ほど服んで効き具合を確認することになりました。もっとも30数年同じ数値で減ることはなくても増えることも無かったのですが、下げられるものなら下げてみようと言うことですね。
今現在どうこうという所見は無かったと言うことで、今後のために我慢ですね。それにしても、説明を読むと副作用の怖い薬です(苦笑)
投稿者 Nao7 : 16時27分 HTML 144コメント(0)
2007年12月29日
CSS 基本中の基本
一年間かなりのHTMLを書きまくりました。見るのも嫌になるくらい(^^;
CSSという有難い技法のおかげで、ずいぶん楽をしました。なかでも重宝したのは floatではないでしょうか。リストをフロートさせて一直線に配置したナビゲーションバーなど、殆どの人が利用しているように思います。
今年のHTMLの締めくくりとしてまとめてみますが、面白いのはA要素ですね。もともとインライン要素でなのでフロートは不要ですが、結果的にフロートせざるを得ないパターンでしょうか。
a {
text-decoration: none;
border: solid 1px #008400;
display: block;
float: left;
width: 135px;
text-align: center;
padding: 6px 0;
margin-right: -1px;
}
とまあ、こんな感じではないでしょうか。A要素をブロック化することでフロートが必要になるわけですが、OLやULなどのリストを利用すれば、そのままフロートさせればいいですね。
ページ全体も、突き詰めれば一つの技法の応用みたいなものですから、インライン要素とブロック要素の扱いに注意すればいい。短くまとめれば、そんなところでしょう。
明日、新しいレンズが届くらしい。デジカメを購入したときのセットのレンズは軽くていいのですが開放F値が暗いの不便。そこで探したところシグマ製の安いのを発見してオーダーしたのです。「28ミリ-70ミリ、F2.8-4」で重量255グラムという製品。
全ズーム領域でF2.8というのもありましたが、重さが510グラムになります。28ミリ側でF2.8が欲しいので軽いほうに決めました。実写性能はどの程度か分かりませんが、シビアに考えたらカメラごと買い換えないとダメでしょう(笑) アナログと共用なので銀塩カメラでも使えそうです。
今日は今日で、AF50ミリF1.4用の角型フードをようやく注文しました。今まで使っていた丸型フード、長年の荒い使いかたでボロボロです。探せばあるもんですね。さて、今年の買い物はこれで終わりかな？ちょっと心配です(笑)
投稿者 Nao7 : 17時48分 HTML 134コメント(0)
2007年12月22日
テーブル表記の難解さ
昨日のこと、ゆっこさんからエルメラサイトについてメールが届いた。リンクで大きな画像を呼び出せるようになっているが、それが商品説明のリンクと思ったようです。全文読みすることを想定してましたが、リンク辿った時に商品の内容が分かれば便利なことは確か。
そこで書き直してみた。CSSを一気に変更し、タブ移動でも全文読みでも分かるようになったと思う。PC-Talkerではまずまずと思うが、VistaではHPRが無いのでちょっと分かりません。
送料の表も分かりにくいとのことで、知恵を絞って簡略にしてみた。読み上げる項目が減ったので少なくとも途中で訳が分からなくなることはないと思う。まぁ、本人にもう一度確認してもらわないと、使い勝手は分かりませんけどね(苦笑)
ついでに自分のサイトにも販売用のページを用意した。これは販売対象者限定版ですね(笑) 県外に発送したのでは商売になりません。あくまでも手渡し可能な人が相手です。ごく親しい間柄であれば地球の裏側でも送ってもいいかな。「親しい間柄」に自信のあるかたはオーダーしてください。ダメでもともと、損することは絶対にありません(笑)
DoCoMoの携帯にPCからメールした。相手には届いているようだが返信が届かない。Webで情報を漁るもあまり役立ちそうなのがない。携帯からPCへメール送信が出来ない現象はかなりあるようで、そのうち情報も出てくるかな。届かなくなったのは最近なんですよね。ちょっと困ります(^^;
さて、2007年も残りわずかです。今日は雨なども降って気温が下がり気味。底冷えがしますね。あまりの寒さにカーボンヒーターでは足りず、PCも3台電源を入れています(笑) いえ、FAXを受信しているだけです。とても暖房機とはいえません。うーん、寒い正月はいやだなあ・・。
投稿者 Nao7 : 20時29分 HTML 132コメント(2)
2007年7月24日
アクセスカウンターが急増
坂戸パソボラの画像BBSを見ると「49193」とカウントが表示されています。30000アクセスに3年以上もかかっているのに、この数字まで4ヶ月しかかかっていません。50000アクセスまでそう時間は掛からないでしょう。
原因を探ろうと、まずはアクセスログを録りました。一週間で5000アクセスほどでした。パソボラのBBSにこれだけアクセスがあるのは、やはり多いと思いませんか？
何のことはない、大半が検索ロボットでした。Yahoo!にGoogleが主ですが、百度などロボットテキストに間隔を指定しないと数秒おきにアクセスしてきます。一体なんなのでしょう？急に増えた理由はさっぱり分りません。
ただロボット以外のアクセスも増えているようで、これは大歓迎です(笑)。もっとも検索して見に来るということを考えれば納得ですが、一体何の検索に引っ掛かっているのでしょう？坂戸パソボラのメインサイトになら分るんですが。
問題のBBSですが新しくしたばかりです。画像をアップすると自動的にサムネイルが作られ、サムネイルにアップした画像がリンクされます。最初に表示されるのはサムネイルですから読み込み速度も快適です。サムネイルの一覧表示もあってこれは便利です。
とは言うものの設置までが大変で、元のScriptが吐き出す怪しげなHTMLには泣かされます(^^; ValidなHTMLに修正するのは難儀なもので、HTMLの構造と見た目の分離について相当の知識が無いと危ないです。
坂戸パソボラの画像BBSは「HTML 4.01 Strict」で書きました。「XHTML 1.0 Strict」で書いたのが私用の画像BBSです。半ば休眠状態ですが、興味のある方はご覧下さい(笑)
これを書いている間に49200アクセスを超えましたね(^^;
投稿者 Nao7 : 10時12分 HTML 115コメント(0)
