シングルカラムで本文の最大幅を越えて内部の要素を広げる-jQueryなし

シングルカラムでは、コンテンツ部分の横幅を制限しなければ際限なく広がってしまうため、それぞれのサイトごとにmax-widthなどで最大値が設定されています。

結果として、PCのブラウザでは左右に大きな余白ができる場合があります。

この時、例えばjsのコードなどを本文名に記載した際には「左右に余白があるのに広げられず、狭い」となってしまう場合があります。

そこで、シングルカラムのコンテンツ幅を無視して左右に拡張できる仕組みを作りました。

実現したいこと

冒頭と重複しますが、実現したいことは以下の通りです。

• シングルカラムのサイトが対象
• シングルカラム内の要素を任意で指定し、コンテンツ幅を越えて横に広げる

いくつか前提や注意点があります。

• jQueryは使わない
• IE8以下は無視
• コンテンツ部分にoverflow:hidden;を使わない

jQueryを使えばIE8以下でも大丈夫だと思いますが、逆に言えばIE8がいらなければjQueryもいらないので、軽量化になるかなと。

コード

前提となる構造は以下の通り。

<div id="page">
 <div id="main">
  <p>#mainに最大横幅を設定している状態</p>
  <div class="expandbox">
   ここに広げたい要素を入れる
  </div>
  <p>#mainの制限を越えて、上の要素が横に広がる</p>
 </div>
</div>

.expandbox というクラスを持ったdivで囲むことで動くようにしています。

実際には大したことをしているわけではありませんが、以下がコードです。

function setElement() {//拡大用関数
 var wrapWidth = document.getElementById('page').offsetWidth - 50;
 var halfWidth = wrapWidth / 2;
 var elements = document.getElementsByClassName('expandbox');
 for( var i=0,l=elements.length; l>i; ++i ) {
  var element = elements[i] ;
  element.style.width = wrapWidth + 'px';
  element.style.marginLeft = '-' + halfWidth +'px';
  element.style.left = '50%';
  element.style.position = 'relative';
 }
};
//ページ表示時に関数実行
window.onload = setElement();
//ブラウザリサイズ時に関数実行
var resizeTimer;
var interval = Math.floor(1000 / 60 * 10);
window.addEventListener('resize', function (event) {
 if (resizeTimer !== false) {
  clearTimeout(resizeTimer);
 }
 resizeTimer = setTimeout( setElement(), interval);
});

仕組みとしては、positon:relative;で左から50%の位置に対象要素を動かし、指定した大外の枠(ここでは#page)の幅の半分をマイナスマージンで戻しているだけです。

var wrapWidth = document.getElementById('page').offsetWidth - 50;

上記の50は調整用に設定した値で、#pageの幅いっぱいだとそれはそれで窮屈なので、左右に25px(計50px)の余白を作るためのものです。

リサイズ時の留意

//ブラウザリサイズ時に関数実行
var resizeTimer;
var interval = Math.floor(1000 / 60 * 10);
window.addEventListener('resize', function (event) {
 if (resizeTimer !== false) {
  clearTimeout(resizeTimer);
 }
 resizeTimer = setTimeout( setElement(), interval);
});

上記は、リサイズ系の動作でよく使われる（と思う）処理です。

少しでもウィンドウを狭めると処理が実行される場合、負荷がブラウザへの負荷が大きくなりますので、その回避策として、リサイズの動作が終わってから一定時間経過後に処理を開始する方法です。

例

以下が例です。

3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647093844609550582231725359408128481117450284102701938521105559644622948954930381964428810975665933446128475648233786783165271201909145648566923460348610454326648213393607260249141273 

結び

シンブルカラムでしか使えませんし、相当にデザインを破壊する見映えになりますが、狭い範囲でちまちま横スクロールする苦痛を考えれば、ありかなと。

Twitter

Hatena

Facebook

Pocket