こんにちは！最近ニコ生のアニメ一挙放送にハマっているSEの岸沢です。
最近見たのはマクロスFなんですが、もう５年以上前の作品なんですね。
マクロスシリーズでオススメはマクロス７です。
主人公が一切戦わず、戦場で歌っているといった変わった内容で、はじめは「なんで戦わないんだ」と作品にクレームが入ったようです。
その後、主人公がとあることをきっかけに武器を使ってしまう事があったのですが、逆にクレームが入ったしまったといった魅力的な作品です。
マクロスシリーズの開始は1982年なのでかなり昔のアニメシリーズなんですが、現代まで続いているのはすごいですね。
WEBの業界でも昔の技術が注目をあびることも多いです。
そんな中でもJavaScriptはJQueryなどの登場で注目を浴びている技術です。
10年以上前にJavaScriptを利用してブラウザでゲームを作って遊んでいたのを思い出します・・・。
そんなわけで、JQueryを活用した便利な技を紹介したいと思います。
デザイン上ではカッコ良かったのに、現実は・・・
WordPressなどのCMSの場合、文字数が決まっていないためレイアウトに苦戦します。
ボックス型のレイアウトにした場合、文字数によって高さがガタガタになってしまいますよね。
文字数を予測してHeightを指定することも出来ますが、文章が短かった場合不要なスペースが空いてしまいます。
そんな問題を解決してくれるJavaScriptを紹介します。
CMSを導入した場合、文字数や画像サイズなどあらゆることを想定してデザイン・HTMLコーディングをする必要があります。ただし、どんな記事が入ってくるかわからず、ワイヤーフレームやデザインではサンプルテキストで作ってしまいます。
しかし、実際に運用してみると・・・理想とはかけ離れたレイアウトになってしまうことがあります。
現実では、テキスト文字数がバラバラで、レイアウトが崩れてしまいます。
CMSでなければ、文字が決まっているので高さを調節してサイトを作れますが、CMSが導入されているページではそんなことは出来ません。
しかし、jQueryAutoHeight.jsを利用することで、そんな問題も簡単に解決してくれます。
ダウンロード方法
以下からダウンロードしてみましょう
https://github.com/tinybeans/jQueryAutoHeight/releases
設置方法
導入は簡単です。
Jqueryを読み込んだ後、jQueryAutoHeight.jsを読み込むだけで利用できます。
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jQueryAutoHeight.js”></script>
<script type=”text/javascript”>
jQuery(function($){
$(クラス名).autoHeight();
});
</script>
利用方法
利用方法も簡単です。先ほど設置したJSに、揃えたいボックスのクラス名を記述するだけです。
あら簡単。自動的ボックスの最大の高さを取得して、各ボックスの高さを揃えてくれます。
ん・・・？
二行目に無駄な空白が多い？
大丈夫です。
次に、行ごとに高さをそろえる方法を説明します。
上記のようにオプションを記述することで、行ごとに高さを揃えてくれます。
今回の例は３列のため、columnに３を指定しています。列数に合わせて値を変えてください。
簡単ですね。
このようにJqueryを利用してCMSから登録された情報に合わせて、CSSを調整することで。
デザイン的にも美しいサイトを作ることが可能です。
今後も制作に困ったときに解決してきた便利なネタを提供していきたいと思います。
