06 | 2017/07 |  08

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

ある提案 より良きFAQのために

 FC2ブログ掲示版(バグ・要望BBS及びカスタマイズ掲示版)は、FC2ブログのバグ指摘や要望等、そしてカスタマイズに関する質問と回答が掲載されるべきものとして設置されたと思います。しかし、最近これらのBBSを閲覧していて、特にFC2ブログ固有の問題ではない HTML や CSS に関する一般的・基礎的・初歩的質問が増えているなあ~と感じています。掲示版ではなく「質疑・応答」板化しているわけです。

 こうした事態に対して「そんなこと、googleか何かを使って自分で調べろよ」何て、冷たく突き放すのは無体です。
 「ここは Homepage 作成スクールではない」と宣告したところで、困っている方々は途方に暮れるだけでしょう。

 何が分からないか分かれば、問題は半分以上解決したに等しいわけで、何が分からないか分からない、藁にもすがりたい、だからBBSに書き込みをする場合も多々あるでしょう。
--------------------------------------------------------
 ここで注目すべきことは、一般的、基礎的、初歩的質問は多くの人にとって「共通する質問」でもあり、従って繰り返し繰り返し同じ質問が出される可能性が高いということです。しかも、上記の2掲示版は50スレッドしか表示しないから、過去に出された質問と回答から検索するには余りに表示データが少なすぎるし、全スレッド検索機能はどうも利用されていないか、活用に気が付かない気がします。
 そこで善処策としていくつか考えてみました。
 1 表示スレッド数を増やす。
 2 そうしても過去スレを見るとは限らないので、むしろスレッド検索機能をもっと目立たせ活用を促す。
 3 初心者用のブログ利用マニュアルを志願者が自主的に協働して作成し、それへのリンクを時々掲示版に貼る。
  (これにはWiki(IT用語辞典 e-Words : Wikiとは 【ウィキ】 ─ http://e-words.jp/w/Wiki.html)が最も向
  いているだろう。)
 4 そのようなWikiをFC2が用意する。(←これは「おんぶにだっこ」と言われそう(笑))
 5 HTML/CSSの学習サイトリンク集を志願者がブログエントリイとして作成し、そのエントリイへのリンクを掲示版で
  時々公開する。
 6 有志が自分が歩んできたtemplate編集道程を自分のブログに掲載し、それへのリンクを掲示版で時々公開する。
  (これは例えば、やまちゃんのブログ が好例だと思います。)
 7 その他、この問題にもっと多くの方の知恵を出し合い、ふさわしいツールを模索する。

 

● コメント ●

widthに関する改善案 (closs)

hkomさんがしっかりと調べた結果を明示してくださったので、IEの計算方法を調べなおさずに済み、助かりました。
widthを使った場合にpadding等の計算方法が違うのであれば、そのwidthを指定した要素には、とことんpadding等の指定をしなければいいのではないでしょうか。
具体的にはwidthを指定した #LEFT の margin や padding はほぼ0にし、
#LEFT の中に入る

div.entry_title
div.entry_body
div.entry_navi
div#comment_block
p.trackback_area
div#trap
div.center(?)

の中で、余白を取りたいものにmarginを指定すればいいのではないでしょうか。

P.S. こうやって羅列してみると、このテンプレートは class と id の使い分けが意識されることなく作成されたみたいですね。

● コメント ●

色々とありがとう!感謝です!>clossさん (hkom)

 夜遅くに色々とありがとうございました。ソース分析までやって戴いて恐縮です。
 誤字まで発見してもらって忸怩たる思いです。それにしてもクロスブラウザなソースとは厄介なものですねえ...。ちょっとしんどいけど、頑張らねばと思っています。
 また気づいたことがあれば何なりと指定してください。

● コメント ●

次にCSS (closs)

おそらくはこの「IEの」バグが関係しているかと思うのですが…。

ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう
http://cssbug.at.infoseek.co.jp/detail/winie/b001.html

width(内容領域の幅)
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width

とりあえず
.entry_body {
padding: 1.7em 0.7em 2.7em 2.7em;

padding: 1.7em 1.7em/*0.7em*/ 2.7em 2.7em;
とし、
.entry_footer {
margin: 1.7em -2.7em 0 0;

margin: 1.7em 0/*-2.7em*/ 0 0;
と修正しておくと、本文が右ボックスに隠れないようになるとおもいます。

ちなみに、div id="FOOTER"が閉じられていなかったり、綴りの間違ってwifthやz-idexとなっていたり(検索で引っかかると思います)、color = #def;となっていたりしました。

少々厳しいかと思いますが、一言言わせてください。
この度じっくりと記述を拝見させて感じたのは、テーブルレイアウトでなければCSSにどう書いてもいいと受け取れたことです。width=XXXpxで幅を決めうちしているのでは、テーブルレイアウトと変わらないように思いました。横スクロールバーも出てしまいますし。
margin-right:15%; margin-left:15%; のような“画面に対する割合(パーセント)”での記述で余白を取り、その中に「流動的な」テキストやナビゲーションを「流し込む」といったような発想に切り替えられるかが、テーブルレイアウトからの真の脱却への分岐点のように思いました。

僕は1280×1024の画面を利用していて、また多少目が悪いため、Firefoxのオプションで「基本フォントサイズ」を一回り大きくし、「最小フォントサイズ」を(我慢して)10ptに設定しています。
そのため、Googleニュース日本語版(http://news.google.co.jp/)などの大抵のページは、文字が大きい分、1024×768の画面で見る場合とほとんど変わらない情報量とレイアウトで見る結果となっていますが、文字が大きいため滑らかになって読みやすくなり、非常に助かっています。
但し、それはレイアウトなどでの長さの指定がCSSでemや%になっていて、文字サイズと一緒に伸縮してくれる場合です。px指定でのレイアウトの弱さはここにあります。
幅可変のレイアウトを、リキッドレイアウトと呼ぶそうです。こちらもお読みいただき、ご一考いただきたいと思います。

リキッドデザインのメリット
http://allabout.co.jp/career/webproduce/closeup/CU20030607A/

今回はこの辺で…。何か天体が3つ並ぶんだっけ…。

● コメント ●

先にJavaScriptの件で (closs)

何となく参考になりそうなサイトを見つけました。こちらのポップアップはIE,Firefoxで動きました。
http://www6.plala.or.jp/kuri9ri/lesson/java.htm
少なくともdocument.body.clientWidthはIE依存のようです。
また、Firefoxはnavigator.appName=="Netscape"
と返しました。

● コメント ●

レイアウト崩れについては (closs)

レイアウト崩れについては自分でも多少なりアドバイスできると思いますので、協力させてください。

● コメント ●

追伸 >hisaさん (hkom)

 どの部分がIE固有仕様なのか全く不明です。手元にmozillaに関する書籍も皆無です。ネット上で調べればあるのかもしれませんが、現時点では適切なものは見つかっていません。「HTML, CSS, JavaScriptなどについても、公式の仕様にしっかりと目を通し、その仕様に沿うことが」と言われても、その公式仕様に関する知識が皆無なのです。手がかりを何か教示して戴けると幸いです。

● コメント ●

せめて道標を (closs)

JavaScriptに関しては手を出していないので、僕から改善点の指摘などはできないのですが、せめて道標を。
http://allabout.co.jp/career/javascript/
に、「クロスブラウザを制する」との連載があるようです。

Firefoxは、是非様々な拡張を導入なさってみてください。別物のブラウザに変わります。
目的別拡張選び - Firefoxまとめサイト
http://firefox.geckodev.org/index.php?%CC%DC%C5%AA%CA%CC%B3%C8%C4%A5%C1%AA%A4%D3
によると、
TabbrowserExtensions
http://firefox.geckodev.org/index.php?%CC%DC%C5%AA%CA%CC%B3%C8%C4%A5%C1%AA%A4%D3#content_1_8
は「IEコンポーネントなどのタブブラウザから乗り換えで・・という方は、特にお勧めします。」なのだそうです。

あとマウスジェスチャが可能になるAll-in-One Gestures
http://firefox.geckodev.org/index.php?%CC%DC%C5%AA%CA%CC%B3%C8%C4%A5%C1%AA%A4%D3#content_1_10
もお勧めです。

● コメント ●

なるほどFOXではlayoutが崩れますね。 (hkom)

 Sleipnirを使い込んでおり、その便利さからおいそれと抜け出せそうにありません。(スクリプトも多用しているし)
 従ってFOXは様子見、というかしばらくは放置と言うことになると思います。
 それにしてもレイアウトが崩れてしまうのは、CSSによるレイアウトがまだ不完全だと言うことになります。(反省)
 それよりもJavascriptが効かないのは利用しているスクリプトにIE独自仕様箇所があるということになりますね。ふう~。
やっと完成したのにまた見直しはシンドイ・・・。しばらくはこのままとします。
 助言ありがとうございました。完璧を志向しますが実現は、今の私の力からオイオイとならざるを得ません。

● コメント ●

blogによって敷居が下がったから尚更なのでしょうね (closs)

個人的には4.が良さそうに思います。
FC2は設置をして公式ページからそこへリンクするだけ(?)ですし、Wikiが編集できる方はカスタマイズにも慣れていらっしゃるでしょうから。

全然別の話題になりますが、本日Firefox1.0がリリースされましたね。
窓の杜
http://www.forest.impress.co.jp/article/2004/11/09/firefox10.html
をはじめ、各所でだいぶ話題になっているので、以前よりも利用者が増えてくるかと思われます。
hkomさんもお試しになられてはどうでしょうか。これまでは敢えて言及しなかったのですが、Firefoxでこのサイトを閲覧すると…。

Firefox まとめサイト
http://firefox.geckodev.org/
(拡張(別名プラグイン?)に関してのページもあるので、ここを紹介することにしています。)

あと、ほんの少し関係する記事も。

ユーザーは「IE以外」に、開発者はまだ「IEオンリー」
http://www.itmedia.co.jp/enterprise/articles/0410/18/news027.html

この状況をどう捉えるかは人それぞれですが、特定のブラウザの独自拡張に頼るのではなく、HTML, CSS, JavaScriptなどについても、公式の仕様にしっかりと目を通し、その仕様に沿うことが、今後の状況に対する最善の策になっていくのではないかと思います。

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/30-49e93cc6

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200411092235
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。