HTML アーカイブ
2008年02月06日
CSSで段落化
こんにちわ。
うにです。
昨晩は仕事疲れなのか風邪なのか、頭痛が酷かったので何もせず飯食って就寝しました。
前回GMS SKINのフレーム化をすると書きましたが、フレーム化ではなく擬似フレームで書き始めてます。
擬似フレームってなに?
フレームと擬似フレームってどう違うの?
って思う人が殆どだと思います。
まずフレームは分かると思いますが、一つのページの中に複数のhtmlファイルを読み込ませる事ですね。
海栗海胆雲丹ではメニューページでフレームを使用しています。
んで擬似フレームですが、こちらはCSSを活用して段落を作っています。
段落というとhtmlタグでいうなれば<q>もしくは<blockquote>を使用すると段落になるんですが、普通の文章(手順書等)を書くのであればそれでもいいんですが、複数段落を作成するとなると上記タグは使用できません。
ではどうするか?
スタイルシートを使って段落化(擬似フレーム化)するわけですね。
まぁうにぐでも擬似フレームを使用しているわけですが^^
まぁ文章で言ってもよくわかんないと思うので例を挙げてみます。
下の表?を見てください。
ヘッダーメインのコンテンツ(右側)端のコンテンツ(左側)フッター
こちらはtableタグを使ってそうですが、tableは一切使ってません。
html的にはdivタグのみ使ってます。
ソースはこんな感じになります。
<style>見易い様に枠線を表示させてます。 うにぐのように背景に画像を置く場合は枠線は指定しない方が良いですね^^
<!--
#main { float: right; border-width: 1px; border-style: solid; }
#left { border-width: 1px; border-style: solid; }
#head { border-width: 1px; border-style: solid; }
#foot { border-width: 1px; border-style: solid; }
-->
</style>
<div id="head">ヘッダー</div>
<div id="main">メインのコンテンツ(右側)</div>
<div id="left">端のコンテンツ(左側)</div>
<div id="foot">フッター</div>
これをコピペしてテキストファイルに貼り付け、拡張子をhtml(もしくはhtm)にして実行してみてください。
上と同じようになると思います。
簡単に説明するとmainの部分を右寄せにするわけですが、ただ<div align="right">とかにすると文章は右寄せになりますが枠が改行されてしまいます。
<table>を<div>で囲めば別ですが、今回はtableは使わない前提としているので。
まぁこれをスタイルシートでfloat: right;と付け加える事により表現しているわけです。
各idにwidth: 500px とか入れることにより横幅指定も可能です。
擬似フレームは今回紹介したCSSとの連携以外にも方法はあります。
インラインフレームを使う方法です。
うにぐのサイドバーにある[来訪者情報]がそれにあたります。
一つのhtmlからある範囲内に別のページを表示させる、というものです。
フレームと同じじゃないの?と思うでしょうけど、違うんですw
フレームとしてはベースとなるページにフレームとして呼び出すページ、計3つのhtmlファイルが必要になります。
ですがインラインフレームの場合は名称のまんま、一つのページの中に別のページを呼び出すというものです。
まぁ利点を一言でいうなれば、「動作が軽い」ってことですね。
インラインフレームを使用すると呼び出すページによってはスクロールバーが表示されるのでその分余計な横幅を取ってしまうためあんま使いたくないんですけどね^^
まぁ範囲を余分にとってスクロールしないように(スクロールバーも表示させない)すればいいんですけどね^^
CSSでの擬似フレームがうまくGMSに使えなければインラインフレームも考えてみます。
まぁ人によって使い道が違うので数タイプ用意するのが一番いいんでしょうけどね。
前回WEB関連のカテゴリを追加したので書いてみました^^
(本音はMMOネタがないだけだけどwww)
まぁ興味のある人は調べてみてくださいw
(全てを説明するととんでもなく長い日記になっちゃうのでw)
ほいじゃ今日はこんなところで^^
またなにかあれば書きます。
(=゚ω゚)ノジャ、マタ!!
2008年02月05日
Multiple IE installer
こんにちわ。
うにです。
昨晩は寒さのせいか、足腰が痛かったのでちょこっとSKINの打ち合わせ(?)の為にRappelz入って早目に寝ちゃいました。
まぁGMSの設置も出来ているようで問題はないみたいなんですが、ちょっとお話してました^^
(ついでに鷹狩り)
CABALは一昨日から入ってません。
クエも落ち着いたのでそろそろLv上げに専念したいんですが、このLv帯(Lv60↓)ではろくな狩場がないっぽく、地道にやるしかないようです。
現状の目標はユアン/パーティ エポを着る事ですが、それにはLvが@24も足りないという事で・・・
とりあえずはお墨着る事(っていっても狩りでは影鉄熟練装備・・・)、オスミブレ装備ってとこですね。
STRは230は超えているので@3~4Lvってところです。
今ふと思ったんだけど、今まで書いてきたSKINの一覧表示形態は名前のみか縮小画像の状態かの2つだけでした。
今度ちょっと違うのを書いてみようかと思ってます。
フレームを利用したタイプを書いてみようかと思ってます。
ギルドサイトがフレームタイプのサイトには使えませんがリンクを追加すればそのままギルドサイトに流用できるようなタイプのSKINにしようかと思ってます。
ベーシックではメンバー一覧を左側、右側に詳細内容、そうすることによって多少のhtmlの知識があればメンバー一覧を右側、もしくは上下に分ける事も可能になると思います。
ただ、強制でそのタイプを押し付けるのもいけないので、既存のタイプとフレームタイプの2種を入れていこうと思ってます。
使用者の好みに合わせてってやつですね^^
差し替えファイルもmain.htmlのみなので大して容量が増える事もないと思います。
前回のRappelzの縮小アイコン表示の思想の時の様にうまく動かない、何てことにならないようにがんばってみますw
(既にちょっと不安なんだけどwww)
今調べ物をしていたところ、おもしろいものを発見しました!
Multiple IE installerというものです。
これは、複数のIEを一つのPCにインストール出来るというものです。
だからなに?
って言われればそれまでですが、htmlを書く人にとっては重宝するかと思います。
うちのPCにもブラウザはちゃんと表示できるかのテスト用にFireFox/ネスケ/オペラ、そしてIE6の4種が入っています。
ブラウザによって違う表示が出るか試す為にインストールしてます。
普段はIE6を使ってます。
最近はIE7を使う人も多くなってきたようでたまに「IE7では表示がおかしい」とか言われる事もあるんですが、今まではIE7をインストールするとIE6は使えなくなってしまうので検証環境がなかったわけですが、これで実現する事ができます。
これを使ってインストール出来るブラウザはIE系だけですが、IE3.0/4.01/5.01/5.5/6.0 と、多数入れることが出来、更にインストールするバージョンを選択する事も可能です。
5.01/5.5/6.0があれば十分だと思います。
普通の人達には必要のないものですけどね^^
WindowsXPにて自動更新に設定している人でIE7を使いたくない人には有力情報かと思います。
2/13の自動更新でIE7が入ってしまうからwww
MSめぇ~余計なことを・・・
って感じですwww
まぁ帰ったらうちの奥さんにも聞いてみようと思います。
まぁ「よくわかんないからなんでもいいよ。ってか今のままで十分でしょ」って言われるのが目に見えてますけどwww
んじゃここいらで^^
(=゚ω゚)ノジャ、マタ!!
------
ps.カテゴリにWEB関連を入れてみました。
CGI
:有用なCGIプログラムの紹介の時とか^^
まぁGMSもCGIなんですけどねw
CSS
:html書く人には重要なものですね。
なにか面白いプロパティがあったら入れてみます^^
FLASH
:まぁ自分にはゼロからFLASHを書く技術ないんだけどおもしろいのがあればw
HTML
:これは基本ですねw
最近はJS、FLASHだけで構成されているサイトもありますけど、まだまだ大事なとこです。
JavaScript
:ここも有用な情報があれば^^
まぁ今までも沢山使ってるんですけどねw
うにぐでも多用してます。
最近のコメント
うに on 狩人=釣りという固定概念: ふむふむ。。。 目玉
通行人B on 狩人=釣りという固定概念: 70こえると目玉(ま
うに on 狩人=釣りという固定概念: ぶーさん、おひさ~^
ぶー on 狩人=釣りという固定概念: うにさんこんにちは^
うに on 釣ったらカオス: ハリさんいらっしゃい
通行人B on 釣ったらカオス: 闘士の武器術Cはない
通行人B on 炎の罠って・・・orz: ドンマイwww し
うに on 炎の罠って・・・orz: ぅ・・・ 直しまし
通行人B on 炎の罠って・・・orz: 何となく横から。。。
アーカイブ
- 2008年07月 : 009
- 2008年06月 : 019
- 2008年05月 : 019
- 2008年04月 : 019
- 2008年03月 : 020
- 2008年02月 : 020
- 2008年01月 : 021
- 2007年12月 : 021
- 2007年11月 : 018
- 2007年10月 : 022
- 2007年09月 : 018
- 2007年08月 : 021
- 2007年07月 : 022
- 2007年06月 : 026
- 2007年05月 : 025
- 2007年04月 : 020
- 2007年03月 : 031
- 2007年02月 : 025
- 2007年01月 : 022
- 2006年12月 : 021
- 2006年11月 : 020
- 2006年10月 : 022
- 2006年09月 : 019
- 2000年04月 : 028
- 2000年03月 : 010
お気に入り
- CABAL ONLINE
- ShineжCross
- Rappelz
- LECIEL
- ウルの日記
- ユーリさんのブログ
- ヴィーズナのぶろぐ
- Rappelz放浪記
- Movable Type
- Movable Type備忘録
About HTML
ブログ「うにぐ」のカテゴリ「HTML」に投稿されたすべてのエントリーのアーカイブのページです。新しい順番に並んでいます。
前のカテゴリはFLASHです。
次のカテゴリはJavaScriptです。
来訪者情報
ステータス
- 総エントリー数・・・・・・・・・[0518]
- 総コメント数・・・・・・・・・・・[0875]
プロフィール
Work・・・・・・・・・・・・・・・・・・・[CSE]
Age・・・・・・・・・・・・・・・・・・・・・・[30]
- Rappelz
Server・・・・・・・・・・[Salamander]
Name・・・・・・・・・・・・・・・・[紫雲丹]
- CABAL ONLINE
Server・・・・・・・・・・・・・・・[Jupiter]
Name・・・・・・・・・・・・・・・・・・[雲丹]
MMO履歴
- Asgard
- Bright Kingdom
- CABAL ONLINE
- Cardinal Saga
- Corum Online
- Dark Arena
- DEKARON
- DIABLOⅡ
- Eternal Chaos
- Fantasy Earth
- Flyff Online
- Granado Espada
- Last Chaos
- LOST ONLINE
- MicMac Online
- Mabinogi
- MU奇蹟の大地
- M2~神甲演義~
- Neo Steam
- Rappelz
- RF online
- ROSE ONLINE
- R.O.H.A.N
- Seal online
- SilkLoad Online
- TANTRA
- Talesweaver
- TrickSter
- Ultima Online
- Yogurting
- ZerA
- 童話王国










