試験勉強中の慰みにトップページを少し改装しました。
ところで、ここで困ったことが。
おそらくこのテーブル、IEだと一本の線で表示されますが、
Firefoxだと左と上が二重線になって表示されるはずです。
こんな感じに、IEは他のブラウザとテーブルの表示のされ方がちょと違うので、
他所様のサイトをのぞかせてもらいつつ、試行錯誤。
↓多分これならどちらのブラウザでも一本の線で表示されるはず。
< table border="0" bgcolor="#000000" width="100" height="100">
< tbody>
< tr bgcolor="#ffffff">
< td bgcolor="#ffffff">
< /td>
< /tr>
< /tbody>
< /table>
テーブル全体の背景色を黒にする→マス目ごとの背景色を白にする
→線で囲まれているように見える→彼女ができる
だいたいこんな感じ。
cellspacing（内枠の太さ）を変えれば太さを変えることができます。
…よく探したら解説してるサイトあったのね。
あの１時間は一体…。
試験勉強期間にこんなことしてるのが悪いのか、そうですね。
ともかく覚え書き覚え書き。
もひとつ、ファイルエディタに関する覚え書き。
置換機能は重すぎてマジ使えないです。
環境や作業状況にもよりますが・・・。
全て選択→一括置換
ではなく
ひとつずつ探す→ひとつずつ置換
という感じらしい。
しかも、見た目の上ではメモ帳と同じような感じですが、
裏ではいちいちｈｔｍｌタグに変換しているわけですから、重いのもやむなし・・・。
置換する場合は、ソースを全部メモ帳かなにかにコピペしてやった方がはるかに早いです。
ソース開いた状態で検索・置換できたらいいのですけどね・・・。
そこのところ、どうなんでしょう、開発者さん。見てないか。
2008.07.27 |
| Comments(0) | FC２ファイルエディタ
アイコンの説明の続きです。
もっとも、説明というよりかは分析ですが。
おそらくこういう機能なのであろう的な感じです。
●段落番号、箇条書き
まあ使わないでしょう。よって省略。
●インデント解除、インデント
インデントアイコンを押すと、その行が右に４０ピクセルずつ幅寄せされます。
解除するとインデントが４０ピクセルずつ解除されます。
たとえばこうなります
インデント
ソースを開くとこうなっているはずです。
<p style="margin-left: 40px">インデント</p>
少し詳しく説明すると、
まずｐなのでこのタグはひとつの段落として認識されることになります。
そしてstyleというのが書かれていますが、これは属性と呼ばれる部分です。
つまり、「インデックスという文章は"margin-left: 40px"というstyle属性を持つｐ（段落）に書かれている」という意味になります。
以下ソースをいじらないと変えられない部分の説明です。
・leftをrightに書き換えると左に幅寄せされることになります
・数字をソースで書き換えれば４０の倍数以外の任意のピクセル分幅寄せできます
●左揃え〜両端揃え
そのまんまです。選択したパラグラフを左揃えにしたり中央揃えにしたりできます。
ワードソフトと感覚は同じです。当然インデントと併用できます。
たとえば
中央揃え
ソースでみると
<p style="text-align: center">中央揃え</p>
つまりこのアイコンの操作はソース上では選択したパラグラフにstyle="text-align: center"という属性を与えるという操作にあたります。
もちろんcenterをrightにすれば右揃えになります。
2008.07.03 |
| Comments(0) | FC２ファイルエディタ
その３です。
なぜこんなことをとお思いでしょうが、一応理由はあります。
FC２ファイルエディタを使っている人口が少ないようなので、寂しいからです。
いわく、使い方がわからないとか、使いにくいとか。
使いにくいだって？
そんなことはないはずだ、今から俺がそれを証明してやるぜ！
・・・う、うわぁぁぁっ！
さておき。
index.htmlの編集（もしくはファイルの作成）をクリックしてファイルエディタを開きましょう。
ＨＴＭＬメイカーのことはとりあえず無視します。
とりあえずページ上部にあるアイコンの説明をします。
とりあえず重要な「ソース」まで説明します。
あわせてhtmlという概念の簡単な説明をします。
というかこれを説明しないと話が進みません。
長くなりますので必要な情報を取捨選択しつつ効率よく読んでください。
●再読み込みする
とりあえず無視します。
●保存する
編集した情報を保存します。
間違ってこのアイコンを押さずにウィンドウを閉じないようにしましょう。
最初のうちはたまにそういうことがあると思います。
また、サーバーの不調のため（？）か処理に失敗することがあります。
そのため、保存する前にソース（後述）をコピー、ないしバックアップをとっておくする癖をつけるとよいと思います。
●ソース
ソースを表示します。この機能はよく使うので説明が長くなります。
ソースとはhtmlタグで書かれたページの情報です。
このhtmlタグを読み込むことでブラウザはページを表示します。
FC２ファイルエディタの説明に使うので少しhtmlタグについても説明しようと思います。
まずこのアイコンを押してみましょう。すると
<html dir="ltr">
<head>
<title></title>
</head>
<body>
<p> </p>
</body>
</html>
と表示されます。
白紙のページなのに、最初からこれだけの情報があります。
htmlタグは基本的に対になっています。必ずしも、ではないですが。
これらに挟まれている部分に対して、htmlタグは影響を与えます。
後で必要になるので少し読み方を説明します。
htmlのタグは基本的に「要素」と「属性」で書かれます。
たとえば、後でも説明しますが「ｐ」という「要素」があります。
ｐとはパラグラフ、つまり段落の略で、
このｐに囲まれている部分はひとつの段落として認識されます。
そして、属性。このｐという要素には「属性」がつくことがあります。
属性とはたとえば「この段落の文章は中央揃えにする」などといった感じのことです。
具体的な例を挙げると
中央揃え
↑中央揃えになっているかと思います。
これをｈｔｍｌで書くとこうなります。↓
<p style="text-align: center">中央揃え</p>
これを日本語に翻訳すると、
「中央揃え」という文章はstyleが"text-align: center"であるという属性を持つパラグラフに書かれている
となります。
もちろんcenter（中央）の部分をrigft（右）やleft（左）に書き換えれば右揃えにしたり左揃えにすることができます。
こうしたhtmlタグの組み合わせによりウェブページは形作られているというわけです。
今後こういった理解を前提に説明していくことが多いのでご了承ください。
これらはいずれも基本のｈｔｍｌタグになるのでそれぞれ説明していきます。
・<html dir="ltr"></html>
その文書がhtmlタグで書かれたものであることをブラウザに教えるためのタグです。
必須なタグですが、ファイルエディタでは最初から書いてくれています。
半年前はこんなのなかった気がします。仕様変更で追加されたようです。よいことです。
・<head></head>
ページの基本的な情報はここに書かれます。
必須です。が最初から書いてくれてあるので別に気にしなくてもいいです。たぶん。
・<title></title>
このタグの間にページのタイトルを記述します。
ブラウザや検索ページなどで表示されるときなど、ここに書かれたページタイトルが表示されることになります。あなたが今見ているサイトだと、「風浪日記」にあたります。
そういうわけで、ここにあなたのサイトの名前を入れてみましょう。
別になくてもいいですが、ないと寂しいです。
・<body></body>
ここに本文、つまりブラウザ上で表示される情報が入ります。
ちなみに、ソース上で改行などをしても反映されません。
ソース上では、改行はhtmlタグで入力しないと意味がないです。
ファイルエディタはこういう改行などの操作をワードソフトのような感覚で行えるということになるわけですが、そこら辺は後述予定です。
・
ソース上で半角スペースを意味します。
この他、<や&はhtmlタグでは違う表記をされることになります。
これらの特殊文字はhtmlタグと混同される可能性があるためです。
ためしにソースを閉じて、これらを入力してからもう一度ソースを開いてみてください。
なにか変な記号の羅列がでてくるはずです。
ここら辺はファイルエディタを使えばhtmlタグで直接打ちこむ必要がないので気にしなくてもいいでしょう。
しかし、ソースを開いたときに「なんじゃこれは」と思って消してしまわないように心の隅にとどめておくとよい気がします。
・<p></p>
先にも述べましたが、これは段落を意味します。
ためしにソースを閉じて、エンターキーで一行改行してからもう一度ソースを開いてみてください。
<p> </p>
<p> </p>
このように変わったはずです。
つまり、このタグで囲まれた文章やタグは一つの段落として認識され、改行されるということです。
この改行という概念は後でけっこう重要になります。後述予定。
次回、他のアイコンを説明する予定です。多分もっと長くなります。
2008.07.01 |
| Comments(0) | FC２ファイルエディタ
というわけで第２回です。
飽きたらやめます。
ｆｃ２でホームページを作り始める人多いから、きっと需要あるんじゃないかと思っています。
ひいてはうちのアクセスアップにつなげつつ、ゆくゆくはつられてやってきた皆さんを巧妙にワンクリック詐欺の罠に陥れようと思っています。これで労せずして億万長者になろうというわけです。
まったく、自分の商才に恐怖すら感じてしまいます。
さておき、まずファイルマネージャーの説明から。
最初は「index.html」というファイルと「i」というディレクトリがあると思います。
このファイルがいわゆる「ページ」です。
このファイルとその拡張子「html」をwebブラウザが読み込むことで「ページ」を見ることができます。
ディレクトリはファイルの整理に使います。フォルダみたいなものです。
これをクリックするとそのディレクトリに移動します。
画像アップロード用ディレクトリなどを作っておくと後から整理整頓が楽です。
ファイルマネージャーの説明は公式で十分だと思うのでここらへんは別に説明しなくてもいいでしょう。
公式→http://fc2hpmanual.blog95.fc2.com/
ワンクリック詐欺ではないのでご安心くださいね！
（付記すると、この「i」ディレクトリは公式サイトによれば携帯用のディレクトリらしいです。ググってください）
ともかく、この「index.html」がいわゆるサイトの「トップページ」にあたります。
たとえば、うちだと「http://kazanamimansions.web.fc2.com/index.html」がこれにあたります。
このページには特徴があり、アドレスバーに「http://kazanamimansions.web.fc2.com/」と入力してもこのページが表示されます。普通、他のサイトからリンクしてもらう時はこの「http://kazanamimansions.web.fc2.com/」にリンクしてもらうことになります。
それで、この「index.html」から編集していくことになるわけですが、その前に。
「ファイルの作成」をクリックしてファイル名を決めると、その次に「ＨＴＭＬメーカーを起動しますか」と聞かれると思います。新しいページを作る時は毎回聞かれます。
しかし、この「ＨＴＭＬメーカー」は使いません。
理由は４つあります。
僕が使ってないから説明するのが面倒。
少し難しいhtmlタグを使うことになるから説明が面倒。
少し難しいhtmlタグを使うことになるからよく知らずに使うとレイアウト崩壊の原因になる。
使わなくてもページを作れる。
そういうわけで「ＨＴＭＬメーカー」の説明には触れずにすすめていきます。
（もしかしたら一通り終わった後に補足説明をするかもしれません。）
次回、ようやくファイルエディタを起動します。多分。
2008.07.01 |
| Comments(0) | FC２ファイルエディタ
« | HOME |
»
