CSSレイアウトで少々面倒なブロック要素の高さ揃えも、MJLを使えば簡単だ。親要素に「equalize」というクラス名を設定しておけば子要素の高さを自動的に揃えてくれる。たとえば、よく見かける2カラムのレイアウトの場合、次のようにシンプルに書けばいい。

クラス名に「equalize」を指定するだけで、右の画面のように自動的に左右の高さを揃えてくれる

<div id="container" class="equalize">
<div id="menu"> <!--左カラム-->
<ul>
<li>メニュー1</li>
・
・
</ul>
</div>
<div id="main"> <!--右カラム-->
<h2>見出し</h2>
<p>本文</p>
</div>
</div>

　簡単・便利に使えるMJLだが、さらにありがたい点は、jQueryやprototype.jsといった他のJavaScriptライブラリを必要とせず、単独で動くこと。しかも、他のJavaScriptライブラリとも干渉しないように設計されている。

　スタンダードなWebサイトの制作を効率的に進めたい――。MJLはそんなときにイチオシのJavaScriptライブラリだ。ミツエーリンクスのWebサイトでオープンソース（GNU GPL Version 3）として公開されている。分かりやすいドキュメントも用意されているのでぜひ使ってみよう。

ツイートする

カテゴリートップへ

この記事の編集者は以下の記事をオススメしています

• JavaScriptライブラリで作るリッチUI（まとめ）

• YUIでも作れるようになった！Amazon風インターフェイス

• ブロックを一発で揃えるシンプルなJavaScript

• デザイナーにオススメ！JavaScript滑らかメニュー

• これは便利だ！Excel→Table化するjQueryプラグイン

• 3分でできるJS＋CSS「角丸」テクニック

関連記事

• iBooks AuthorでHTML5の電子書籍作ってみた

• HTML5のゲーム開発を効率化！国産ライブラリー

• PhoneGapでiPhoneのコンパスアプリを再現

はてブ注目ランキング

1. 50代でも分かったHTML5の基礎知識730 users

2. 10分でわかる！ jQuery Mobileのキホン94 users

3. iBooks AuthorでHTML5の電子書籍作ってみた76 users

4. HTML5要素のブラウザー実装状況を調べてみた38 users

5. 本店と楽天を使い分け、ブランディングを強化23 users

6. 40分で覚える！jQuery速習講座2211 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2136 users

8. もう配色には困らない！「Adobe Kuler」1681 users

9. 30分でできる！Webサイトを高速化する6大原則1497 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1215 users

最新記事

• HPのパソコン事業担当者、アップルについて言及

  

• SRTも使える1万円台の安価なZ68ベアボーンが今週発売予定

  

• 年に2回のワンフェス美少女フィギュア祭り！　企業ブース【その3】

  

• デュアルファンのお買い得CPUクーラー「Contac 39」が週末発売

  

• デル、23型IPS液晶「U2312HM」特別価格キャンペーン