要素を調査

Oct 09 [Tue], 2012, 21:53

 今日は「要素を調査」の覚書です。

 FireFoxではいつのバージョンからか、参照しているWebページの1つ1の項目でどんなスタイルシートが適用されているか確認出来るようになっていました。

 確認したい部分でマウスを右クリックし、「要素を調査」を選択するとその部分の情報が表示されます。

 

 以下は私のサイトの例です。

446.gif

 真ん中の白い部分がマウスで選択した部分で右上では以下のような表示がされます。

447.gif

 これはスタイルシートのどんな定義が選択している部分に反映されているかを示していて、マウスでクリックして直接値を書き換えたり、定義自体を追加、削除したり出来て、すぐにページの表示に反映されます。

 

 又、右下の部分は以下のように表示されます。

448.gif

 これは選択している部分の内側の余白(padding)、外側の余白(margin)、線の太さ(border)等を示しています。

 図では左の線が太さ4でそれ以外はなし、内側の余白は上右下左の順に2px,0px,2px,6px、外側の余白はなしというのが分かります。

 

 下の部分は以下のように表示されます。

449.gif

 図ではaを選択してしていますが、div.sectionを選択すると以下のようになります。

450.gif

 つまり、今選択している部分を変更出来るため、指定したい範囲にどういう名前が付いているか分からない場合に、色々選択して探し出せます。

 

 私はこの機能を使うようになって、スタイルシートの修正が大分楽になりました。

 スタイルシートを修正したけど上手く反映されない時はこの機能を使って直接書き換えて、思ったように出来たらスタイルシート自体を書き換えるようにしています。

 

 但し、見ているページの見栄えは確認出来ますが、スタイルシートを修正すると他のページの見栄えにも影響します。このため、ある程度は理解した上で修正する必要はあるかなと思います

ホームページについて | Comment


クラス

Oct 08 [Mon], 2012, 23:04

 昨日に続いてスタイルシートの覚書ですが、今日はクラスについてです。

 クラスはクラスAは文字を赤、クラスBは文字を青等場合分け出来ます。

 スタイルシートに以下を追加します。

#side p.blue {
color: blue;
}

 昨日の例でhtmlのサイドメニュー部分の記述を以下のように変更します。

<div id="side">
<p class="blue">サイドメニュー</p>
</div>

 class="blue"部分がblueクラスを適用したという事でサイドメニューの文字が青色に表示されます。

 この時、htmlで以下のようにフッター部分にblueクラスを適用しても青色に表示されません。

<div id="footer">
<p class="blue">フッダー</p>
</div>

 これはスタイルシートで#side p.blueと定義しているためで、サイドメニューにしか反映されないクラスのためです。

 

 次にスタイルシートで以下の定義を追加します。

.red {
color: red;
}

 これはどこでクラスを指定しても反映する汎用的なクラスの定義です。「.」から始まる所がポイントです。

 昨日の例でhtmlのヘッダー部分の記述を以下のように変更します。

<div id="header">
<p class="red">ヘッダー</p>
</div>

 どこで指定しても反映されるため、ヘッダーの文字が赤色に表示されます。

 

 表示される画面は以下の通りになります。

445.jpg

 クラスを使うと同じボックス内でも異なる見栄えを適用出来ます。

 私はクラスについて理解せずにホームページをリニューアルしたため、殆ど同じだけどちょっとだけ見栄えを変えたい場合にも違うボックスを定義していました。2つのボックスは殆ど同じでちょっとだけ違うため、スタイルシートで同じ定義がずらずらと並んで少しだけ違う所があるボックスが複数記述される状態になります。このため、スタイルシートが結構煩雑になってしまいました。

 クラス分けして作れば、ボックスは1つで見栄えの違う所だけクラスで定義すればいいので簡素化出来ると思います

ホームページについて | Comment


スタイルシート

Oct 07 [Sun], 2012, 23:47

 最近ホームページをリニューアルしていますが、色々なやり方を覚えながらやっているので、後々忘れた時のために覚書をしようと思いました。

 何度かに分けて記載しようと思いますが、最初はスタイルシートについてです。

 

 スタイルシートはWebサイトの見栄えを定義します。

 htmlで<head>と</head>の間に<link rel="stylesheet" type="text/css" href="スタイルシートのファイル名">と入力する事で指定したスタイルシートを読み込みます。

 スタイルシートではWebサイトの背景色、テキストのフォント、更にはヘッダー、サイドバー、メインコンテンツ、フッター等をどのように表示出来るか指定出来ます。

 かなり以前はhtmlで見栄えを直接指定していましたが、最近ではこのようなやり方は推奨されないようです。

 又、google等で検索される場合でも見栄えの定義に多くの文字を使うと実際に掲載されている内容が重要視されにくいようです。従って、スタイルシートで見栄えを定義する必要性があります。

 

 簡単な以下の図のようなWebサイトを例にします。

444.jpg

 上記で線で囲まれた部分はボックスでブロックレベル要素と呼ばれ、ヘッダー等の文字の部分はインライン要素と呼ばれているようです。ボックスで配置する場所を決めて、インライン要素でボックスの中身を定義するイメージになると思います。

 

 実際のスタイルシートですが、まず文字コードを指定します。

@charset "Shift_JIS";

 その後、全体の幅を定義します。

#page { /* 全体の幅を定義 */
width: 200px;
}

 ヘッダー部分を定義します。

#header { /* ヘッダーを定義 */
width: 200px;
height: 30px;
border-style: solid; /* ヘッダーの周りの線 */
border-width: 1px; /* 線の太さ */
text-align: center; /* テキストを中央表示 */
}

 メインコンテンツと記載した部分を定義します。

#main { /* メインコンテンツを定義 */
width: 138px;
height: 100px;
border-style: solid;
border-width: 1px;
float: right; /* メインコンテンツを右に回り込ませる */
text-align: center;
}

 ここでfloatの部分が重要な役目をします。メインコンテンツで記載した部分を右に回り込ませるという意味です。

 これがないとサイドメニューはメインコンテンツの下に表示されてしまいます。

 

 次にサイドメニューを定義します。

#side { /* サイドメニューを定義 */
width: 58px;
height: 100px;
border-style: solid;
border-width: 1px;
}

 次はフッターの定義です。

#footer { /* フッターを定義 */
width: 200px;
height: 30px;
border-style: solid;
border-width: 1px;
text-align: center;
}

 上記では基本的にボックスの幅、高さ、線等を定義しているだけです。メインコンテンツ部分だけは回り込みを定義しています。

 

 このようにしてボックスを定義して全体の見栄えを整え、その中に掲載する内容をhtmlで記載する事になります。

 

 htmlは以下のようになります。

 まずはスタイルシートの定義です。

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

 次からは各ボックスの中に表示する内容を記載します。

<body>
<div id="page">
<div id="header">
ヘッダー
</div>
<div id="main">
メインコンテンツ
</div>
<div id="side">
サイドメニュー
</div>
<div id="footer">
フッダー
</div>
</div>
</body>

 div idの部分はスタイルシートで定義したボックスの中身を記載する事を宣言しています。メインコンテンツは<div id="main">の中に記載されているため、右に回り込みしているのでサイドメニューが左に表示されます。

 ボックスの中にボックスを定義する事も可能で、floatする事で横並びにする事も可能です。

 その他にもボックスの余白等、テキストのフォントやカラー、背景色、イメージ等も定義出来るため、スタイルシートでサイトの見栄えが殆ど定義出来ます。htmlはスタイルシートのどの見栄えを使うか指定して内容を記載する事になります。

 本ブログでもスタイルシートを定義してhtnlを書き直す事で選択出来るスキンからかなりイメージを変えています。

ホームページについて | Comment


毎日が趣味のページの日記をリニューアルしました

Sep 17 [Mon], 2012, 22:34

 最近、「The Elder Scrolls V: Skyrim紹介サイト」を作成し、「毎日が趣味のページ」、「ネットワーク入門サイト」をリニューアルしていましたが、日記も他のサイトに合わせる形でリニューアルしました

 変更点としては、全体的な雰囲気を他のサイトに合わせたのと、ファビコン、カウンターは毎日が趣味のページと統合しています。

 又、プロフィールの画像は少し凝ってみました。

 ページの幅を広げて文字を少し大きくしたので見やすくなっているといいなと思います

ホームページについて | Comment


ネットワーク入門サイトをリニューアルしました

Aug 18 [Sat], 2012, 22:51

「ネットワーク入門サイト」をリニューアルしました。

ネットワーク入門サイトは初期に立ち上げたサイトでしたが、サイトの作りが古くなっていました。又、記載している内容はイメージで分かり易くを狙っていたものの、余りに例えを使いすぎて逆に分かり辛い部分も多いと反省もあったため、全てを書き直すためリニューアルしました。

以前のものを書き直した基本編に加え、小中規模の管理者向けである応用編、トラブル対応編も追加してボリュームもアップしています。

まだ加執、修正が必要な所もありますが、適宜行っていきたいと思います。

又、不定期になると思いますが、まだまだ追加予定です。

家庭内ネットワークで悩んでいる方、小中規模のネットワーク管理者になって勉強しないといけない方等の参考になればと思います。

本サイトを参照されて少しでもネットワークについて理解が深まればと思いますので、ぜひご参照下さい

ネットワークについて | Comment


HPでのping

Jul 05 [Thu], 2012, 23:14

 最近またHPを更新し始めたのですが、検索サイトで反映されるのが遅く、1週間たっても反映されていませんでした。

 仕方なくRSSを設置してpingを飛ばしたのですが、そこで奇妙な事に気づきました。

 以下のように自分のサイトを検索してキャッシュを見ても全然反映されていませんでした。

431.jpg

 古いトップページです。

 現在のトップページは以下の通りです。

433.jpg

 RSS設置やpingの仕方が間違っていたのかと暫く悩んでいましたが、yahoo等で検索すると、検索結果で表示される概要(タイトルの下の内容)には以下のように反映されています。

432.jpg

 この状態で更新前にはなかった単語で検索してもちゃんと検索されます。

 

 つまり、pingを飛ばして呼び込んだクロークは検索のインデックスには反映しますが、キャッシュまではされないのかなと思いました。

 たまに検索はされるけどキャッシュがないサイトもありますが、もしかするとpingでインデックスされているけどキャッシュはされていないという状態なのかなと思いました。

 キャッシュされるクロークってpingで呼び込みクロークと別物なのかもしれないですね

ホームページについて | Comment


スカイリムで実績を全て取得しました

Jul 02 [Mon], 2012, 23:26

スカイリムで実績を全て取得しました

430.jpg

 実績は50個もあるので、全部は無理だろうと諦めていたのですが、なんとか取得出来ました。

 殆どは普通にやっていると取得出来ると思いますが、一部気を付けないといけないもの、?となるものがあります。

 

 1つ目はオブリビオンウォーカーです。

 デイドラの秘宝を15個収集しなければいけないのですが、クエの途中で選択を誤ると収集出来なくなったりします。攻略サイト等を見て慎重に進める必要があります。

 

 2つ目はスゥームマスターです。

 シャウトを20個習得なのですが、通常の攻略では全て集まらないと思いますので、これも攻略サイト等を見て集める必要があります。

 

 3つ目は盗賊です。

 鍵を50個破り、スリを50回するなのですが、鍵は普通に進めれば50回は開錠すると思います。ただ、スリは普通50回もしないので、付呪でスリのスキルを上げた装備で繰り返し行う必要があります。

 

 4つ目は大罪人です。

 九つの要塞すべてで1000ゴールドの賞金がかかるなのですが、衛兵を殺害すると1000ゴールドの賞金がかかります。注意すべき点は目撃者がいる所で殺害しなければいけない点です。目撃者がいないと賞金がかからないためです。又、目撃者を殺害してもいけません。目撃者を殺害すると賞金が取り消されるためです。私は最初、殺害しては次の都市に向かっていたので、賞金がかけられなかったりして少し悩みました

 

 5つ目は賞金首です。

 監獄から脱走しなければいけないのですが、投獄されるとロックピックが1つしかなくなります。これで脱獄しなければいけないので、開錠に慣れていないと少し大変かもしれません。ホワイトランでは、正面の鍵を開錠し、衛兵が追ってくる中、すぐ左の扉を開けるとドラゴンズリーチに行けて、これで実績が解除されました。牢屋の中から地下の扉を開けて進んでいくという方法もあるみたいですが、実績取得だけが目的の場合は、この方法が一番簡単かもしれません。

 

 私は全ての実績を取得するのにThe Elder Scrolls V: Skyrim紹介サイトを作って、色々なMODを検証していた事もあってかなりかかってしまいました。でも、実績は日頃はしないようなプレイもする必要があって、中々面白いと思いました

The Elder Scrolls V: Skyrim | Comment


無線LANとの2日間格闘の結果

Jun 18 [Mon], 2012, 21:16

 最近、ネットワークの調子が悪い事に気づきました

 全然つながらない事はないのですが、無線親機にpingをすると通常数msで応答があるのですが、5回(5秒)に1回は2000ms前後になります。試しにもう1台のPCでpingすると5回に1回ではなく2回なのですが、500ms前後になります。

 少し前まで問題なかったので、考えられる原因と対策をやってみました。

1.親機の再起動
 何はともあれ、これです。8割位は直ると思っていましたが、状況は変わりませんでした。

2.電波干渉
 測定してみたのですが、被ってない所か殆ど空いている状況でした。

3.親機のファーム
 親機ファームは最新で、念のため再インストールしましたが、状況は変わりませんでした。

4.子機のドライバ
 子機のドライバも最新で、もう1台も同じ症状のため考えにくいと思いましたが、再インストール、状況は変わらずでした。

 この辺りから少し焦り始めます

 

 親機の設定を色々変更したり、家電電波の影響も考えて遮蔽してみたりしましたが状況は変わらず・・・

 ついに親機が壊れた、もう無線はこりごりと思い、週末にケーブルを買いに行こうと決心したのが1日目でした。

 

 2日目、もう諦めかけた時、ふと思ったのが何故か確実に5秒間隔という点です。故障や電波干渉等だと不定期に遅くなると思うのですが、確実に5秒・・・もしかして、何かソフトが影響しているのかもと考えYahooで検索すると・・・見つけたのです。全く同じ症状の人がいらっしゃいました

 やはり同じように苦労した経緯が記載されていて、解決したのかドキドキしました。で、読み進めていくと、「PlaceEngine Client」というソフトを削除すると解決したと記載があったので、早速削除してみると、なんとアッサリ解決したのです

 

 因みに、上記で全く同じ症状が記載されていたのは「日々の出来事や感想などを記したもの。:)」で、ブログのコメント欄の過労姉妹さんが同様に苦労されて解決していました。

 もし無線を買い直していたりしても同じ症状が発生していたと思います。

 記事を書いたstar_no2さんに感謝すると共に、解決に導いて下さった過労姉妹さんに敬意を表します。

 ありがとうございました

 

 私の場合はSONYのWalkmanで音楽を転送するために使うX-アプリをインストールした際、「PlaceEngine Client」が自動的にインストールされたようでした。

 star_no2さんの記事には詳しく記載されていますので、同様の症状が発生した方はぜひ読まれる事をお奨めします。

その他 | Comment


スカイリム1.6.89.0アップデートでの日本語化

Jun 17 [Sun], 2012, 15:17

 スカイリムが1.6.89.0にアップデートされていました。

 毎回恒例のアップデート後の日本語化ですが、今回はトラブルに見舞われました

 ESCキーを押した時に表示されるメニュー等一部は日本語化されたものの、NPCの名前、地名、会話等殆どが英語のままとなってしまいました。

 手順としては、以下の通り実施しました。

1.Dataフォルダにある「Skyrim - Voices・・・」ファイルのバックアップ
2.steamでゲームキャッシュの整合性を確認
3.日本語化パッチ適用
4.「Skyrim - Voices・・・」ファイルをDataフォルダに戻す

 色々調べてみると、Stringsフォルダには「Skyrim_English・・・」ファイル、「Update・・・」ファイルがあり、どうも整合性の確認で「Skyrim_English・・・」ファイルの方も英語になってしまったようで、「Update・・・」ファイルの方だけ日本語化されたみたいでした。

 幸いにも「Skyrim_English・・・」ファイルに拡張子「.日本語化」が付いたファイルが別にあったため、これで上書きする事で日本語化出来ました。

 上書きしたファイルは以下です。

a)Skyrim_English.DLSTRINGS
b)Skyrim_English.ILSTRINGS
c)Skyrim_English.STRINGS

 なんとか日本語化した後、アップデートで馬上戦闘が出来るようになったみたいなので早速戦闘してみましたが、ちょっと使い辛いです・・・

The Elder Scrolls V: Skyrim | Comment


毎日が趣味のページを更新しました

Jun 16 [Sat], 2012, 19:40

 なんとここの日記のコメントがいつの間にか投稿出来なくなっている事に気づきました。

 いつからか不明ですが、カスタマイズしているので画像認証機能が追加がされた際に認証が使えずに、投稿出来なくなってたのだと思います。

 やっぱり放置はまずいですね・・・

 今は、スキンを編集して何とか投稿出来るようになりました。

 

 又、暫く放置していたホームページですが、「The Elder Scrolls V: Skyrim紹介サイト」を立ち上げた事もあって「毎日が趣味のページ」も更新してみました。

 最初に作った時はtableタグで見栄え等を揃えていましたが、今回はcssで見栄えを整えてなるべく分かり易くしてみました。

 良かったら見て下さい

ホームページについて | Comment