[04] 書籍情報画面を作ったはいいが・・・






スタイルシートわけわかんないよぉぉ~!!(つД`)

という心の葛藤と、ここ毎晩戦いを繰り広げている武之介でございます。
HTMLによるデザインならば、こんなに苦労することはないのに・・・と思いつつも、複雑なデザイン設定ができちゃったりするときなどは、逆にスタイルシートの素晴らしさに驚かされる。
そんなアンビバレンツな次元の空間ににアナザーディメンションされています。(?)



早くここから抜け出したい・・・





ま~た戻っているよ、おいっ!!

というのが、昨夜画面を見たときの私の第一声。
「10 件中 1 - 2 件目 」の表示が、なぜか左に寄っている。

ま・た・こ・い・つ・か・・・(゚Д゚ #)

その前の第2回の時にはちゃんと右端によっていた。[画面]
でも、第3回が終った時点で・・・左に寄っている・・・なぜだぁぁぁ!!!ヽ(`Д´)ノ[画面]
原因といえば、第3回の時におこなった
HTML4.01を使用してますよ宣言
だろうと推測はできるのですが・・・何度修正しても右端によらない。

この帯の部分をHTML側では

<p ID="result">
<span class="caption">書籍一覧</span>
<span class="hit">10 件中 1 - 2 件表示</span>
</p>

と記述している。
CSSでは

.hit {
font-size : 0.9em;
text-align : right;
float : right;
}

という表記にしてますが、なんで右端によらねーんだ、コイツは?ヽ(`Д´)ノ
text-align:rightで右端によるんじゃないの?
<span>タグじゃダメなのかっ?!
それとも<p ID="result">がそもそもダメなのか?

なぁぁぁぁぜぇぇぇぇだぁぁぁぁぁぁぁ!!!ヽ(`Д´)ノ

とたった帯一つのことに、うんうん1時間以上悩み続け唸り続けたあげく、

『パト○ッシュ、僕はもう疲れたよ・・・(つД`)』

ノブナガ様に30分ほど現実逃避。
な~んか、根本的なところから間違っているような気がしてならないデス。



ここで立ち止まっていても仕方ないので、次の画面の作成を開始。
考えていた仕様では、書籍情報一覧画面において、
書名をクリックした場合にその詳細情報の画面に遷移
ということになってます。
そこで、詳細画面用のHTMLとして kounyuu_detail.html というHTMLを準備。


基本的な作りは一覧画面やログイン画面と似たり寄ったりなので、それほど苦労することなくページ作りは完了。
(tableの幅の調整に唯一手間取ったくらい)


これでとりあえず
書籍情報一覧
ログイン
書籍情報詳細
という3つの画面が出来上がりました。
基本的には、この3つの画面を使いまわして、サイトを構築という形で考えております。
(ログイン後に書籍情報の新規登録・更新を行うのですが、一覧・詳細の画面を使いまわして、部分的に変更するだけでOKですからね。)


一応基本となるものができたので、この時点で携帯から接続を試みます。
PCのブラウザから見るのが通常の使用方法ではありますが、携帯からも見れるようにする!というのが、今回のコンセプト。
ということで、さっそく以下のURLに携帯でダ~イブインッ!!(≧▽≦)

http://takenosuke.vis.ne.jp/kounyuu/kounyuu.html


おお、見えとる見えとる、見えとりまっせ、うへへへへ。Ψ(`∀´)Ψ


こういった作った結果がすぐに確認&実感できるっていうのは、嬉しいね。
とりあえず、
・ログインをクリックして、ログイン画面に遷移
・書名をクリックして、詳細画面に遷移
という2つに関しては、携帯上でも問題ないことが確認できました。

ただ、使い勝手的には、まだまだ難あり。
「TOP > 購入予定一覧」
「書籍購入の際の参考・・・」
といった、書籍情報に関係のないものが一番上に表示されてしまっているため、わざわざ下にスクロールさせないと、見たい情報を見ることができません。
また、書名・著者などの情報も改行とかされていないため、非常に見づらい状況になっちゃっています。

ここはまだ改良の余地ありのようです。



デザイン的な面を整えない限り、DB&PHPを使ったデータ処理側を作ったとしてもダメなので、当面はスタイルシートとの戦いの日々が続く予定。
ただこの段階で上にも書いたとおり
『根本的なところから間違っている』
ような気がしてならないんですよね・・・。
CSSによるデザイン設計のさわりは理解できてきたので、この辺りで一度見直ししておいた方が、後々のダメージが少なくて済むのかも。

しかし、このペースで作成していったとして、納得のいくサイトができるのって、果たしていつになるんだろうかなぁ・・・ (´Д`lll)




●今回の修正点●
・詳細画面を追加


修正した結果の画面
サイト全体用CSS:NewStyle.css
購入予定専用CSS:kounyuu.css
スポンサーサイト

Comment

[250] 的はずれだったらすみません。

--------------------------------
<table ID="result">
 <tbody>
  <tr>
   <td class="CAPTION">書籍一覧</td>
   <td class="page">10 件中 1 - 2 件目</td>
  </tr>
 </tbody>
</table>
--------------------------------
 
動作未確認だけど、これ+軽くいじってみて出来ないかな?
 
<p>全体に対して右寄せ・左寄せの指定は出来るけど、<p>のなかにある二つのテキストに対して別個に右寄せ・左寄せを指定することは出来ないと思う。
(Wordにおいて一行に対しては一つの「どっち寄せ」しか指定出来ないのと同じように)
 
一方で表形式にして、2つのセルに分割し、一つ一つのセルに対して個別に「どっち寄せ」の指定が出来るのではないか?という仮説。
(Excelなんかでもそうだよね)
 
http://www.mozilla.gr.jp/standards/webtips0015.html
 
ブロック要素、インライン要素という概念について軽くさらってみると良いかも。このURLには記載ないけど、俺の勘では多分tdもブロック要素ではないのかなぁと(あくまでも推測ね)。

[251] HTMLの方か・・・

なるほど・・・確かに
「一行に対しては、一つの「どっち寄せ」しか指定できない」
だよね。
そうなると、CSSというよりもHTML構文での使い方が間違っているんだろうなぁ。
<p>タグってあまり使ったことなかったので、イマイチ使い方を理解していない・・・。

tableを使えば確かに出来そうだなぁ~とは思っていたんだけど、tableでのデザインは
「あまりやらないほうが良い」
という前提でいたため、考えないようにしていたんだよね。
でもデザインできないよりは、例えtable使ってでも、デザインできたほうが遥かにマシか・・・。


ブロック要素、インライン要素あたり、再度勉強しなおしてみるよ。
コメント、ありがとう!(^o^)/

本当なら仕事中をほっぽり投げてでもやりたいくらいなんだが・・・後が怖いので、今日戻ったら早速やってみます!(笑)

[253] 携帯電話対応かー

脱線しまくりだけど、携帯はセッション維持が伴うページ遷移が結構面倒だった_| ̄|○ノシ


http://www.nttdocomo.co.jp/p_s/imode/make/

テストに実機使ってるみたいだけどこのサイトの
「ツールダウンロード」→「HTML」
と進むと、iモード用のシミュレータがあります。
テストいっぱいでパケット代かさむのを防止してくれますだよ。d(・x・;)

[254] 以前コメントをいただいた者ですw

パソコン不調で、ずっと戦っていたのですが、とうとうあきらめて、XPを購入しました☆
というわけで、全然ブログを見ていなくて、コメントいただいたことにも、気づかず申し訳ありませんでした。

初心者ツールですが、http://www.higaitaisaku.com というサイトの、Biginner Tool というものです。
遅くなって、ごめんなさい^^;

また、遊びにきますね^^

[256] 携帯対応

■ Mahny殿
そ、そうなのですか・・・
セッション維持は、PHP側ですんなりできるもんだとばかり思っていたので、そこまで詳しく見ていませんでした、ムムム・・・。
先行きが不安。

シミュレータについての情報、ありがとうございます。
すっかり忘れておりました。(笑)
さっそくダウンロードして、確認の際に使用しております。
i-mode用の他にもAU端末用とかもあったりして、シミュレータもなかなかそろっているんだなぁ~とちょっと感心してしまいました。

これでパケット代も安心です!(^o^)/



■ たられば殿
XPを購入されましたか。
具合も直ったようなので、良かったですね。
PCはやっぱり安定していないと、使い物になりません。(^^
私のPCも修復を何度も試みて見ましたが、あきらめて新HDDとOSを新しく買いなおしました。
突然の出費はイタイけど、ここ数ヶ月見ることができなかった
「凪」
が、我が道場PCござるに訪れているようです。

しかし、いろいろなものがあるんですね~。
自分はある程度、PCを使いこなしているつもりでおりましたが、こういった初心者向けのものを読んでも、
「へぇ~、こんなモノがあったんだ」
と驚かされるものがいくつかありました。
初心者向けというのもバカにできないなぁ~って思い知らされたり。

コメントの投稿


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

Trackback

http://takenosuke.blog32.fc2.com/tb.php/227-08890b87

«  | HOME |  »

プロフィール

武之介(たけのすけ)

Author:武之介(たけのすけ)
悪ノリ大好き!でも小心者ナンデス。
そんな武之介の内なる声を余すところなく書き殴ったブログ!
表の仮面(笑)でもある、「上原半兵衛道場」もヨロシク!!
メールはこちら


follow takenosukenagao at http://twitter.com


カテゴリー


最近の記事


最近のコメント


最近のトラックバック


月別アーカイブ


ブロとも申請フォーム

この人とブロともになる


ブログ内検索


RSSフィード


リンク

このブログをリンクに追加する