2020年10月10日 カテゴリー: HTML/CSS/JS
この記事は2020年10月10日に書かれたものです。情報が古い可能性がありますのでご注意ください。
bxSlider でカルーセル表示をするとき、1枚目（カレント）のスライドが左端に表示されます。これを中央に表示したいのですが、bxSlider のオプションにはそのような設定はありません。
常に3枚のスライドを表示して1枚目を中央に表示する方法とか、1枚を表示してその左右に前後のスライドの一部を表示する方法は様々な記事で紹介されているのですが、それらは表示枚数が固定であることが前提です。
しかし今回やりたかったのは、画面の幅に応じて一度に表示されるスライドの数が変動する場合に、1枚目（カレント）のスライドを中央に配置すること。つまり、レスポンシブ対応で画面幅が違っても各スライドのサイズは変わらず、例えば PC 画面では5枚、タブレット端末では3枚、スマホでは1枚が表示され、その1枚目（カレント）を中央に、さらに左右には前後のスライドの一部が見えている状態にしたいということです。
そして試行錯誤の末、以下の方法で実現することができました。試行錯誤の割には、CSS でマージンを設定するだけという、実に単純なものですがw
“bxSlider のカルーセルで一度に複数枚を表示する場合に1枚目を画面の中央に配置する” の 続きを読む »
2020年9月20日 カテゴリー: HTML/CSS/JS
この記事は2020年9月20日に書かれたものです。情報が古い可能性がありますのでご注意ください。
当Webサイト内、Web制作&システム開発サイトの制作実績ページ で表示しているWebページのサムネイル。当初はサムネイル自動生成ツールを使用していました。その後、半年前から各々の制作実績のページでレスポンシブ Web デザインによる PC、タブレット、スマホそれぞれの画面を表示するようにしたのですが、サムネイル自動生成ツールではPC画面を縮小して取得することしかできず。仕方なく、それぞれのスクリーンショットを撮って貼り付けてました。
しかし、新しいサイトを追加する度に3種類のスクリーンショットを撮る必要がありますし、時が経つとスクリーンショットが古くなるので定期的に撮り直す必要があり。そこで、少々強引ですが、Webページそのものの PC、タブレット、スマホそれぞれのサイズの画面を、インラインフレーム（ iframe タグ）で埋め込んで表示することにしました。
ただ、それぞれのサイズのWebページをサムネイルのように縮小表示する必要があり、更にレスポンシブにも対応させる必要がありました。
“iframe でWebページを埋め込んで縮小表示する（レスポンシブ対応）” の 続きを読む »
2019年7月6日 カテゴリー: HTML/CSS/JS
この記事は2019年7月6日に書かれたものです。情報が古い可能性がありますのでご注意ください。
Instagram のフィードを簡単にWebサイトに埋め込みむことができる無料サービス InstaWidget が、最近何度かダウンすることがあり、それを埋め込んでいるページ全体の読み込みに影響がありました。
SnapWidget や WordPress のプラグインである Instagram Feed は、利用するためには Instagram のアカウントで認証する必要があるため、クライアント案件ではハードルがあり、別のサービスを探していたところ、複眼feed という無料サービスがありました。
この複眼feed、Instagram に限らず、Facebook や Twitter、Youtube、Tumblr など、様々な SNS やブログ等のフィードから写真や動画を抽出して埋め込むことができ、さらに Instagram の写真は Instagram のサイトに飛んでくれるなど、とても良い感じなのですが、サムネイルのサイズが設定したサイズ（px）に固定されるため、レスポンシブでないところが難点です。複眼feed ではレスポンシブとうたってありますが、PC からのアクセスとスマホ等からのアクセスとでレイアウトを切り替えることができるというもので、PC レイアウトの可変幅には対応していません。
ただ、埋め込まれた状態の HTML を確認すると、table タグで直接埋め込まれており、よくある iframe 方式ではないので、CSS を使って上書きすることができます。
“複眼feed を可変幅のレスポンシブにする” の 続きを読む »
2015年5月26日 カテゴリー: HTML/CSS/JS
この記事は2015年5月26日に書かれたものです。情報が古い可能性がありますのでご注意ください。
2014年10月28日に HTML5 が正式に勧告となりましたが、それ以前より多くのWebサイトが HTML5 や CSS3 を採用しています。弊社でも2012年辺りから HTML5 を採用し、丸角やシャドウ、グラデーションなどの CSS3 の一部のプロパティやセレクタを取り入れてきました。
特に、近年はレズポンシブWebデザインによるスマートフォンやタブレット対応も施していますので、CSS3 を使うことによって画像を少なくできることは、マークアップ作業やメンテナンスを楽にするだけでなく、通信速度やデータ量の面でも有効です。
ただ、そこで問題となるのが主に Internet Explorer 9 以前の古いブラウザへの対応です。HTML5 については IE8 以前が対応していませんし、CSS3 については IE8 以前のみならず、IE9 でも背景のグラデーションなどに対応していなかったり、IE10 でも対応していないプロパティがあります。
そのような古いブラウザ（というか、IE ）に対して、HTML5 と CSS3 を適用させる方法として、以下の JavaScript ライブラリが有名です。
“HTML5、CSS3 の古いブラウザへの対応について” の 続きを読む »