ウェブネタ

Web制作で活用できるテクニックやインターネットに関する情報など

以前に「MTの「改行を変換」をHTML5に対応させる」という記事を書いたんですが、これは「改行を変換」フォーマットで書かれたウェブページやブログ記事から余計なp要素・br要素を削除するというアプローチを取っていました。

この方法では、pre要素などの「改行はするけどp要素・br要素を追加して欲しくない」場合にはスマートに対処出来ませんでした。

例えば、Google Maps などのスクリプトをscript要素で本文内に記述した場合、大量にp要素・br要素が追加されてしまい、正常に動作しません。

そこで、視点を変えて、「改行を変換」フォーマットを使用せず、p要素・br要素を自動挿入する方法を紹介します。

何気にずっと頭を悩ませてた問題。display: inline;display: inline-block; で要素をインライン化したときに、改行が半角スペースになり、隙間となる問題。あれがスッキリ解消できました。

HTMLでこんな感じ↓にしてる人は必見です。

<ul><li>list item</li><li>list item</li></ul>
  
<ul><li>
  list item
</li><li>
  list item
</li></ul>
  
<ul><!--
  --><li>list item</li><!--
  --><li>list item</li><!--
--></ul>

ウェブページのレイアウトで、適度に余白を入れるのは重要ですね。そして、余白を作るためにCSSのmarginプロパティを指定するのが一般的です。

でも、marginプロパティって意外とやっかいだったりします。marginの相殺を念頭に入れないと、想定したよりも大きい余白や小さい余白が出来ちゃったりするんですよね。

IE7をサポートする場合、hasLayoutによって、marginが相殺されたり、されなかったりします。

そこで、marginの相殺自体を起こらなくする方法を紹介します。

CSSをjQueryで変更する方法を調べたので、サンプルソースと共に忘れないようにメモしておきます。

CSSの変更がページ移動後も反映されるようにする為には、Cookieを使用するのが一般的だと思います。ただ、プログラムを得意としない人(僕)にとって、Cookieの操作ってちょっとややこしそう。そんな人でもCookieを簡単に利用できるようにするのがjquery.cookie.jsプラグインです。

jQueryとjquery.cookie.jsを使用したら、結構簡単に実現できました。

メールフォームを作ってて、こんなケースにぶち当たった。

  • 必須入力ではない。
  • 複数の項目に分かれている(配列)。
  • 配列が全て空かどうか判定したい。

それで、調べてみたところ「PHPで配列のすべての値が空なのか確認する - Develog - Webアプリケーション、インフラに関する記録」という記事を見つけたけど、しっくりこなかったので、色々調べてみました。