2012/10/12

ブロック要素とインライン要素

SEO的にはまだまだわからない事だらけですが、とにかくW3Cに準拠したhtmlとcss2は書けると思っていました。
むしろ人より得意だと思っていました。

ブロック要素はその中で改行できるもの、インライン要素は中で改行できないもの。
そう思っていました。
某格安WEBスクールでは確かそう習ったはずです。

で、ブロック要素の中にはブロック要素もインライン要素も含む事ができると認識していました。

なのに！

今日、こんな風にhtmlを書いたんです。

<p>
この商品の4つの大きな特徴は
  <ol>
    <li>うまい</li>
    <li>やすい</li>
    <li>はやい</li>
    <li>でかい</li>
  </ol>
です。
</p>

p {
  margin-left: 2em;
}

<p>も<ol>もブロック要素で、ブロックの中にブロックを書くのは当然だと思っていたので何も気にしませんでした。
pタグは左に2文字分マージンを作ったので、これら全体が2文字分右に寄せられて表示されると思うわけですね。

ところがブラウジングしてみると、
「です」
だけ左のマージンがない。

FireBugで見てみると、どうやら次のように解釈されているようです。

<p>
この商品の4つの大きな特徴は
</p>
  <ol>
    <li>うまい</li>
    <li>やすい</li>
    <li>はやい</li>
    <li>でかい</li>
  </ol>
です。
<p></p>

と。
なんだこれは！ふざけんな！勝手にpを閉じるな！だいたい最後の無駄なpはなんだ、と。

んで当然の様にtwitterでつぶやくわけですよ。
「ブロックの中にブロック書いたのにおかしい」という趣旨の投稿です。

するとやはり天才集団である僕のフォロワーは早くて的確なお返事を下さるわけです。

<p>にはインライン要素しか内包できないよ

と。

えっ？(°д°)
(World Wide Web Guideを紹介して頂きました。)

まじかよー！
しらなかったよー！
なんだよー！
そもそも「内包できる」なんて概念なかったよー！
ブロックかインラインか(インラインブロックか)しか考えてなかったよ－！

(いまこのブログをご覧の)皆さんから見たらたったこれだけの事なんですが、もう本当にいろいろカルチャーショックで、恥ずかしかったし悔しかったし、でも新しい事知って嬉しかったし、明日も仕事だけどまた頑張ろうって気になりました。

今日も協力してくれた
@k_michiくん、@_yukari_reさん、@kb_webさん(お声かけくださった時間順)、ありがとうございました。

カテゴリー: front-end, エンジニア | コメントする
2012/10/02

EC-CUBEで番号つきリストを作るときの注意

2.11系を使ってると、reset.cssに

ul, ol, li{
    list-style: none outside none;
}

と書かれているので、番号つきリストを作りたいときは、クラスやIDを与えて自らlist-styleを書かなければいけません。

で、

<div id="hoge1">
  <ol>
    <li>リスト</li>
  </ol>
</div>

div#hoge ol{
  list-style: decimal;
}

としたんですよ。
普通の番号つきリストを作りたかったので。

でも振りたい番号が表示されない。
なんで？
FirefoxでもChromeでもうまくいかない。

順番の問題？
それならと !important つ付けてみたりしても全然だめ。

そう、賢明な読者の皆さんはもうおわかりでしょう。

ul, ol, li{
    list-style: none outside none;
}

と、liまで指定してある物を覆したいのに、olにばかり指定をしていたのです。

バカみたい。

でもアツくなって視野が狭まってるときにはわからないもので、30分かけてわからなかったので帰りました。
ご飯食べて家でやり直したらすぐにわかりましたもの。

みんな、EC-CUBEでリストを作るときは気をつけてね！

twitterでアドバイスを下さった
@_yukari_re さん、 @sou_lab さん、ありがとうございました。

アホな悩みに付き合わせてすみませんでしたｗ

カテゴリー: blog | コメントする
2012/09/13

楽天商品一括登録

商品名やポイント変倍期間などを一気にたくさん更新するのに便利な楽天商品一括登録。
エクセルで作ったcsvファイルをftpでアップロードするだけで後は自動的に楽天内で処理してくれるから便利。

そんな一括登録にも落とし穴が！
昨夜自宅(Mac)で急遽商品名を更新しようとしてもなかなかうまく行かない。
コントロールカラムに”u”って入れてるのに
「コントロールカラム欄に入力可能な文字はn（新規）、u（更新・変更）、d（削除）だけです。
※オークション商品の一括登録では、u（更新・変更）は入力できません。」
と言われて弾かれてしまう。

昨日知ったのですが、アップロードするcsvは改行コードがLFでないといけない模様。
テキストエディタで改行コードをCRからLFに変えたらできました。

これだけのことに20分くらい取られたぜー。

という忘備録。

カテゴリー: Work, エンジニア | コメントする
2012/08/30

Tail’z

Tail’z(テイルズ)というバンドと仲良くさせてもらっていて、昨日はTail’zメンバー宅でのホームパーティーに呼んでいただきました。

先日ここで書いた新しいバンドも、Tail’zの壬菜さんのご紹介なのです。

さてこのTail’z、ファンへのサービスがとても手厚いのです。
ライブに行けばドリンクを一杯ごちそうして下さったり、打ち上げではお客さんが退屈しないように話題に気を遣ったりと。

インディーズバンドなら当たり前と言えば当たり前なんですけど、例えば「こいつからぼれるだけぼろう」なんていう考えは微塵も感じない。

次は秋田に遠征も決まってるような大物なのに、傲りも感じないし、素晴らしいバンドなのです。

ちょっと有名になったくらいでファンの一人を邪険に扱うようなバンドは是非見習うべき。

カテゴリー: band, music, 生活 | コメントする
2012/08/24

EC-CUBEで税込価格を元にポイントを付与する方法

公開中止

カテゴリー: PHP, Work, エンジニア | 2件のコメント
2012/08/22

EC-CUBEの購入完了画面に注文番号を載せる方法

たまにはWEB屋らしい話題を。

仕事でEC-CUBE(2.11.3)を使ったお店を運営していまして、某アフィリエイトと提携させるために、購入完了画面に注文番号を表示させる必要があったんです。
ところがどうやら complete.tpl には注文情報が受け渡されていない事がわかり、簡単にはできない事がわかりました。

と言うわけで、/data/class/pages/shopping/LC_Page_Shopping_Complete.php をいじって、complete.tpl に注文情報を渡させましょう。

LC_Page_Shopping_Complete.php ないに action() という関数があるので、この関数に以下の3行を書き足します。
unset($_SESSION[“order_id”]);より前に書いて下さい。

$objPurchase = new SC_Helper_Purchase_Ex();
$arrOrder = $objPurchase->getOrder($_SESSION['order_id']);
$this->arrOrder = $arrOrder;

これで、テンプレート側(complete.tpl)で、
<!–{$arrOrder.order_id}–> と書けば呼び出す事ができます。

カテゴリー: PHP, Work, エンジニア | コメントする