BLOG﻿メニューとウィジェットFacebookTwitter検索:ABOUT当サイトは株式会社アートグラフィック新潟WEB制作ブログです。WEB制作にまつわることや新潟の情報など投稿していきます。会社のホームページはこちら♪ご注意:記事は当時の情報を元に書かれておりますので、仕様が変更され記事と合わない事がございますので、その際はご容赦願います。CSS背景画像を下に落とす。新年明けましておめでとうございます。本年もAGNチームブログをよろしくお願いいたします。今年1発目は軽い小ネタから。重いと胃もたれしちゃいますからね。昔固定幅で作ったWebサイトをHTMLや画像はそのままにレスポンシブ化したいという案件で使った小技です。昔(おそらくスマートフォンの出たてかそれくらい)固定幅で作られたそのサイトは画像多めのサイトで、フロートを駆使してなおかつちょっとでもレンダリング速度を上げたいのでいける画像は背景にして利用していました。ボックス全体がサイト幅で、そのうちコンテンツが50%、残り50%は画像に見えるけど実は背景、みたいなことをフロートを駆使しつつ作っていたわけです。※だからフロートでつまづく人は大概背景が表示途中で切れちゃうことに大きな悩みを持っていたのです。Clearfixの歴史を振り返ればみんながフロートとどのように戦ってきたかわかるかもしれません。そのサイトは単純な角版の画像がほとんどなくて、複数の画像を斜めに組み合わせてみたり、ちょっと凝った画像が多かったのです。それでも制作された当時と違って、background-positionがより使いやすくなったり(オフセット記法が可能になった)、bacground-sizeが使えるようになったりしているので、その辺を使ってなんとかレイアウトしていこう、という感じでした。cover;が使えなかった頃はJavaScriptで実装したりしてたんですよ。角丸を画像で組み立てていた頃に近いですね...実際にやってみる考え方はよくあるレスポンシブWebデザインの考え方でいきます。(右側)にある背景画像をある幅以下の時はコンテンツの下(上)にレイアウトしましょう、というやり方です。方法1:背景画像じゃなくて擬似要素で配置する。background-imageでしていたものを擬似要素(::before、::after)のcontentで配置しようというわけです。block;にでもしておけば勝手に下に落とせますからね。このやり方だとうまくいかない場合があるのです。contentプロパティで配置された画像はサイズの調整が難しいのです。いうのも、contentプロパティで配置された画像はサイズの指定ができないのです。擬似要素にサイズ(width、height)を指定してもだめ。どんな時に困るかというと、もともとの画像が画面幅より大きかった時。これ、画像が見切れます。この問題そのものに対する解はネット上でもよく見かけますが、contentプロパティで配置するのではなくて、擬似要素のサイズを指定してその背景が画像として使う、ということかもしれません。方法2:背景画像でいく今日触れたいのはこちら。背景画像として使うけど、コンテンツと重なるのは嫌だ、というお客様のために。方法としてはpaddingで領域を確保してそこに背景画像を100%で表示させます。この方法のメリットはデバイス幅が変わっても比率を維持できる点です。領域を確保する領域を動的にpaddingを使って確保するためにpaddingを%で指定します。この方法でわかっておかなくてはいけないのは画像の縦横の比率(サイズではなくて)です。画像の縦横の比率のパーセンテージ分だけpadding-bottom(padding-top)を指定してあげます。600だったとします。これをコンテンツの下に背景用の領域を確保するためにはpadding-bottomに(600/800)*100%を指定してあげるのです。これでなんでうまいこと領域が計算できているかというと、これはpaddingの特性を利用しているのです。‘padding-bottom’の場合でも、生成されたボックスの包含ブロックの幅に対して計算されます。2.1で定義されていません。マージンプロパティとは異なり、パディング値の値は負であってはなりません。マージンプロパティと同様に、パディングプロパティのパーセンテージ値は、生成されたボックスの包含ブロックの幅を参照します。生成されたボックスの包含ブロックの幅に対して計算されます。計算は包含ブロック(ざっくりと親の要素)の高さから計算しているわけではないのです。包含ブロックの幅を元に計算するので上の式でいけるんですね。画像がもし親要素に対し幅100%だったとした時に、幅に対する高さの割合を求め、その分だけ親要素に余白(padding)を持たせることで、背景画像の領域が確保されたわけです。これはマップや動画を100%で埋め込みたい、という時と同じ考え方ですね。そんなに多様するわけではないけれど、まぁちょっとCSSのお勉強の小ネタ、ということで。cover;がうまくいかなかったことです。fixed;と一緒に使っているとダメみたいです。背景固定して全面画像みたいなことができないじゃないか...ちなみにこれはbackground-sizeを100vhにすることでやりたかったことに近くなったので今回はOKにしました。CSS背景画像を下に落とす。コメントを残すCSSだけでレスポンシブなタイムラインを作る先日制作した案件で、タイムライン(過去→未来)があったんですね。デザインがイラレで来ていて、さてどうしましょうか、と。画像でもOKなんですが、横長をタイムラインをスマホで見たら小さくて見えない。いって縦長の画像は作りたくない。※それなりに数があったので。それじゃCSSだけで実装しましょ、とういうことになりました。広い画面では横型、狭くなったら縦型にする項目数は変動するポイントごとに目印をつけるもちろん、まず一直線を引いて、その上に絶対配置でポイントを打つのもアリだと思います。今回は基本形を元にちょっといろいろしてみました。ついでにCSSがいろいろ汚染しまくって悪い見本みたいになってます。お目汚しですが、よかったらどうぞ。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">仙人。#f00;}やってることそんなに難しいことはしてません。displayを切り替えて、ボーダー引く場所を変えているだけです。block;でいいですね。ボーダーは左に引きました。横型の場合は、親要素をtableに、子要素をtable-cellにしてみました。(※flexでもうまくいくかもしれません。fixed;を指定して均等に割ります。文字や時間の長さに長短がある場合は子要素のwidthをパーセントで指定してあげればOKです。目印は子要素の擬似要素で。translateY(-50%);)します。最後の子要素だけは矢印っぽくしたいので、三角にしました。これは縦横で向きを変えてあげてくださいね。現在地は専用のクラスを振って文字色を変えました。【DEMO】にのっけた他のやつのコードも一応載せときますね。本当は背景を矢印っぽくするところまで行きたかったんですけど、パッと思いつかなかったので、とりあえず今回はここまで。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">煙になりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">煙になりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">煙になりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">煙になりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">仙人。class="timeline-content">じつはまだ学生でした。class="timeline-content">結構いい年です。class="timeline-content">Webはまだ大丈夫。class="timeline-content">スナフキンになりたい。class="timeline-content">仙人。日本語早期アクセスを試してみたことあれ?bxSlider動かない・・・いつも通りに設置したのになぁ。なんか書き間違えたかな?。コンソールを見るとなんかエラーしてますね。undefined(...)jQuery3.xになってload()がなくなった調べてみたら、bxslider.jsの中でload()が使われているのが原因みたいです。-stackoverflowうーん、load()はon('load',function(){})で書き換えればいいらしいですけど、プラグインファイル直接修正するのはちょっとなぁ。slick.jsと並んでスライダー系では使いやすくて大好きなプラグインなんですけど。bxSliderを使うときはjQueryは3.xになる前のバージョンなら動くので、そっちですかね。load()以外にも、いろいろなくなったり変わったりしているので参考サイトなどで見ておくといいかもです。-Qiitaでも動くときもあるよ?そうなんです。別な時にすっかり忘れててjQuery3.1.1使ってbxSlider入れたら普通に動くんです。あれれ、jQuery3.xだと動かないんじゃないの?動いてしまったのはこんなソースです。/></div></div>それではちゃんとbxslider.jsのエラー箇所をみてみます。入ってくるようですので、きっと一番はじめに表示されるアイテムのことですね。