BLOG﻿メニューとウィジェットFacebookTwitter検索:ABOUT当サイトは株式会社アートグラフィック新潟WEB制作ブログです。WEB制作にまつわることや新潟の情報など投稿していきます。会社のホームページはこちら♪ご注意:記事は当時の情報を元に書かれておりますので、仕様が変更され記事と合わない事がございますので、その際はご容赦願います。(1)BasketballspiritsPR背景画像を下に落とす。新年明けましておめでとうございます。本年も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背景画像を下に落とす。Vivaldiを使ってみてる常時立ち上げていたいチャットツールやメモツール。進めている案件の関連サイト。勉強用のWeb系ブログ。いろいろなWebサイトをみていると、いつのまにかブラウザのウィンドウやタブがデスクトップに散乱してしまう、sakaiです。複数立ち上げていると、探す手間がかかったり、他のタブに気を取られて作業が中断してしまったりとあまりいいことはありませんよね。今回は、タブの整頓にとおすすめしてもらった「Vivaldi(ヴィヴァルディ)」というWebブラウザをご紹介します。Technologiesによって開発されているウェブブラウザである。Technologiesは、オペラ・ソフトウェアの創設者の一人でありCEOであったヨン・スティーブンソン・フォン・テッツナーによって設立された。friends”(私たちの友人のための新しいブラウザ)をスローガンとしており、技術者、インターネットのヘビーユーザ、OperaのレンダリングエンジンがPrestoからBlinkへと変更されたことに伴い多くの機能が削除されてしまったことに不満を抱いているかつてのOperaユーザを主な対象としている。(引用:Wikipedia)以前のOperaの機能を世襲したブラウザなんですね〜。Operaを一時期使用し使用レビューを書いたこともありましたが、残念ながらメインで使用することなく、結局Chromeに落ち着いてしまった経緯があるのですが、また縁あってOpera由来のブラウザにお世話になる日がくるとは。いうことで、期間にして2ヶ月ほど。Vivaldiをメインブラウザとして使ってみて、ぜひおすすめしたいところ、逆に残念に思ってしまったところをあげてみました。長くなってしまったので、ご興味のあるところからどうぞ。レイヤー2枚で写真を仕上げる!!どもっ。この時期から忘年会や新年会などで人と会う機会がいっそう増えてきますよね。人が集まるとスマホやデジカメで写真を撮ってデータを渡す機会も多いかと思います。撮影した写真を後になってチェックしてみると暗かったり、悪くはないけど今ひとつだったりする写真が多くないですか?そんな写真を約レイヤー2枚で「いい感じ」に仕上げる方法を紹介します。※今回の方法では、RGBのデータで行ってください。背景レイヤーをコピー&ペーストなどで背景のコピーを作って描画モードを「スクリーン」にします。前に書いた事がありますが、写真を明るくします。暗いと感じる場合は、明るく感じるまでレイヤーをスクリーンで重ねていきましょう。この「スクリーン」で重ねていくと明るくなる反面、色が薄くなっていきます。暗い写真を明るくした場合も彩度が低い状態になります。そこで、もう一枚背景レイヤーを使います。先程「もう一枚」追加したレイヤーの描画モードを「オーバーレイ」にします。すると、黒くなるほど一気に色が濃くなり明るい所は「まっ白」く飛ぶと思います。不透明度を一旦「0%」にして徐々に上げていきます。すると、薄くなっていた色がシッカリとした色になってきます。この時点で明るい部分が飛び過ぎている場合は「スクリーン」レイヤを不透明度で薄くするか複数枚「スクリーン」レイヤーがある場合は削除するか非表示にして加減してください。この方法で調整を行うと、トーンカーブでの調整やレベルの調整・色相彩度の調整なんかもテクニックや知識不要でできちゃいますのでアクションで各描画モードのレイヤーを作ってしまえば悩むことなく調整ができます。最近のデジカメは色のバランスは取れていますので、色のバランス調整は必要ないことが多かと思いますが必要な場合は、今回の調整を行って画像を統合してから「自動カラー補正」を行っても良いかと思います。コメントを残すCPIサーバーでマルチドメインの設定KDDIグループのホスティングサービス、CPIサーバー(共用サーバー)を使っています。追加料金無しにマルチドメインが使えるので、同業者様には利用されているところも多いかと思います。このCPIのマルチドメイン追加が他社と比べてちょっとわかりにくいというか、毎回やり方を忘れるので、控えとして書いておきます。以下はドメインは他社で取得済みの場合です。(お名前.comとか)契約時のアカウントでマイページにログインします。「マルチドメインお申込み」の画面になります。フローに沿って進めます。他社でドメインを取得済みの場合は、下段を選びます。追加したい取得済みドメインを入力します。DNSをCPIの物を使う場合そのままです。メールサーバーをCPIで使うならそのままです。「オプション一覧」オプションを選択します。SSLを使うときはここで選択しておきます。※後から追加もできます。必要な費用の確認です。マルチドメインの追加は無料なので、オプションを付けてなければ0円です。あとは、「確認する」を経て、申し込みを完了します。↓その後、CPIより設定完了のメールが届きます。この段階でFTPは利用可能です。メールにネームサーバーのURLが書いてあるので、ドメイン側の管理画面で設定します。お名前.comはドメイン設定からネームサーバーの変更を選択します。↓ネームサーバーのURLを入れます。設定ドメインにアクセスして、サイトが表示されれば完了です。他社と比べた感想として、コントロールパネルでの追加では無く、0円で新規アカウントを追加するイメージです。ドメイン毎に専用のコントロールパネル(ユーザーポータル)のアカウントが発行されます。やって書き出してしまうと、難しい所も無く、なんてことはありません。他社ドメインとの組合せでは設定が反映されるまで、多少時間が掛かりますので(一晩とか)、時間的余裕を持って設定した方がいいですね。コメントを残す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">仙人。コメントを残すSNSのトップを知る!!どうも、Kazです。SNSは何を使っていますか?そして、そのSNSで最も人気がある『アカウント』は何か...気になった事はありませんか?情報の拡散などで使われるSNSですが、トップになるからにはそれなりの理由があるはずです。その『もっとも人気のあるアカウント』を見て調べることで気づくこともあると思います。2016ハロウィンが終わったと思ったら、次はもうクリスマス!一大イベントに向けて、早くもクリスマス仕様のWebサイトやページが続々公開されています。普段よりも華やかにドレスアップしたWebサイト。魅力的なデザインを一足お先に、チェックしてみました。クリスマスサイトhttps://www.mikihouse.co.jp/christmas/赤・白・ピンクのベースカラーのグリッドが、ぎゅっと詰め込まれたギフトボックスのよう。子ども服のブランドですが、贈る側の大人もぐっとくるシックなデザインですね〜。コペンハーゲンのある風景とともにクリスマスギフトを紹介されています。メインカラーのグリーンを基調に金色をアクセントとした、全体的に高級感のあるデザイン。キャッチコピーのリボンのアニメーションが、可愛らしいアクセントになっています。※レスポンシブデザイン三越伊勢丹グループ「こころに太陽を呼ぶ、祝祭。」http://cp.miguide.jp/christmas-journey/闇に浮かぶオレンジ色の「スカイランタン」が印象的。明朝体のコピーも力強く、目を惹きつけられます。クリスマスを「こころに太陽を呼ぶ、祝祭。」とし、太陽をモチーフとしたあしらいや色彩でページを彩っています。バックを暗色にさせていることで、より光が引き立っているところもまたすてきですね。コンテンツの開閉も、ちょっと楽しいアニメーションになっています。※レスポンシブデザイン土屋鞄のクリスマスギフトサイト|土屋鞄製造所http://www.tsuchiya-kaban.jp/c/2016xmas.phpシンプルなツリーに、星座がきらめくシンプルなメインイメージがすてき。クリスマスまでのカウントダウンにもわくわくしてきますね!取り扱っているギフトは、鞄や財布などの革製品。革の絶妙な光沢が映えるような、濃紺や深緑などの落ち着いた配色でまとめられています。大切なひとへ、ツリーを贈ろう。|土屋鞄製造所http://www.tsuchiya-kaban.jp/event/2016xmas_yourtree.phpこちらも土屋鞄製造所さんのクリスマスサイト。ランダムで作られるツリーに添えて、ちょっとユニークな一言メッセージを送れるサービスです。MAGIChttp://crystalmagic.jp/s/tokyu/ラインと絶妙な濃淡で表現された、クリスタルのイメージが美しいです。ボタンやページトップのホバーアニメーション、ゆっくりと変化するクリスタル調の背景など、細かいところまでこだわりを感じるデザインです。マザーハウスのクリスマス2016|MOTHERHOUSEhttp://www.mother-house.jp/event-campaign/xmas/町に立ち並ぶ家が、なんとギフトボックスに。広がる灯りの表現や、微妙な濃淡が重なる淡い色彩が、とてもやさしいサイトです。他にもタイトルロゴやワンポイントのツリーなど、すみずみまで可愛らしいあしらいに溢れています。HOLIDAY|PARCOhttp://parco.jp/gift/油絵調のイラストに迷い込んでしまったような、可愛らしいけどちょっと不思議な世界観のデザインです。agetehttp://www.agete.com/2016christmas/セピア調の繊細なタッチで描かれたイラストが美しいです。ウィンドウ内でページが完結するレイアウトで、メニューの配置がちょっと珍しく感じました。商品ページも同じくセピア調でまとめられ、ゆっくりと降る雪のアニメーションやラインの飾り枠が、華奢で繊細なアクセサリーにとてもマッチしています。ジャパンhttp://www.starbucks.co.jp/holiday/動画で進んでいく、スクロールアニメーション。描くように表示されるボタンやコピー、手描き調のあしらいや、ちょっとコミカルなコマ撮りアニメーションなど。木目調の背景と相まって、全体的にほっこりと暖かいデザインイメージです。トマム【公式】http://www.snowtomamu.jp/special/xmas/雪原に広がるキャンドルの灯りと、満天の星空がとても幻想的ですね...!フルスクリーンと降雪のさりげないアニメーションで、その地の魅力をシンプルに演出しています。※レスポンシブデザイン西武・そごうのクリスマス|西武・そごうhttps://www.sogo-seibu.jp/christmas2016/縦組み&明朝体のキャッチコピーが印象的。した曲線と交わるロゴタイプもすてきです。イラストで埋められたバックと、プレゼントを結ぶリボンを思わせるような赤色のバックがとてもにぎやか。2016https://www.kaikan.co.jp/special/xmas/左右2分割されたメニュー。こちらはケーキやレストランの問い合わせ先が複数あるのですが、こうして入り口から分けられていると動線がシンプルでわかりやすいですね!赤・白・金で落ち着いた彩度の色どりで、華やかな大人のクリスマスといったイメージです。2016http://www.lupicia.com/shop/e/eX16/お茶のオンラインショップ「ルピシア」のクリスマスサイト。クリスマスの限定ギフトに描かれたキャラクターたちが登場する、絵本「アルチザンたちの物語」が楽しめます。メインビジュアルはパララックススクロールで、奥行きのある演出がされています。※レスポンシブデザインサンリオクリスマス特集2016https://shop.sanrio.co.jp/special/xmas2016/クリスマスカラーにまとめられた、シンプルなキャラクターイラストがメインビジュアル。ツリーのオーナメントになったキャラクターたちも、パララックススクロールで背景を彩ります。Webチームでは気になったWebデザインを、下記のサイトでまとめてご紹介しています。コメントを残すファイルとキーボード・マウスの共有にUSBリンクケーブルを使ってみた。Sierraにて)会社のデスクで、WindowsとMacを並べてつかってます。配線が乱雑になるに加え認識しないこともままあり、結局は2組のキーボードとマウスを並べて使ってました。デスク上に2組もキーボード・マウスがあると邪魔なんですよね。そこで!USBリンクケーブルです。2台のPCをUSBで繋いでデータをやり取りするケーブルです。昔からあるジャンルの製品です。最近知ったのですが、キーボードなどの入力デバイスの共有もできるんです。言うわけで試しに一番安い製品を買ってみました。わからない中国製(Ugreen)です。Amazonで1000円ちょっと。外観はUSBケーブルそのもの。片方のコネクタ部分にストレージが入っているようです。(USBメモリとして認識します。)そこにリンク用のソフトウェアが同梱されていおり、仮想CD的に自動起動、インストールを行います。使いたい双方のUSBポートに接続して使用します。設定は特に不要で繋げば常駐ソフトがインストールされて自動で使えるようになります。日本語化してありました。使いこなすには、色々設定した方が便利そうです。2台のディスプレイをマウスで移動できる設定にしました。2台が繋がると、片方のデスクトップからもう片方のデスクトップにマウスカーソルが移動できるようになります。移動した段階で、移動先PCを移動元のキーボード・マウスでコントロールできるようになります。タスクトレイに常駐しているユーティリティのおかげで、ファイルをドラッグドロップでコピーできます。クリップボードも共有できます。右のWindowsから左のMacへ移動する様子。モニタをまたぐときに一瞬もたつくものの、感覚的にはデュアルモニタに近い操作性です。ソフトウェアで同じ事ができるSynergyなどありますが、こちらの方が設定も簡単でファイルのコピーもできますし、どなたにもおすすめできます。(ケーブルという性質上、2台での共有に限られます。)ファイルの転送は上記設定でドラッグ&ドロップで可能ですが、転送用の専用ソフトGO!Bridgeも付属します。エクスプローラー的に操作したいときには便利に使えそうです。良いことばかりでは無くデメリットもあります。あたりまえですが、OSが立ち上がってないと共有はできません。BIOSの操作などは厳しいですね。機械的なKVMに劣る所です。電源が入っていても片方がスリープしていると、ディスプレイをまたいでカーソルの移動ができません。ショートカット(ALT+S)で強制切替えをし、操作することになります。私は片方(Mac)をサブマシン的に使っているので気になりませんが、メインマシン的に使うとレスポンスが気になるかも知れません。今回使ったのがUSB2.0版だったので、USB3.0対応であれば、もっと快適かも知れませんね。2013にて動作チェックを行いました。ハードウェアファイルとキーボード・マウスの共有にUSBリンクケーブルを使ってみた。日本語早期アクセスを試してみたことあれ?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のエラー箇所をみてみます。入ってくるようですので、きっと一番はじめに表示されるアイテムのことですね。