物忘れがひどくなるのは年齢のせい？
たま～にHTMLやCGIをいじってページを作るのですが、とにかく忘れているんですよね。検索すれば何でも出てくるのですが、記憶しておくに越したことはないです。
というわけで、今日忘れていたこと２つを復習して記憶に定着させたいと思います。ただし、記憶が定着しやすいのは、寝る直前のことだとか。ん～夜はまだまだ先だ。
ショップサーブカートボタンをオリジナルページへ埋め込む
ショップサーブのオリジナルページが作成できる機能を使って、スマホ用ショッピングサイトを作っています。というのも、ショップサーブのモバイルのあれ、使いにくいんですよね・・・ま、HTMLわからない人にはいいんですが、HTMLのすいも甘いも知り尽くすとちょっとね。
さて、カートタグです。通常は一行じゃないんです。<form>はいくつかのタグのセットなんで、通常のHTMLやCSSより覚えにくいです。リンクだけでもいけるんですが、これだと数量やオプションの選択ができない。にするとボタンがダサすぎる。
調べてみると「CSSを使ってボタンを画像化する方法」紹介されていました。「これはカッコいい！CSSでこんなことができるんだ！」と大喜びで採用しようとしたのですが、何度やってもうまくいかない・・・原因不明。
結局、<input type=”image” src=”./****.jpg”>という昔ながらの方法にしました。なぜだ・・・
画像のテキスト回り込み
つい「iimg align=”left” hspace=”2″」なんてやってしまいます。これでも一応表示はされるけど「終わったタグ」なんで、できれば使いたくない。最新のHTML5で行きたいって思うから時間がかかってしまいます。
さて、テキストの回り込みは「float:left」を使います。これだけでは画像にテキストがべたっとくっついて見栄えが悪いので余白を作ります。CSSはタグに直接書く方法と外部ファイルに書く方法がありますが、今回は直で書きます。
こんな感じです。
<img src=”./***.jpg” style=”float:left;margin-right:1em;>
で、これで終わらないのがCSSのややこしいところです。「float」の解除をしないといけないんです。画像にflaotさせたままにすると、後続のモノすべてが画像に回り込んじゃいます。
解除するところで、<p style=”clear:both;”>を入れます。bothと入れることで、leftもrightも解除できる仕組みでございますな。
ま、このように一度は憶えてるはずのことを、調べながら「ああ、こうだった！「」なんて作業をすすめるのもなかなか楽しいものです。
