Flexboxベースの軽量レスポンシブCSSフレームワークBasisをつくりました。
Flexbox ベースの軽量レスポンシブ CSS フレームワーク Basis を公開しました。もともと Bootstrap が好きでよく使っていたのですが、いろいろ「ん？」となることがあって、別のフレームワークを探してみたりもしたのですがなかなか条件にあうものが無く、それならいっそ作ってしまえ！ということで作りました。 導入方法・マニュアルは下記をご参照ください。 ということで、既存のフレームワークの何が不満だったのかということも交えつつ、Basis の特徴など。 Basis の特徴 Flexible box ( Flexbox ) ベースのグリッドシステム Basis はグリッドシステムが float ベースではなく、Flexible box ( Flexbox ) ベースとなっています。今でこそ Flexbox ベースのグリッドシステムが使えるフレームワークがいくつかでてきていますが、
第25回 tableをもっと見やすくデザインする
今回のポイント 「col」で縦列をまとめて装飾する方法 colに対して有効なCSS指定と無効なCSS指定 colの親に当たるcolgroupの考え方 縦のCSS指定と横のCSS指定はどちらが優先されるのか 縦にも横にも適切な色分けがされた表を作る方法 塗り分ける色味のうまい決め方 table系のタグには縦列をまとめるタグも存在します。colとcolgroupです。“まとめる”という言い方がなんとも微妙なんですが，うまく使うと，とても見やすい表を作ることができます。実例を見ながら解説していくことにします。 「col」で縦列をまとめて装飾する まずはcolから見てみます（リスト1）。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026
あなたはhtml/cssにおける要素の重なり方を知っていますか？ z-indexを指定しなければ先に書いたほうが下層で後に書けば上層に来る？ というわけで、実は割りと複雑な要素の重なりについて書きます。そこまで意識しなくとも支障がでることは滅多にないと思いますが、知っておいて損はないはずです。 ちなみに、昨今CSS3なるものが流行していますが、この記事はW3CのCSS2.1勧告（と付録）を元に書いています。 基本的な内容であり、目新しいことは特になにもありません。 スタックコンテキストとスタックレベル 用語と概念から。 ある意味、ここが一番よくわかりませんが、ここがわからないと何もわかりません。 スタックコンテキスト（スタッキング・コンテキスト） 簡単に言えばauto以外のz-indexと位置（static以外のposition）を指定した要素によって生成される階層構造を形成する固まりです
Google Mapルート・乗換案内のURLパラメータまとめ
でも、Google Map API v3は、 まだルート案内の自転車とバス＆電車の交通機関が実装されていなくて、 （※正確に言うと、機能的には実装されているけれど、 日本では実装されていない。 GoogleMapでは使えるので後々実装する可能性は高いです） どうしたもんかなぁ〜と悩んでいて、 旦那にそれが出来ないんじゃ意味無いじゃんと言われ。。 そこで考えついたのが、 Google Mapのパラメータを使うという実装。 サイトに表示するGoogle Mapに表示することは出来ないけれど、 パラメータ付きのURLをリンクして、 Google Mapに飛ばせば、 自分の位置情報からルート案内、時刻の設定でページが表示するので、 ユーザーにとって便利になります。 基本のURLにパラメータを渡せばいいだけです。 https://maps.google.com/maps? Google MapのUR
現在地からお店まで自動でルート案内するリンクの作り方
会社やお店のウェブサイトなら、必ずと言って良いほどGoogleマップで位置が表示されています。もしそれがスマホで表示できるなら、さらにルート案内するリンクをつけて、会社やお店までの経路や到着時間をスマホに表示させるようにして、もう一工夫してみましょう。 ルート案内の概要 ルート案内のリンクをクリックすると、設定した目的地までの経路をGoogleマップに表示する仕組みです。PCでクリックするとGoogleマップでルートを表示します。AndroidやiPhoneなどでタップすると、Googleマップアプリへ誘導されますので、アプリのルート案内が使えます。 ルートの設定は「現在地から目的地」だでけはなく、「任意の出発地から目的地」の設定も可能です。また出発地や目的地は、名前・住所・座標(緯度,経度)で設定することができます。 到着時間が、現在の交通状況が加味されて計算されるので、なかなか便利だと
Webマップの実装手法 | 第1回 地図サービスの利用
はじめに 2005年にGoogleがGoogle マップを発表して以来、Yahoo*、Microsoftなど、さまざまなベンダーがWeb上で利用できるインタラクティブな地図を提供するようになりました。 *注：Yahooが提供する地図サービス 2015年6月4日（現地時間）にYahooは、いくつかのプロダクトのサポートを終了すると発表しました。 Q2 2015 Progress Report On Our Product Prioritization その中にYahooの地図サービスも含まれており、maps.yahoo.comのサイトを6月末で閉鎖することが述べられています（Yahoo!検索、Flickrなどいくつかの関連サービスにおいては使用可能）。 日本で提供されているYahooの地図サービスについては、上記の文章中には言及がありませんが、何らかの影響があるかもしれません。 最近では、す
意外に多いGoogle Maps関連機能制限をまとめた。
こんにちわ、仕事もしてる渡部です。 Google Maps SDK for iOSを使って、iPhoneで地図アプリを作ろうと検証していたのですが、Google Maps APIに色々な制限があったのでまとめてみました。 制限が色々あるよ。Google Maps関連機能。 Google Maps APIs( https://developers.google.com/maps/ )を見ていくと、Google Mapsを使う様々機能を提供していますので、それぞれの機能毎に制限をまとめていきます。 サンプルの画面などはiOSを前提としていますので、ご了承下さい。 また、2015/7/7時点の制限になりますので、将来的に変わる可能性がありますので、ご了承下さい。 制限比較概要 「 Google Maps API for Work」 はGoogle Maps for Workの提供する機能で、Go
横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
地図 : KASUMI izakaya+restaurant （【旧店名】棲家） - 京都河原町/居酒屋
リクエスト予約希望条件をお店に申し込み、お店からの確定の連絡をもって、予約が成立します。 1 予約の申し込み ご希望の条件を当サイトよりご入力ください。 2 お店からのメール ご予約が承れるか、お店からの返信メールが届きます。 3 お店へ来店 予約が確定した場合、そのままお店へお越しください。
スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
【javascript/jQuery】Progressbarで処理の進捗状況を表示する - めめんと
jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示させるという方法があります。 ↑Windowsで何かコピーしたときに出てくるダイアログ ただ、HTMLやjavascriptにはデフォルトでそのようなバーは存在していません。プログレスバーを表示するにはjQuery UIなどのライブラリ、プラグインなどを使用するしかないです。今回はjQuery UIを使って進捗状況を表示させようと思います。 ただ、javascriptでマルチスレッドは出来ないので重い処理の進捗を提示したい場合は一工夫が必要なようです。 jQuery UIでProgressbarの設置 とりあえずjQuery UIでprogressbarを表示させます。jQuery UIのページからダウンロードして貼り付けます。特に貼り付けについては言及しません。jQuery UIをセットしたら
JavaScript/jQueryでローディングバー・プログレスバーを表示させて読み込み処理を行う(imagesLoadedの使い方)｜WEBサイトに関わるあれこれ
2021年4月 (1) 2018年6月 (1) 2018年5月 (1) 2018年3月 (1) 2017年1月 (1) 2016年12月 (1) 2016年2月 (1) 2015年4月 (1) 2014年10月 (1) 2014年9月 (2) 2014年7月 (1) 2014年6月 (1) 2014年5月 (1) 2014年4月 (1) 2014年3月 (5) 2014年1月 (1) 2013年9月 (1) 2013年7月 (1) 2013年6月 (2) 2013年5月 (4) 投稿日時: 2014年7月25日 カテゴリー: JavaScript・jQuery JavaScript/jQueryでローディングバー・プログレスバーを表示させて読み込み処理を行う(imagesLoadedの使い方) JavaScript/jQueryでローディングバー・プログレスバーを表示させて読み込み処理を行
jQueryで「Now Loading-30%」みたいなプリローダーを作る方法
フラッシュサイトの専売特許だったNowローディング（プリローダとも）ですが、jQueryやHTML5の登場で、最近では、非フラッシュサイトでも見かけるようになりました。この記事では、jQueryを使ってプレローダーを表示する方法を考えて見ます。 デモ 今回作るプリローダーのデモです。一度読み込むとキャッシュされてしまうので、もう一度みたい方は、ブラウザをキャッシュを消して見てください。 デモ 考え方とコード イメージファイルが重いサイトの場合であれば、イメージをプレローディングしながら、読み込んだイメージ数に応じた％を表示することでプリロード します。すべて読み込んだらメインコンテンツを表示します。 このサンプルコードでは、画像のロードイベントを拾って読み込んだイメージをカウントし、%とプログレスバーの表示を変えています。 <!DOCTYPE html> <html> <head> <sc
WP Plugin 3d book gallery, 2018
Ver-1 downloaded 9522 times, Ver-2.33 – 11760 times
【jQuery】slickのカルーセルスライダー実装方法とサンプル集｜Gimmick log
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
～備忘録～
和の常備菜⭐ミニ手綱こんにゃく⭐甘辛煮♪ by yhime2001
imagesloadedの使い方
いざというときに知っておくと便利なJavaScriptライブラリまとめ – keitaoriginal
http://cosao.net/archives/5524
