2015年11月12日のブックマーク (7件)

  • slick.jsの使い方まとめ

    slick.jsは下記からダウンロードできます。 slick – the last carousel you’ll ever need ダウンロード後、必要なファイルを読み込みます。 <link rel="stylesheet" href="./slick-theme.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./slick.min.js"></script> HTML <div id="sample"> <div>コンテンツ01</div> <div>コンテンツ02</div> <div>コンテンツ03</div> <div>コンテンツ04</div> <div>コンテンツ05</div> </div> Java

    slick.jsの使い方まとめ
  • [JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ! -slick | コリス

    画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示するカルーセルのスクリプトを紹介します。 自由度の高いカルーセルってなかなか無いのですが、「ラスト カルーセル」とサブタイトルがついてるくらい探し回って最後にたどり着くのはこれという出来です。 slick slick -GitHub slickの特徴 slickのデモ slickの使い方 slickの特徴 「the last carousel」とあるだけあって、カルーセルとしての機能は全て備えています。 レスポンシブ対応 CSS3はサポートブラウザ時に動作 オートプレイ対応 ナビゲーションはドット・アローの選択が可能 矢印キーでのキーボード操作に対応 ドラッグ・スワイプ操作に対応 無限ループ対応 slickのデモ デモでは、さまざまなカルーセルの動きを試せます。

    kenichirou1225
    kenichirou1225 2015/11/12
    “demo -slick”
  • 【jQuery】レスポンシヴ対応の高機能・高品質スライダー[slick]の使い方。Ver.1.8.1対応

    【jQuery】レスポンシヴ対応の高機能・高品質スライダー[slick]の使い方。Ver.1.8.1対応 高機能・高品質なjQueryスライダー[slick]の使い方を紹介します。 このjQueryスライダーは「FlexSlider」「BxSlider」「flickity」「Swiper」など、他の優良jQueryプラグインと並んで紹介されることも多く、公式サイトでは「the last carousel you’ll ever need.(訳:あなたが必要とする最後のカルーセル)」と謳われており、実際、オプションの豊富さや安定した挙動が評価され、多くの制作者様がオススメし、また実際のウェブサイトでもよく使われています。 公式サイトは以下。 公式サイト:slick 「get it now」というリンクを押した後、「Download Now」をクリックすると配布されているファイル一式をダウンロ

    【jQuery】レスポンシヴ対応の高機能・高品質スライダー[slick]の使い方。Ver.1.8.1対応
    kenichirou1225
    kenichirou1225 2015/11/12
    “動作サンプル”
  • CSSのtable-cellでmarginが効かないので代わりに隙間を空ける方法 - ディレイマニア

    以前にtable-cellを使ってfloatを使わずに要素を横に並べる方法をご紹介しました。 この方法便利なんですが、marginを使って隙間を空けることができないんですよね。 というわけで、margin以外の方法で隙間を作る方法をご紹介します。

    CSSのtable-cellでmarginが効かないので代わりに隙間を空ける方法 - ディレイマニア
  • Googleマップを横幅100%でレスポンシブに表示する | Hack

    レスポンシブデザインのサイトにGoogleマップを埋め込む場合、デフォルトでは幅が指定されているため、画面の小さいデバイスではどうしても横幅が飛び出してしまいます。 そこで、以下のような調整を加えることで、スマホでも横幅100%で飛び出さずに表示させることができます。 HTML iframeの外側に指定用のclassを追加する。 ex.ここではgoogle-mapsとしています。 <div class="google-maps"> <iframe src="https://www.google.com/maps/embed?pb=xxxxx" width="600" height="450" frameborder="0" style="border:0"></iframe> </div> CSS .google-maps { position: relative; padding-bo

    Googleマップを横幅100%でレスポンシブに表示する | Hack
  • こんな便利なのがあったとは!Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類 総まとめ

    こんな便利なのがあったとは!Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類 総まとめ +400 Awesome Free Tools To Build Your Business 5つのジャンルに、Web制作やビジネスに役立つさまざまな無料ツール・無料サービス・無料素材がまとめられています。 Business -ビジネス サイト作成・ロゴ作成・請求書作成・法律文書作成・アイデアのマネジメント・かっこいいドメインなど Marketing -マーケティング ライティングツール・ブログツール・サイト分析・SEO・画像最適化・画像編集加工・マーケティング情報・ソーシャルメディア・カスタマーサービス・A/Bテストなど Design & Code -デザイン・コード デザインの無料素材・カラーや配色ツール・デザインのインスピレーション・写真素材・フォント・アイコン・コードやマ

    こんな便利なのがあったとは!Web制作やビジネスに欠かせない無料ツール・サービス・素材 400+種類 総まとめ
  • 料金表を作ろう──ポスト資本主義時代の起業術

    起業とは何かのモノ、あるいはコトを販売することに他ならないわけで、そこには当然販売価格なるものが存在する。起業直後の価格設定は「不当に安い価格を自ら設定してしまう」という間違いを犯しやすい。まったく新しい会社で新しい仕事を獲得しようと考えるときに、どうしても価格が低いほうが成約しやすいと考えてしまう(実際、成約しやすい)。実績のない会社という「負い目」から、あまり強気に出てしまうと仕事が回ってこない可能性が高いという不安がアタマをよぎるのは仕方のないところだろうとは思うが、これは基的に間違いである。 料金の決め方にはトップダウンとボトムアップの2種類があるような気がする。トップダウン方式は「その価格に相応しい業務を納品しよう」という考えかた、逆にボトムアップは、原価や間接費などを積み上げ、自分ができる業務に相応しい価格にしようという発想だ。立ち上げたばかりの会社に限らず、一般に価格はどう

    料金表を作ろう──ポスト資本主義時代の起業術