背景画像を下に落とす。昔のサイトをレスポンシブに対応させる時

blog170112

今更ですが新年明けましておめでとうございます。
本年もAGNチームブログをよろしくお願いいたします。

さて、今年1発目は軽い小ネタから。いきなり重いと胃もたれしちゃいますからね。
昔固定幅で作ったWebサイトをHTMLや画像はそのままにレスポンシブ化したいという案件で使った小技です。

【DEMO】

固定幅の頃

昔(おそらくスマートフォンの出たてかそれくらい)固定幅で作られたそのサイトは画像多めのサイトで、フロートを駆使してなおかつちょっとでもレンダリング速度を上げたいのでいける画像は背景にして利用していました。
ボックス全体がサイト幅で、そのうちコンテンツが50%、残り50%は画像に見えるけど実は背景、みたいなことをフロートを駆使しつつ作っていたわけです。
※だからフロートでつまづく人は大概背景が表示途中で切れちゃうことに大きな悩みを持っていたのです。Clearfixの歴史を振り返ればみんながフロートとどのように戦ってきたかわかるかもしれません。

そのサイトは単純な角版の画像がほとんどなくて、複数の画像を斜めに組み合わせてみたり、ちょっと凝った画像が多かったのです。
それでも制作された当時と違って、background-positionがより使いやすくなったり(オフセット記法が可能になった)、bacground-sizeが使えるようになったりしているので、その辺を使ってなんとかレイアウトしていこう、という感じでした。
※全面に背景を引きたくてbacground-size : cover;が使えなかった頃はJavaScriptで実装したりしてたんですよ。そう、角丸を画像で組み立てていた頃に近いですね…

実際にやってみる

考え方はよくあるレスポンシブWebデザインの考え方でいきます。
メディアクエリで振り分けて、左側 (右側)にある背景画像をある幅以下の時はコンテンツの下(上)にレイアウトしましょう、というやり方です。よくあるやつですね。

方法1:背景画像じゃなくて擬似要素で配置する。

background-imageでしていたものを擬似要素(::before、::after)のcontentで配置しようというわけです。
それで擬似要素をdisplay: block;にでもしておけば勝手に下に落とせますからね。
ただこのやり方だとうまくいかない場合があるのです。

contentプロパティで配置された画像はサイズの調整が難しいのです。
というのも、contentプロパティで配置された画像はサイズの指定ができないのです。
擬似要素にサイズ(width、height)を指定してもだめ。どんな時に困るかというと、もともとの画像が画面幅より大きかった時。
これ、画像が見切れます。
さて、困った。

この問題そのものに対する解はネット上でもよく見かけますが、contentプロパティで配置するのではなくて、擬似要素のサイズを指定してその背景が画像として使う、ということかもしれません。

方法2:背景画像でいく

今日触れたいのはこちら。
背景画像として使うけど、コンテンツと重なるのは嫌だ、というお客様のために。
方法としてはpaddingで領域を確保してそこに背景画像を100%で表示させます。

この方法のメリットはデバイス幅が変わっても比率を維持できる点です。

領域を確保する

領域を動的にpaddingを使って確保するためにpaddingを%で指定します。
この方法でわかっておかなくてはいけないのは画像の縦横の比率(サイズではなくて)です。
画像の縦横の比率のパーセンテージ分だけpadding-bottom(padding-top)を指定してあげます。

どういうことかと言いますと、
例えば画像サイズが800 × 600だったとします。
これをコンテンツの下に背景用の領域を確保するためにはpadding-bottomに
(600/800)*100%を指定してあげるのです。

これでなんでうまいこと領域が計算できているかというと、これはpaddingの特性を利用しているのです。

The percentage is calculated with respect to the width of the generated box’s containing block, even for ‘padding-top’ and ‘padding-bottom’. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box’s containing block.

パーセンテージは、 ‘padding-top’と ‘padding-bottom’の場合でも、生成されたボックスの包含ブロックの幅に対して計算されます。包含ブロックの幅がこの要素に依存する場合、結果のレイアウトはCSS 2.1で定義されていません。
マージンプロパティとは異なり、パディング値の値は負であってはなりません。マージンプロパティと同様に、パディングプロパティのパーセンテージ値は、生成されたボックスの包含ブロックの幅を参照します。

https://www.w3.org/TR/CSS2/box.html#propdef-paddingより引用

大事なところは、
生成されたボックスの包含ブロックの幅に対して計算されます。
ここです。
計算は包含ブロック(ざっくりと親の要素)の高さから計算しているわけではないのです。
包含ブロックの幅を元に計算するので上の式でいけるんですね。
画像がもし親要素に対し幅100%だったとした時に、幅に対する高さの割合を求め、その分だけ親要素に余白(padding)を持たせることで、背景画像の領域が確保されたわけです。
これはマップや動画を100%で埋め込みたい、という時と同じ考え方ですね。

そんなに多様するわけではないけれど、まぁちょっとCSSのお勉強の小ネタ、ということで。

【DEMO】

蛇足ですが…

ちょっとハマったのが、iOSでbackground-size: cover;がうまくいかなかったことです。
これはbackground-attachment: fixed;と一緒に使っているとダメみたいです。
背景固定して全面画像みたいなことができないじゃないか…

ちなみにこれはbackground-sizeを100vhにすることでやりたかったことに近くなったので今回はOKにしました。
background-attachment: fixed;で背景固定して、background-size: auto 100vh;で。


CSSだけでレスポンシブなタイムラインを作る

teamblog_title161214

先日制作した案件で、タイムライン(過去→未来)があったんですね。
こういうのです。

timeline161214

デザインがイラレで来ていて、さてどうしましょうか、と。
もちろん画像でもOKなんですが、横長をタイムラインをスマホで見たら小さくて見えない。
かといって縦長の画像は作りたくない。※それなりに数があったので。
それじゃCSSだけで実装しましょ、とういうことになりました。

【DEMO】

やってみよう

条件

  • 広い画面では横型、狭くなったら縦型にする
  • 項目数は変動する
  • ポイントごとに目印をつける

もちろん、まず一直線を引いて、その上に絶対配置でポイントを打つのもアリだと思います。
今回は基本形を元にちょっといろいろしてみました。
けどあんまりうまくいかなかった。。。
ついでにCSSがいろいろ汚染しまくって悪い見本みたいになってます。
お目汚しですが、よかったらどうぞ。。。

基本形

HTML

SASS

やってること

そんなに難しいことはしてません。
displayを切り替えて、ボーダー引く場所を変えているだけです。
狭い画面では縦型なのでdisplay: block;でいいですね。ボーダーは左に引きました。
横型の場合は、親要素をtableに、子要素をtable-cellにしてみました。(※flexでもうまくいくかもしれません。)
それから親要素にtablelayout: fixed;を指定して均等に割ります。
文字や時間の長さに長短がある場合は子要素のwidthをパーセントで指定してあげればOKです。

目印は子要素の擬似要素で。
基本的には左上に絶対配置して、自分の大きさ分だけ移動(transform: translateX(-50%) translateY(-50%);)します。
最後の子要素だけは矢印っぽくしたいので、三角にしました。これは縦横で向きを変えてあげてくださいね。
現在地は専用のクラスを振って文字色を変えました。

【DEMO】にのっけた他のやつのコードも一応載せときますね。
本当は背景を矢印っぽくするところまで行きたかったんですけど、パッと思いつかなかったので、とりあえず今回はここまで。
年末進行でお忙しいと思いますが、みなさんお体に気をつけて頑張っていきましょう!

HTML

SASS


jQuery3.1.1でbxSliderが動かないこととGoogle Fonts + 日本語早期アクセスを試してみたこと

blog161110

あれ?bxSlider動かない・・・

いつも通りに設置したのになぁ。
なんか書き間違えたかな?。。。
161105sample_bxslider01

コンソールを見るとなんかエラーしてますね。

jquery-3.1.1.min.js:4 Uncaught TypeError: Cannot read property ‘indexOf’ of undefined(…)

jQuery3.xになってload()がなくなった

調べてみたら、bxslider.jsの中でload()が使われているのが原因みたいです。

うーん、load()on('load',function(){})で書き換えればいいらしいですけど、プラグインファイル直接修正するのはちょっとなぁ。
slick.jsと並んでスライダー系では使いやすくて大好きなプラグインなんですけど。。。
bxSliderを使うときはjQueryは3.xになる前のバージョンなら動くので、そっちですかね。
ちょっと残念。

load()以外にも、いろいろなくなったり変わったりしているので参考サイトなどで見ておくといいかもです。

でも動くときもあるよ?

そうなんです。別な時にすっかり忘れててjQuery3.1.1使ってbxSlider入れたら普通に動くんです。
あれれ、jQuery3.xだと動かないんじゃないの?
動いてしまったのはこんなソースです。

それではちゃんとbxslider.jsのエラー箇所をみてみます。

bxslider.jsの該当箇所

functionの第一引数selectorにはver preloadSelector = slider.children.eq(slider.settings.startSlide); が入ってくるようですので、きっと一番はじめに表示されるアイテムのことですね。

image . complete
画像が完全にダウンロードされた、または、画像が指定されなかったなら、true を返します。そうでなければ、false を返します。
<http://www.html5.jp/tag/elements/img.html>

ということなので、<・・・前略・・・>そのスライダーアイテムにsrc属性が指定されたimgもしくはiframeがあったら、<・・・中略・・・>、(※ここから)もし画像がダウンロードされてたらその画像をロードしてね、ここでload()って何よっていうエラーなんですね。
だから、最初のアイテムに画像が含まれていなければ、普通に動くということみたいです。
しかしiframeだと普通に動くな。。なんで??

Google Fontsで「はんなり明朝」とか使える!!

そんなことより(いや上のも大切なことですよ?)、これはすごい大ニュースなのでは??

Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。Google Fonts 早期アクセスでは、現時点で完全にはサポートしていないフォントを試験的に提供しています。

膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts 早期アクセスを通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。
Google Fonts + 日本語早期アクセスより引用

ということですから、完全にサポートされているわけではありません。
日本語の無料で使えるWebフォントが少ないっていうのは常々の悩みでしたし。
いろんなデバイスを考えた時に明朝体がうまいものがなくて、泣く泣く画像にしたりしてましたから。
「はんなり明朝」とか好きなフォントですし、嬉しいですね!

ただフォントによっては漢字のないものや、ひらがなもないものもあるのでその辺は要注意です。
漢字のない明朝系のフォントは、漢字部分はデフォルトフォントで表示されるみたいです。
なので、フォントファミリーに他の明朝体も入れておくといい感じになるかもしれませんね。

使えるフォント

  • M+ 1p
  • Rounded M+ 1c
  • はんなり明朝
  • こころ明朝
  • さわらび明朝
  • さわらびゴシック
  • ニクキュウ
  • ニコモジ
  • Noto Sans Japanese

漢字なし

  • はんなり明朝
  • こころ明朝
  • ニクキュウ
  • ニコモジ

ひらがななし

  • ニクキュウ

せっかくなのでbxSliderと新しい日本語WebフォントでDEMOを作ってみました。
よかったら見てみてくださいね。
jQueryのバージョンはjQuery3.1.1です!
ちなみに今回はスマホ意識してないのでPCでご覧くださいね(汗)

【DEMO】

参考サイト


まずはてっとり早くWebページを作ろう。CDNとCSSフレームワークとjQueryプラグイン

自分でWebサイトを作りたい、更新は自社で行いたい、Webの勉強を独学で始めよう。
思い立ったが吉日、書店に向かい分厚いHTML辞典を買ってくる。
これ、だいたい間違いなく挫折します。
せっかくその気になったのですから、Webって楽しいを体験してほしいのです。
ですので、今回はCDNを利用して外部ファイルを読み込み、極力手数をかけずにWebページを作ってみたいなと思います。
対象はちょっとならHTMLやCSSがわかるよ、という人向けになります。

今回は前置きが長いので、面倒な人はこちらから。

もしくはデモをどうぞ。

【DEMO】

挫折のわけ

何せHTMLをたくさん掲載してある本はとても分厚いです。
Webサイトに触れた事のない人には意味不明は記号の集合体であり、自分がそれをどのように使うのかの想像が難しいです。
そしてHTMLを覚えてもレイアウトはできません。レイアウトするためにはCSSの知識が必要となります。
今度はCSS辞典を買ってくるのでしょうか?
CSSをクリアしても、自分がよく見ているかっこいいホームページにはなりません。
見た目の装飾などはCSSでOKですが、動作的な部分になるとJavascriptを利用します。
簡単なWebページにだって、こんな風にたくさんの知識やスキルが詰まっています。
覚えなくちゃいけないことがたくさんある時、少なくとも私は挫折します。

お手軽に作ってみよう

CSSフレームワーク

グリットシステムというものがWeb界を席巻してもうかなり経ちます。
また今ではたくさんのCSSフレームワークと呼ばれるものがたくさんあります。
CSSフレームワークとはちょっと乱暴なまとめかたをすれば、デザインされレイアウトの方法を決めたCSS(場合によってはJavascriptやフォントも)をあらかじめワンセットにしてあるものです。
BootstrapやFoundationなどといったところが世界的にもとても有名です。
スマートフォンを始め、モバイル端末の対応はもはや必須のものとなりました。
CSSフレームワークの多くは、レスポンシブWebデザインと呼ばれる、現在主流の方法でモバイル対応しています。
ですから、CSSフレームワークを利用することで、モバイル対応のWebページを作る事ができます。

bootstrap_ss foundation_ss

CSSフレームワークは多くの人を助けてくれました。
CSSやHTMLが不得意な人にはその形式を、デザインの不得手な人にはある程度完成されたデザインを。
今回は数あるフレームワークの中からColiss様が紹介されていたBulumaというフレームワークをチョイスしました。
(※自分の勉強がてら)
Bulumaが他と違うのは、Flexboxという新しいCSSのレイアウトをメインにしたフレームワークであるという事です。

CDNを利用する

CSSフレームワークをはじめ、かっこいい動作をさせてくれるjQuery(Javascriptのライブラリ)のプラグインなど、世界中の多くの人が共通で利用するファイルを特定のサーバにホスティングしてみんなでそこを参照して使う。
WebサイトでCDNを利用するをなんとなく説明するとそんな感じでしょうか?(厳密には違うと思う)
GoogleやMicrosoftが公開しているCDNもあります。jsDelivrcdnjsといったところもメジャーです。
先ほど名前を挙げたBootstrapもCDNで利用できます。
使いたいプラグインやフレームワークの名前+「CDN」で検索すれば、たくさんのものが見つかるでしょう。

今回利用したもの

フレームワークはBulumaを、簡単にCSSのアニメーションを利用できるanimate.cssも利用してみましょう。これらはcdnjsから読み込みました。
jQueryを利用したスライダーを入れたいので、jQuery本体(これがないと動きませんよ?)とslickというプラグインを利用します。
Slickはjsdelivrからです。
アイコンもWebサイトを作る上でとても重要な要素です。
アイコン画像をいちいち用意するのは大変なので、Font Awesomeというアイコンフォントを利用しましょう。

せっかく外部ファイルを利用するので、フォントもGoolge Fontsを利用してみましょうか。

 

Webページを作ろう

上に挙げたものをhead内に読み込みます。

今回のページの内容

あくまでサンプルですが、今回はよくある構成の1ページ完結型にしました。
はじめにスライダーを設置して動きのあるコンテンツでユーザーを惹きつけます。画面幅目一杯のサイズで行きましょうか。
それから簡単なコンセプトを説明したら、サービス内容、会社概要、お問い合わせフォームと続きます。
せっかくですからマップも入れましょう。
SNSのアイコンもいれて、ユーザーとつながりが持てるようにします。
よくある感じですね。

あとはBulumaの書式に従って、どんどんHTMLを書いていきますね。
ここではBulumaの使い方の説明ではないので細かい事は説明しません。
ドキュメントを見ながらレイアウトを作っていきます。
カラム割やカラー、フォームのパーツデザインなどもあらかじめ決まっているクラスをHTMLに付与していきます。

手なりでつくってこんな感じです。

【DEMO】

ちょっと余白がおかしいですが、それなりになんとなくそれっぽいです。
HTMLの他にCSSとjQueryをちょっとだけ書きました。

Webフォントの読み込みとスライダーの微調整、それからGoolgeマップをレスポンシブWebデザインに対応しました。

jQueryの方はモバイル用のナビメニューの動作です。それからSlickの設定をして、スムーススクロールも入れときました。
スムーススクロールは絶対に必要なものではありません。

CDNやCSSフレームワークのデメリット

こんな感じでそんなに学習コストも時間もかけずに、あるものを利用するだけでそれっぽいWebページを作ることができます。
ただし、実際のサイト制作ではCDNやCSSフレームワークを使わないことも多々有ります。
メリットがあるのと同様デメリットもあるからです。

CDNのデメリット

まず第一に他の人のサーバとソースを利用しているということでしょう。
これは、そのサーバがダウンした場合やソースの書き換えが起こった場合に対処が遅れることがあります。
意図的なことではなかったとしても、バージョンアップで自分のHTMLやJavascriptとかちあってうまく動作しなくなることも考えられます。
また、他者のサーバにアクセスするので、読み込みのスピードもそのサーバのスペックに依存することになります。(※1)

※1 ただし、CDNを利用するメリットとして、多くの利用者がいるライブラリ等であればCDNから利用する事でキャッシュを利用できて速いというものがあります。

CSSフレームワークのデメリット

これはjQueryプラグインなども同様なのですが、例えば今回のDEMOくらいであれば、はっきりいってこんなにいらないのです。
フレームワークの機能で利用していないものがたくさんあります。
ある程度知識があれば、フレームワークなどを使わなくても再現できます。
利用していなくでもファイルは全て読み込みます。読み込む量が多ければ多いほどブラウザに負荷がかかりレンダリングが遅くなります。
少しでも、コンマ何秒でも速く、ということを考えると大幅に無駄です。

また、ちょっとだけ専門的な話をすると、CSSはSassやLess何度をコンパイルして作ることが多くなっていますが、CDN経由でフレームワークを読み込むと直接CSSを読み込むので必要な部分だけ利用したいという要望に応えられません。※2
不必要なCSSを打ち消すためのCSSが必要となり、ソースコードが長くなっていきます。

※2 多くのフレームワークでは、コンポーネントや機能によって分割されたSassファイルなどをダウンロードする事ができます。

なにより、一番の問題となるのはフレームワークを利用する事によってデザイン的に似通ったものができやすいことが挙げられます。
ボタンのデザイン、タイトルやメッセージ、フレームワークは綺麗に見えるようにデザインされています。
それをそのまま使うことで、他の誰かと似たようなデザインになってしまうことがあります。

というわけで、DEMOの左上に「add CSS」というボタンを用意しました。
HTMLはもとのまま、CSSのみを追加してデザインを変えて遊ぶ趣向です。
ボタンをクリックするともとのデザインと、CSSを追加したバージョンが切り替わります。
どうでしょうか?ちょっとは違うサイトに見えますか?

まとめ

このようにまったく違うデザインをしようとするとCSSなどの専門な知識はどうしても必要になってしまします。
そのために我々のようなWeb制作者もいるわけですし。
ですが、まずは作ってみる、自分でもやれるということを体験するという点において、CDNやフレームワークは大いに活用すべきかと思います。
自分で作ったものがブラウザに表示されるって楽しいんですよ。

最後に、こういうの使うときはちゃんとライセンスの確認をすることを忘れないでください。

参考サイト


jQueryとCSSで遊ぼう【初級者向け】

blog160912

今回はデザイン→できる!、HTML→OK!、CSS→なんとかいけるよ。。、Javascript→なんか怖い。。。っていう人向けです。

まずはサンプルページはこちら
作っているうちに遊んでしまいました。

最初に今回のお題です。(コードだけだけど・・・)
ボタンを押すと、アニメーションします。Webサイト使っていると当たり前に見るエフェクトですね。

これをちょっと前まではどうやっていたかというと、jQueryを使ってやっていました。

いまでは、このような使い方をすることが多いです。

jQueryの仕事はクラスを付与するだけ、残りの設定はCSSでやろう、ということですね。

jQueryを使う

CSS3がガンガン使えるようになってこういうことは当たり前になっていますけど、ほんのちょっと前はこんなことしてました。
Flashが使われなくなり始め、さまざまなJavascriptのライブラリの中からjQueryが頭ひとつ抜け出し、ブラウザが新しくなってCSS3で表現できることがずっと広がった。そういう経緯です。

jQueryの場合はアニメーションに限りませんが初めにセレクタを選ぶ。「$(‘selector’)」の部分ですね。
それから、そのセレクターの動作、英語の動詞にあたるような部分を書きます。「.fadeIn()」などです。
終わりは「; (セミコロン)」です。

上記の例では初めに「.button」が「on」すると言っています。
on()は、clickやmouseenterなどの動作の時に命令を発動させます。
例では「click」イベントが起こったときに、

の2つの命令をしています。
①では500ms(ミリセカンド)、つまり0.5秒かけてフェイドインをさせています。’ease’はイージングの指定です。
②は0.5秒かけてpadding-topとpadding-leftがそれぞれ50px移動します。これによって、ターゲットは右下に広がるように見えるはずです。

CSSのアニメーションについて

CSSでアニメーションするには2通りの方法があります。

1.transitionを使う方法と2.animationを使う方法です。
transitionは自動ではスタートしません。またループもできません。
しかしサイト制作上、よく使うアニメーションはこちらを使うことが多いです。
transitionとは「遷移」のことですから、ある状態からある状態へ移行する、というイメージでしょうか。

animationはtransitionに比べ、より細かいアニメーションの設定ができます。
キーフレームごとにプロパティの設定ができるので、自分の想像に近い動きを細かくつけていくことができます。

CSSアニメーションでの注意点

CSSのアニメーションでは基本的に数値や計算式で操れるものしかアニメーションできません。
例えばtopの値が0から50pxにすることも50%にすることも5emにするのもOKです。

しかし、margin-leftの値を0からautoにする、これはアウトです。
transitionを使って、margin-rightとmargin-leftをautoにし、ボックスをアニメーションさせながら中央に寄せるということはできません。
もちろん、text-alignをleftからcenterにしてもアニメーションはしません。
数値を扱うものしか使えない、とおぼえておいてください。
先ほどのボックスをアニメーションさせながら中央に寄せる、なんていうのはJavascriptで計算しながらやってもいいです。
※marginをautoして中央寄せのアニメーションはできませんが、同じ動きならおそらく下のコードで行けると思います。

発火

これまではjQueryを使ってアニメーションしていた動きはCSSでも表現できることがわかりました。
CSSのアニメーションを使う場合は何らかの発火イベントを利用することが多くなります。

例えば上述のクリックのイベントもそうですし、当たり前によく使うのはボタンの上にカーソルがのった時、などですね。このカーソルがボタンにのる動きはCSSのセレクタ(:hover)で判定できますから、CSSだけでアニメーションを完結させることができます。

しかし、CSSのセレクタだけでは判定できないものも多くあります。
例えばお申込みフォームで、「利用条件に同意する」のチェックボックスにチェックが入っていないと、送信ボタンが押せない仕掛けはよく見るでしょう。(あれはCSSなしでjQeury(Javascript)だけで実装したりしますが)
もしくは、要素が画面の上部にスクロールしたらアニメーションが始まるという場合もありますね。

こういう時によく使う方法が、アニメーションの動き自体はCSSで設定しておく。→何らかの条件を満たした場合にjQueryを使ってその要素にクラスを付与する。→アニメーション!みたいな方法です。

上記の例でいえば、.targetにはアニメーションする前の状態とtransitionでアニメーションすることが書かれています。
そして.target.animeには、.targetに.animeというクラスが付与された場合に起こる結果が書いてあります。
例えばクリックされたときに、例えばスクロールしてきた時に、jQueryのaddClass()を使ってクラスを付与してあげれば、アニメーションがスタートするわけです。

下の例では.buttonがクリックされたときに.targetにクラスactiveが付与され、アニメーションが始まります。

また、jQueryを使うならば、toggleClass()もよく使うのでおぼえておくと便利です。
下の例では、.buttonがクリックされたときに.targetにクラスactiveがなければクラスactiveを付与、あった場合はクラスactiveを削除します。

さまざまなジェネレーターやライブラリ

自分で実装するとなると、こんがらがる部分も初めのうちは多いと思います。
そんな人でもカンタンにアニメーションができるように、ありがたいことにjQueryにせよCSSにせよいろいろなライブラリやジェネレータが出てきました。
作者さんたちに感謝しつつ、こういうのを使うのも制作スピードを上げる上では有用だと思います。
Javascriptは怖いと思ってるデザイナーさんに、今回やったのはjQueryを利用して、クラスを付けたり消したりしただけです。
たった5行。慣れると便利ですから、ちょっとずつ触っていってみてくださいね。

参考サイト


【Flexboxと疑似要素】Flexboxやってみた!!そしたらはまった!うまくいかなかった!

こんにちは。
今年の新潟は例年より雪が少ないみたいです。
寒がりなので、はやく暖かくなるといいなぁ、コタツ欲しいなぁ、コタツで仕事したいぁと思うこの頃です。

blog160222

 

さて2016年1月12日でInternet Explorer 8・9・10 のMicrosoftサポートが打ち切られまして、CSSを書く人間としては一足先に春が来たのかもしれないなぁと頭の中がポカポカするわけですが、これまで古いIEさんに遠慮してできなかったことを、どんどんやっていかなきゃいけないわけです。

Internet Explorer 8・9・10 のサポート終了[過去記事]

そんな中、実案件でついにFlexboxを使う機会があったので、喜びの舞を踊ったときのお話です。今回は失敗談になります。ちょっとはまりました…

続きを読む 【Flexboxと疑似要素】Flexboxやってみた!!そしたらはまった!うまくいかなかった!


レスポンシブWebデザインに対応!Slick.jsを使ってスライドの サムネイルの位置を切り替える

年末からの体調不良からいっこうに立ち直れないyasaiです。先日の大寒波からみなさんは立ち直ったでしょうか?

さて僕としては2016年1回目のブログとなります。気合い入れていきます!!なんていうと、あとが続かなくなるので、今回はサラッと軽めに参ります。

160127

みなさんはサイト制作するとき、メインに使うスライダーって決めてますか?僕の本命は bxSliderslickです。この2本の使い分けって感じですねー

先日やらせていただいた案件で、メインのスライドエリアの横にサムネイル表示されるパターンのものがあったので、今回はその時のお話です。スマホの時はサムネイルを下へ移動します。

【DEMO】

今回はslickを使いました。slickの素敵な所は、画面幅にによってオプションを切り替えられるところですね。それと今回の案件でslickを使うことにしたのは、サムネイルの表示が別のHTMLとして書くことができて、CSSでの制御がしやすかったからです。

まずはslick.jsとCSSを読み込みます。jQueryのプラグインですので、お約束jQueryと一緒に。

 

※追記

slick-theme.cssは読み込んでいません。slick-theme.cssを読み込むと縮めたときに「戻る」ボタンの表示がうまくいかないようです。
一応回避方法を考えてみましたのでコメントをご覧ください。

 

スライダー部分のHTMLはこんな感じに。

スライダーのメイン部分を.slide-for、サムネイル部分を.slider-nav、矢印を.slick-nav-arrowsでマークアップしています。ひとつポイントなのが、.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしているところでしょうか。

 

動作のためのJavascriptをこんな感じです。

メイン.slider-forとサムネイル.slider-navの両方ともスライダーとして動作させます。
メインである.slider-forのオプションで「asNavFor : ‘.slider-nav’」として、.slider-navがサムネイルボタンとして機能するようにします。

サムネイルの方は、今回は4枚並ぶ形にしました。「slidesToShow: 4」
「the last carousel 」なんていうサブタイトルがついてるくらい、使いやすいカルーセルスライダーですなんですよね。

そしてslickのよいところ、オプション「responsive」でブレイクポイントを設定し、表示を切り替えます。今回は768pxをブレイクポイントとし、縦型のスライダーにするかどうかを切り替えています。その他詳しいオプションなどは、本家サイトをご覧ください。

 

見た目の方のCSSはこんなです。

ちょっと長いですけど、基本的にはたいしたことしてないですね。

メディアクエリで768px以上の場合はメイン部分を左に寄せて、サムネイル部分は天地のセンターをとりたかったので、絶対配置で右寄せにしているだけです。この時に幅を%で指定してあるから縮んでいくよ、というからくり。(imgをmax-width:100%にしています)
.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしたのは.slick-nav-arrowsをうまいこと配置したかったから、ということです。(.slider-navの位置に合わせて天地or左右のセンターをとりたかった)

スマホのときは特にfloatも絶対配置もしていないので、メインの下にサムネイルがやってくるという仕掛けになってます。
DEMOのブラウザ幅を広げたり縮めたりするを動作を確認いただけると思います。

 

今回はコードばかりでいつも以上にとっつきにくいですね。スイマセン・・・

 

追記(2016/04/25)

サンプルその2も作ってみました。よろしければこちらもどうぞ!

Slick.jsを使ってカルーセルスライダーの中央の画像を大きくする【レスポンシブWebデザインでもOK】


「CSSフレームワーク FOX CSS」に触れてみた

こんにちは、yasaiです。

今年の新潟は例年以上に秋を通り過ぎて冬が来ちゃいそうです。。。
寒いのは苦手なのです。(暑いのもダメだけども)

 

151028

DEMO

今月は当ブログのネタはなんにしようかしら、今日の夕飯はなんにしようかしらと悩んでまして、夕飯を大根ときのこの味噌汁にすることは決めたすぐ決まったのですが、何を書くかはさっぱり。
アウトプットって難しい。。。

そんな中coliss様の記事で触ってみたいものを発見したので、今日はそちらを。
そちらの記事はこちら。

「IE9+もサポート、CSS3 Flexboxを始める人にぴったりな極めてシンプルな使いやすいフレームワーク -FOX CSS」

FOX CSS」に触れてみましたよ、というお話です。

普段使っているフレームワーク

普段制作するときははだいたい「RESPONSIVE GRID SYSTEM」とプラスアルファ自分で使いやすくカスタマイズを追加したものを使っています。

もちろん「Bootstrap」系のものにも興味はおおありなのですが、グリッドシステムを使ったレイアウトさえあればOKということが多く、「RESPONSIVE GRID SYSTEM」の24カラムバージョンを多用しています。こちらはデザイナーさんとも話したうえで使っています。

はじめて触ったときはbox-sizing: border-box;の威力に感動してた頃です。

 

FOX CSSを触ってみようと思ったわけ

  • 軽量フレームワークであること
  • レイアウトだけのフレームワークであること
  • モバイルファーストな仕様で、「RESPONSIVE GRID SYSTEM」のように使えそうなこと
  • flexboxを使っていること
  • IE9+で対応しているらしいこと
  • 個別のsassファイルで切り分けられ、クラス名が他と重複しづらく他のcssへ干渉しないこと

flexboxを使ったレイアウトが今後主流になるのかなぁという感じですが、実案件ではIEへの対応(IE10ではベンダープレフィックス付き、IE9以下は非対応)や仕様変更が多くちょっと使うのが怖かったこともあって、使うのを少し敬遠してたところがあったのです。←ただの勉強不足のいいわけ

そんなときにcoliss様の記事を見て、IE9+なら良さそうだぞ!、ということでやる気になったのでした。

 

試しにざっくりやってみた

demo_FOXCSS

DEMO

ドキュメントを見ながら写真おいて、テキスト入れて。

基本的な使い方は自分の使いたい奴のクラスをどんどんつけていくパターンです。

float+絶対配置やdisplay:table-cell;を使ったレイアウトの良いとこどりな感じで、
flexboxを使ったレイアウトで、特徴的なのが「コンテンツを天地のセンター合わせ」と「コンテンツの並びをリバースできる」ってところですよね。

特に可変する高さの「コンテンツの天地のセンター合わせ」に関してはCSS挫折の一つの要素だったんじゃないかと思っているので、flexboxが敷居を下げる一つのきっかけになったらいいな、と思っているのです。

コンテンツの天地のセンター合わせ

 

.fx-rowで行を指定し、その中に.fx-col-00-xでボックスを作ります。00の部分は比率になってます。(デフォルトでは10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100)
また。xの部分はメディアクエリの切り替えのポイントです。(デフォルトではxs、s: 768、m: 940、l: 1200)

画像のボックスは.fx-top-center-xで上付きに、テキストは行に対して.fx-col-center-xを指定して「コンテンツの天地のセンター」にしています。

flexbox使って「コンテンツの天地のセンター合わせ」をやりたいがためにこんなコードですが、ここに関してはこうじゃなくてもできましたね(苦笑)

 

コンテンツの並びをリバース

上のセクションが普通の順番「テキスト+画像」、下のセクションが逆順に「画像+テキスト」になります。

違いは下のセクションでは.fx-rowに対して.fx-row-reverse-xを指定しているところですね。同じ内容で見た目だけ違うだけなので、html的には同じ並びになっていてコードの可読性が高くなりますね。

あと、このセクションでは.fx-rowに対して.fx-row-center-xを指定しています。これは中のボックスのトータルの水平の配置の仕方です。

.fx-row-start-x :左寄せ

.fx-row-center-x :中央寄せ

.fx-row-end-x :右寄せ

.fx-row-between-x :均等割り(端から端まで)

.fx-row-around-x :均等割り

.fx-row-between-xと.fx-row-around-xの違いを言葉で説明できないので、こちらはドキュメントで確認してください。

 

FOX CSSでDEMO作ってみて思ったこと

使い方は簡単に覚えていけそうです。
基本的にはクラスを付与していくだけなので、どのクラスがどのようになっているのかさえ覚えてしまえば、どんどん組んでいけます。

FOX CSSにはリセット関係があらかじめ入っています。この辺りは、sassフォルダの中に分けて入っていたので、自分の制作環境に合わせて使えそうです。
また、メディアクエリの切り替えのポイントなども「variables.scss」の中で定義しているので、こちらを編集したらOKそうです。
scssファイルが同梱されているっていうのは、個人的に高感度ポイント高いです!

 

気をつけなくてはならない点は、このフレームワークを使ってもflexboxの使い方(書き方)は覚えないですね、当たり前なんですけど。flexboxを使ったレイアウトの感触をつかむのにはとてもいいんだと思います。

後は社内的な問題ですが、gridの割り方がこれまで使っていた「RESPONSIVE GRID SYSTEM」とはちょっと違うので、FOX CSSを使う際にはまたデザイナーさん(ディレクターにも)と打ち合わせてお互いに何となくわかった状態で進めたほうがスピードアップにつながりそうですね。

もう少し自分で試してみて、習得できそうなら「RESPONSIVE GRID SYSTEM」と「FOX CSS」を案件に応じて使い分けていってもいいなぁと思っています。

ちょっと初めのさわりだけで、全然突っ込んだところがないんですが、今回は触ってみた感想ということで。

参考にさせていただいたcoliss様、ありがとうございました!!


「CSSだけでマウスオーバーでアニメーションしてくるキャプション」をやってみた

こんにちは。yasaiです。

シルバーウィーク突入ですね!
みなさんはたくさん休めそうですか?

1509css_caption

Ri-mode Rainbow様のブログで「画像にマウスを乗せると下からスライドして出てくるのをCSSだけで設置」というのがあったので、勉強がてら僕もやってみました。

Ri-mode Rainbowさんでは、マウスオーバーするエリアを設けてやっておられましたが、僕のは画像の親ボックスにマウスオーバーしたら画像がスライドしてくる仕掛けです。

sc20150919
【DEMO】

HTML

親要素を.photo、その中に画像と、キャプション用、キャプションというよりいろいろコンテンツを使えるように.captionでマークアップします。

CSS

※sassで書いてます。こちらの方が見通しが良い気がするので。

大まかにレイアウトの部分を抜粋しました。

要点は、

  • 親要素.photoを「overflow:hidden;」にして、表示エリア以外は非表示にする。
  • imgは親要素に対し100%にしたい。
    これは、画像要素の大きさのキャプションを表示しているわけではなく、親要素に対してのキャプション部分の大きさとしているため。上のCSSだと親要素よりも画像が小さかった場合にキャプション部分が画像からはみ出してしまいますね(汗)
  • キャプション部分は絶対配置で配置し、「top:100%;」で親要素の表示エリアからはみ出させて非表示っぽく。

です。

動作部分としては、

親要素はマウスオーバーされたときに、transitionを使ってtopの値を0までアニメーションさせています。

.captionのheightとhover時のtopの値を変更すれば、画像全体を覆わない高さのキャプション(帯っぽいやつ)など、応用はできそうです。

 

今回はちょっと軽めだけどこの辺で。こういうのやってるとCSSでいろいろ表現できるようになっていった覚えたてのころの気持ちが蘇りますね。CSS楽しいなぁ。

sassで書いてしまったので、CSSのリンクも載せておきますね。

150903image_caption

 

今回参考にさせていただいたRi-mode Rainbow様、ありがとうございました!!


CSSだけで実装するハンバーガーメニュー(暫定版…)

こんにちは。

野球とかインターハイとかインカレとか見てたらスポーツをしたくなったyasaiです。
もうすぐスポーツの秋ですが、今年もきっと食欲と読書と仕事の秋なんだろうなぁ。

さて今回は最近ハンバーガーメニューを使ったグローバルメニューの案件が多かったので、
何となく自分向けの備忘録です。

実装はHTMLとCSSだけ。Javascriptは使いません。

150831

 

【DEMO】

HTML

Javascriptを使わないので、メニューのオンオフの切り替えはcheckboxで行います。

Label要素の中に空のspan要素を配置したのは、span要素の疑似要素を使って3本線を表現するためです。

 

CSS

sassの記述はこうなりました。以下sassで記述します。

ちょっと長くなりましたが、やってることは順序は前後しますが①メニューの切り替え、②メニューがオンになったときのスタイル、③メニューのページに対する絶対配置です。

①メニューの切り替え

checkbox自体は非表示にして、label要素のクリックでオンオフを切り替えます。

関節セレクタ~と:checked擬似クラス セレクタを使ってcheckbox以降の兄弟要素のスタイルを変えていきます。

②メニューがオンになったときのスタイル

メニューがオンになったときには、

  1. メニューの内容がオーバーレイでページのセンターに表示される。
  2. メニューボタンの3本線が×マークになる。

です。

1.メニューの内容がオーバーレイでページのセンターに表示

メニューの中身(ul要素)を画面中央にfixedし、そのafter疑似要素でオーバーレイ部分を作ります。オンになったら拡大するアニメーションにしました。

2.メニューボタンの3本線が×マークになる。

3本線はlabel要素(.hamburger__btn)の疑似要素で中央に1本。その子要素spanの疑似要素で上下に引いています。

メニューがオンになったときは中央の線を非表示にして子要素spanの線を45度回転させました。

 

③メニューのページに対する絶対配置に関しては、そのままなので割愛します。
ただ、チェックボックスがオーバーレイの上に来ないと切替が出来なくなってしまうのでご注意を。

 

ハンバーガーメニューを使うにあたって

今回制作した案件はPCサイズでもハンバーガーメニューを使うデザインだったのですが、ハンバーガーメニューからしかページ遷移ができないページの場合に、ちょっと使い勝手が悪く感じました。
メニューの内容が見えているグローバルメニューと違って、1クリックしないとメニューの内容がわからない、移動できないっていうのは、使う側からするといささか不便なんだなぁと。

視線がページのコンテンツを読むために上から下に流れっていって、そこからページ遷移のためにハンバーガーメニューを探すっていうのがいかんのかも。
スマホの場合はコンテンツの終わりとハンバーガーメニューを同時に視界にとらえられるので、そこまで違和感ないんですけどね。

ハンバーガーメニュー使うときは、コンテンツの中からページ遷移させるためのテキストリンクやボタンが見てくれる人のために必要なんだなと感じたのでした。

 

最後にsassだけじゃなくてメニュー部分のCSSへ切り出したファイルもリンクしておきますね。

hamburger.css

 

今回参考にさせていただいたサイト様

Pure CSS Fullscreen Navigation Menu