[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js
ページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。 要素がビューポートに入った時、そして出る時にそれぞれアニメーションを適用できる他のスクリプトに依存なし、超軽量（1.9kb gzip）のスクリプトを紹介します。 すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。 in-view.js -GitHub in-view.jsのデモ in-view.jsの使い方 in-view.jsのデモ デモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。 アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。
![[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/42912a7e2d55f1411cc35125c5180a65f5fb702d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016090505.png)
IE9+もサポート、CSS3 Flexboxを始める人にぴったりな極めてシンプルな使いやすいフレームワーク -FOX CSS
そろそろFlexboxを使ってみたいな、と考えている人にぴったりなCSS/Sassの超軽量フレームワークを紹介します。 もちろんFlexboxをバリバリ使っていて、シンプルなのが必要な人にもぴったりです。 FlexboxはIE11+対応ですが、IE9+にも一行加えるだけで同じHTMLで実装できます。 FOX CSS FOX CSS -GitHub Flexboxの各プロパティの使い方は、以前の記事を参考にしてください。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 FOX CSSの特徴 FOX CSSの使い方 FOX CSSのリセット FOX CSSのFlexbox FOX CSSの特徴 FOX CSSはモバイルファーストで設計されており、その半分がCSSリセット、もう半分がマイクロフレームワークで構成されています。 ライセンスはCC BY 3.0で、個人でも
[JS]ページのツアーガイドをjQuery無しで実装するスクリプト -Shepherd
Shepherdの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="shepherd-theme-arrows.css" /> </head> <body> ... <script src="shepherd.min.js"></script> </body> Step 2: HTML HTMLは普通に実装してOKです。 ガイドを表示する要素には、それが指定できるようclassを付与しておきます。 Step 3: JavaScript ガイドを表示するタイミングや内容はスクリプトで記述します。 基本書式は下記のようになり、classesに表示する場所、scrollToで自動スクロールの有無を指定します。 tour = new Shepherd.Tour defa
[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック
hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。 実装のポイントは5つ。 画像は使用しない。 spanなど、余分なHTMLは使用しない。 フォントのサイズを大きくしても自動で調整される。 可変。 背景が画像でも水平ラインが綺麗に描かれる。 実際の動作は、下記ページで確認できます。 デモは全てのモダンブラウザ、IE9+でご覧ください。 Heading Side Lines HTML HTMLは非常にシンプルで、hnやp要素のみで実装できます。 classを使用すれば水平ライン有り・無しの共存も可能です。 <body> <h2>テキストの左右に</h2> <h3 class="lines-on-sides">水平のラインを描く</h3> </bo
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
IE9以降でもHTMLフォームでファイル名とファイルの中身を外部から指定できる
昨日の日記「IE8以前はHTMLフォームでファイル名とファイルの中身を外部から指定できる」にて、福森大喜さんから教えていただいた内容として、ファイルアップロードのHTMLフォーム（enctype="multipart/form-data"）にて、アップロードするファイル名とファイルの中身を外部から指定できることを報告しました。この際にIE8以前という条件がありましたが、今度は、三井物産セキュアディレクションの望月岳さんから、「それIE9以降でもできるよ」と教えていただきました。既にご存じだったそうです。福森さん、望月さんという日本を代表するバグハンターから「秘伝のたれ」をおすそわけいただいたようで、興奮気味ですw まず、おさらいとして、IE8以前でのパターンは下記の通りでした（要点のみ）。 <form enctype="multipart/form-data" action="pro_ad
Webアプリケーションを高速化する50のトリック
MicrosoftのInternet Explorer PMであるJatinder Mann氏は、BUILD 2012でHTML5アプリとサイトを高速化する50のパフォーマンストリックというセッションで、Webアプリケーションを高速化する多くのチップスを提供した。 Mann氏が提供したアドバイスは、以下の6つの原則を中心に構成されていた。 1. ネットワークリクエストに迅速に応答する リダイレクトを避ける。上位1,000のWebサイトのうち63%は、リダイレクトを使用している。これらはリダイレクトをやめることによって10%のパフォーマンスを改善することができる。 メタリフレッシュを避ける。世界のURLのうち14%は、メタリフレッシュを使っている。 可能な限りユーザーの近くにあるCDNを使用してサーバーの応答時間を最小化する。 異なるドメインからのリソースをダウンロードすることによって、同時
Internet Explorer 10 Test Drive
Interested in checking out the new Web platform capabilities of Internet Explorer 9? Download the Internet Explorer Platform Preview right now. Welcome and thank you for investigating the first Internet Explorer Platform Preview. This release represents only a portion of the capabilities that will be in the final IE9 Web platform. Check back frequently, we will be updating the Platform Preview reg
Internet Explorer 10 Test Drive
Interested in checking out the new Web platform capabilities of Internet Explorer 9? Download the Internet Explorer Platform Preview right now. Welcome and thank you for investigating the first Internet Explorer Platform Preview. This release represents only a portion of the capabilities that will be in the final IE9 Web platform. Check back frequently, we will be updating the Platform Preview reg
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html
[CSS]2013年、素敵なアイデア満載のスタイルシートのテクニックのまとめ
IE6～IE9を同時に表示確認できるMicrosoft純正ソフト [ホームページ作成] All About![IE6～IE9を同時に表示確認できるMicrosoft純正ソフト [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)