position: sticky; のサンプル
例えばこのページのサンプルの様に、長い文章のあるページで、章タイトルを通過したら見出しが追従する場合などに使えそうです。 1章- このboxがstickyを適用しています Lorem ipsum dolor sit amet. Et reiciendis laborum ut amet accusamus et fuga consequatur aut inventore debitis et ipsa enim sit rerum error vel galisum autem. Quo fugiat voluptatem ea voluptates blanditiis hic rerum nemo sed distinctio enim. Et eaque dolores aut eligendi galisum et voluptatem. Ut tempora molestiae
【5段階評価】評価グラフの作り方【HTML・CSS】
正式名称が分からないのですが5段階の評価グラフをHTMLとCSSで作りました。 WordPressユーザー向けの記事ですが、どんな環境でも使えます。 こちらがサンプルです。 コスパ 悪い 1 2 3 4 5 良い 入力・変更できる要素は以下の通り。 要素 左上のタイトル 左右のテキスト 下のテキスト 任意のテキストを非表示にすることも。 男性的 女性的 該当項目を増やすこともできます。 年齢層 20代 30代 40代 50代 60代 アイコン（fontawesome）も設定可能。 シンプル 機能的 画像も設定できます。 静か 賑やか もちろん全て一つにまとめることも！ コスパ 悪い 1 2 3 4 5 良い 年齢層 20代 30代 40代 50代 60代 シンプル 機能的 静か 賑やか 仕様はこんな感じですがカスタマイズ難易度はちょっと高めです。 HTMLが特に複雑になってしまったので、慣
WAI-ARIA 再入門。 - Qiita
はじめに WAI-ARIA の読み方を答えられなかったので、 WAI-ARIA を学びなおす。 WAI-ARIA の読み方を答えられなかったそこのあなたも、この記事を読めばバッチリだろう。 ARIA とは ARIA とは、スクリーンリーダーのような支援技術に対して、各要素がどのような役割を持つものかを教え、支援技術が Web ページの内容をより正しく、より詳細に知れるようにするものだ。 ARIA を使うと、支援技術を使っているユーザに Web ページの適切な情報を伝えることができる。 ARIA を使う上で必要なのは、ロール、ステート、プロパティの3つだ。 これらについても説明しておく。 ロールとは ロールとは、role属性を使い、その要素に役割を与えるものだ。 ロールは不変でなければならない。どうしても動的にロールを変更したい場合は、ロールを変更したい要素とその子孫要素を削除し、それらを新
マテリアルデザインについて少し調べる - Qiita
はじめに マテリアルデザインという言葉は知っていましたが、それが一体なんなのかを正しく理解しないまま、 「これからは、マテリアルデザインだぜ」のような顔して、生活していましたが、 知ったかぶりしているのがバレる前に、少し学んでおこうと思いました。 マテリアルデザインとは 2014年にGoogleが発表した「デザインのガイドライン」。 直訳すると「物質デザイン」。 マテリアルデザインの目的 スマートフォン、タブレット、テレビ、メガネ、腕時計などのデバイスで、 統一されたデザインを取り入れることにより、操作性も統一され デバイスが変わっても使いやすいUIを実現できるとか。 現実世界のルール(奥行きや、影など、質量)を取り入れることで、直感的な操作を実現します。 マテリアルデザイン誕生までの歴史 1.スキューモフィズムでのデザイン スキューモフィズムとは スキューモーフィズム（skeuomorp
Sassで使えるIE向けCSSハックまとめ - Qiita
Sassで使えるIE hack 皆さんはSassでIE hackを使ったことありますでしょうか？ 恐らくコンパイル時のエラーで使用できるCSSハック（以降、面倒なのでhack）が限定され、融通が効かないという理由で、以下のような条件付きコメント（conditional comments）に切り替えた方も多いんじゃないかと思います。 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js
[CSS] display:tableを学ぶ - YoheiM .NET
こんにちは、@yoheiMuneです。 CSSのdisplayはマークアップするには絶対に必要なスタイルの1つですよね。その中でtableやtable-cellは業務でなんとなく使っていますが断片的にしか理解していなかったので、今日はそれらのまとめブログを書いてみたいと思います。 Special Thanks to https://flic.kr/p/iNeYy7 目次 display:tableとは display:tableはテーブル要素のように表示するためのCSSです。このスタイルを用いることでtableタグを使わずに、同様のスタイルを利用することができます。 <!-- tableタグを利用した例 --> <table> <tr> <td>名前</td> <td>メールアドレス</td> </tr> <tr> <td>よーへい</td> <td>aaaa@bbb.ccc</td> <
![[CSS] display:tableを学ぶ - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/a5856b44026f95acd294eaf42931b30572f43c16/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F355.jpg)
いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう！ 【前編】
対象読者 JavaScriptフレームワーク・ライブラリの選定に悩んでいる方 本格的にJavaScriptを触るのが初めてという方 jQueryでの大規模なフロントエンド開発に限界を感じている方 必要な環境 Node.jsがインストールされていることが推奨です。 React.jsとは何か React.jsは最近注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。 前提として、JavaScriptの世界でMVCのVといえば、紛れもなくDOM（Document Object Model）のことを指します。特に何も意識しないで作った場合、都合の良いDOMからデータを引っ張り出しては別のDOMを書き換えるといった、行き当たりばったりな作りになりがちです。そこで、MVCの考え方を導入することにより、データを画面とは独立した構造体として切り出し
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
Publickey － Enterprise IT × Cloud Computing × Web Technology / Blog
バックナンバー 2021年 1月 2月 3月 4月 5月 6月 7月 8月 2020年 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 2019年 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 2018年 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 2017年 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 2016年 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 2015年 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 2014年 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 2013年 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 20
JavaScriptだけでファイルの保存機能を実装する
こんばんは。ファガイです。本日はJavaScriptだけでブラウザのある情報のデータを保存する機能の実装方法について書こうと思います。 概要ローカル上だけでファイルの保存ができるようになる方法になります。 自分が作っているMarkdown-F Editorはその機能を使って保存を実装しています。 今回利用する機能はHTML5の機能なので、ブラウザによっては実装されていない可能性がありますので、注意。 確認ブラウザIE11FirefoxGoogleChromeにて確認を取ってます。IEに関しては独自関数を使っているため、前のブラウザでは対応されていない可能性があります。 ソースコードソース自体は結構簡単です。 var text = "テキストデータ"; var blob = new Blob([text], {type: "text/plain"}); // バイナリデータを作ります。 //
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77 Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
BootStrap使っているんだったら、Loadingもglyphicon使っちゃえ！ | jlamp
Loading.js (function($) { $.extend({ LoadingImg: function(action) { // デフォルトパラメータ var param = { icon: 'glyphicon' , prefix: 'loading' }; if ('start' === action) { if (0 === $('#' + param.prefix + '-layer').length) { $('body').append('<div id="' + param.prefix + '-layer"> </div>'); $('#' + param.prefix + '-layer').after('<div id="' + param.prefix + '-content" class="text-center"></div>'); $('#' + p
Twitter Bootstrapのカルーセルをキーボードとスワイプで操作 - ZeBeVogue別館
Twitter Bootstrapはレスポンシブレイアウトに対応しています。ですので、PC用とモバイル用のサイトを兼用で作るのが非常に楽です。 ですが、その際に気をつけないといけないのがユーザビリティです。 当然PCとモバイルでは使われるアクションが異なる為、異なるユーザビリティの向上が必要になります。モバイルであればスワイプやタップ、PCではキーボードもしくはマウスが主体の操作になります。 ２つのライブラリを使って、カルーセルのアクションを制御させてみました。 カルーセルの基本的な使い方は公式サイトを見てください。 キーボード・スワイプで使うライブラリは以下になります。 jwerty touchSwipe jwerty キーボードショートカットが簡単に設定できるライブラリです。 基本的な使い方は以下の通りです。 jwerty.key('ctrl+shift+P', function ()
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
Glassfish JPA - @//メモ
2024-01-232024 6.2% (22.9/366) January 74% (22.9/31) Week 04 27.7% (1.9/7) Day 23 Tue 94.1% (22.5/24)
今どきのJava Webフレームワークってどうなってるの？ - きしだのHatena
昨日のSeasar2のエントリについたコメントなどで、「とはいえ代わりに何つかうの？」みたいな話が出てたので、とりあえずJava EEのWebフレームワークについて簡単にまとめてみます。 Java SE 8+Java EE 7+lombokで書いていますが、基本的なところはJava SE 7+Java EE 6でも大丈夫です。 なので、今どきとは書いてますが、基本的には2009年12月のJava EE 6ということで、実はすでに4年近くたってます。 何も考えてない なんも難しいこと考えないなら、やっぱJSPが楽ですよね。 なんでも書けちゃう。 <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=
Maplace.js - 軽量なjQuery × Googleマップライブラリ MOONGIFT
Googleマップをプログラマブルに組み込むのに良さそうです。 GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。 そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は限られますが広範囲に利用できそうです。 まずは簡単なデモ。地図の表示を行います。コードとしてはたった数行です。 // JavaScript var maplace = new Maplace(); maplace.Load(); // or new Maplace().Load(); // HTML <div id="gmap"></div> その結果は次のようになります。 シンプルな地図表示。 次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表
AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた
Posted: 2011.06.20 / Category: javascript / Tag: Ajax, HTML5 高速なWebアプリケーションを作成するにはAjaxがなくてはならないものとなりました。AjaxにはURLが更新されず、そのためブラウザの戻るも使用でません。 このような問題を解決するためにHTML5で追加されたのが「pushState」です。 pushStateを使用していないサンプル jQueryのloadメソッドを使用したコンテンツ切り替えの簡単なサンプルです。 page1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>page1</title> <link rel="stylesheet" href="style.css"> <script type="text
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
seo-matome.jp