タグ

2018年4月24日のブックマーク (6件)

  • セクション単位でアップダウンできる「jQuery Section Navi Plugin」 – bl6.jp

    jQuery Section Navi Pluginは、コンテンツのセクション単位でアップダウンできるボタンを実装できるjQueryプラグインです。縦長ページなどで、区切りよくコンテンツを読み進めていきたい時なんかに便利ですね。 以下、jQuery Section Navi Pluginの実際のデモページになります。 デモ デモではセクションごとにコンテンツが縦に並べられていて、画面右下には「Down」と書かれたボタンが表示されています。ちなみに大きい画面でコンテンツが下まで見えている状態ではボタンが表示されないので、その場合は画面の横幅を縮小することでボタンが表示されるかと思います。 Downボタンをクリックすると、セクション単位でスクロールされます。下へスクロールされると「Down」の他に「Up」というボタンも表示されます。Down/Upボタンからセクション単位でサクサクと移動できるの

    セクション単位でアップダウンできる「jQuery Section Navi Plugin」 – bl6.jp
  • たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方

    短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案(Working Draft)の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様 ブラウザ・サポート状況(Can I use…) フィーチャー・クエリ(@supports) と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃい

    たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方
  • ホームページを作成しよう!無料で使える高品質HTMLテンプレート26個まとめ 2018年4月度

    ウェブサイトやアプリを素早く作成でき、モバイルやタブレットでの表示にも対応した、レスポンシブな無料HTML5/CSS3テンプレート素材をまとめてご紹介します。 人気フレームワークの最新版となるBootstrap 4を利用したテンプレートも多く、デザイン性だけでなく自由なカスタマイズ性にもこだわったHTMLテンプレートが多く揃っています。2018年のウェブデザイントレンドもうまく取り入れているので、サイト開発のデザインやレイアウトの参考にもいかがでしょう。 無料で最強!レスポンシブ対応の高品質HTMLテンプレート23個まとめ 2017年10月度 全部無料!レスポンシブ対応の最新HTML5/CSS3テンプレートまとめ Oasis 静的サイトの生成を行うJekyllを使って作成された、モバイルアプリのランディングページを想定したテンプレート。刻々と変化するバロメーターなど遊びココロのあるレイアウ

    ホームページを作成しよう!無料で使える高品質HTMLテンプレート26個まとめ 2018年4月度
  • TablePress – HTML編集なしでテーブルを簡単に管理できるWordPressプラグイン | ネタワン

    TablePressは、簡単にテーブルの表組みを管理できるWordPressプラグインです。 HTMLを直接編集する必要がありません。 WordPress管理画面でテーブルを作成・編集して、ショートコードを利用して記事にテーブルを挿入できます。テーブルの並び替えや検索機能もあります。 ブログの記事の中で比較表などの表組みを利用する場合は、このプラグインを活用すると役に立ちます。 はじめに このプラグインが優れていること HTMLを直接編集しなくてもテーブルの表組みを簡単に作れる。 テーブルは管理画面で追加・編集できる。 テーブルの表示位置はショートコードで指定できる。 並び替え機能があるテーブルも作成できる。 表のセルを結合する「colspan」「rowspan」も利用できる。 作成したテーブルのエクスポート・インポートに対応している。 管理画面が日語化されているのでわかりやすい。 動作

    TablePress – HTML編集なしでテーブルを簡単に管理できるWordPressプラグイン | ネタワン
  • Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO? | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い

    なぜ、的外れなのでしょうか? それは、実際にユーザーが使っているシーンを考えればわかります。たとえば、PCを起動してからサイトのコンテンツを読むまでの流れを書き出してみましょう。 ブラウザを立ち上げるアドレスバーに文字列を入れて検索する検索エンジンの検索結果から該当のコンテンツを探すサイトに訪問し、コンテンツを読むサイト側で用意した支援機能は、4の「サイトに訪問し、コンテンツを読む」の段階になって初めて使えるものです。サイトに「音声読み上げ機能」があれば、そのサイトのコンテンツを読み上げることはできますが、他のサイトのコンテンツを読むことはできません。そしてもちろん、ブラウザを立ち上げたり、検索文字列を入れたりする際にも、この機能を使うことはできません。 もし、このような支援機能にニーズがあるとすれば、普段は目で見てアクセスする人が「何らかの事情でそのサイトのコンテンツだけ読み上げで聴きた

    Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO? | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
  • レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」 – bl6.jp

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実装できるjQueryプラグインです。とてもシンプルで見やすく、ドラッグ&ドロップで目的の年に簡単にフォーカスできます。 以下のページからTimelinyの実際のデモ動作をチェックできます。 デモ デモでは年間のタイムラインが水平に並べられています。現在フォーカスされている年はピンク色で分かりやすく表示されます。また、年の下にはショートテキストを表示させることも可能です。 操作は左右にドラッグ&ドロップすることで好きな年にもっていくことができます。デザイン・操作ともにシンプルで無駄がなく、とても見やすいタイムラインです。 使い方に関してもとても簡単なので、手軽に実装できます。オプションには、order、className、wrapper、boundaries、animationSpeed、hideBlankYearsが用意

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」 – bl6.jp