スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ｷﾞﾐｷﾞﾐ└( ＾ω＾ )」ｼｪｲｸ♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは？ スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<ｱﾘｰﾃﾞｳﾞｪﾙﾁ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header
使いやすいサイトを目指して！入力フォームの使いやすさを劇的にアップさせるjs厳選4点ご紹介！【DEMO付】 | 株式会社WEB企画
使いやすいサイトを目指して！入力フォームの使いやすさを劇的にアップさせるjs厳選4点ご紹介！【DEMO付】 シェア つぶやく ブックマーク LINE Pocket 「使いやすいサイト」に必要不可欠なのがお問い合わせフォームの使いやすさじゃないかと思います。そこで今回は、お問い合わせフォームを使いやすくする為のカスタマイズを色々試してみました。 お問い合わせフォーム関連のjsは色々あるのですが、今回は導入してみて個人的に使いやすいなと思ったものを厳選して4つご紹介いたします。全てDEMO付きですので是非チェックしてみてくださいね。それではどうぞ！ 1.間違いがあったらアラートを出してくれる！：validetta.js わりと基本的な機能ですが、外せないのがこれ。入力フォームに間違いがあった場合、送信時にアラートを出してどこがどう間違ってくれるかを教えてくれます。 この「validetta.j
JavaScriptを楽しく学べるRPG CodeCombat
前回、Rubyを楽しく学ぶコンテンツのエントリで紹介したRuby Warriorが楽しいという声を幾つか見かけました。 オンラインでコーディングできるサービスは色々ありますが、デザインや音楽、ゲーム性が優れていて熱中しやすいのでしょう。 残念ながら私は参加できませんでしたが、今月のGinza.rbもRuby Warriorをみんなでやってみるという催しで盛り上がったようです。 RubyWarriorのBGMが中毒性高い。しばらく口ずさんでしまいそう。#ginzarb— Masatoshi Iwasaki (@masa_iwasaki) April 15, 2014 RubyWarriorに集中していてだれもツイートしてない^^; #ginzarb— 高橋 明 (@Talos208) April 15, 2014 今回は同様にゲーム感覚でJavaScriptを学習でき、日本語化もされているC
要素や背景をスクロールに合わせてアニメーションさせるスクリプト -Swift Parallax | コリス
デモページ：タイムライン Swift Parallaxの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト、当スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <!-- Iclude jQuery (laters version) --> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <!-- Include Swift Parallax files --> <link rel="stylesheet" href="css/swift.css"> <script src="js/swift.js"></script> </head> Step 2: JavaScript 外部ファイルを記述した下あたりに、スクリプトをセットします。 <script
表組の奇数行／偶数行で色分けするCSS3/JS - NoteBook
CSS3では、:nth-child疑似クラスがサポートされました。これを使うと、表組などで奇数行、偶数行それぞれに背景色を付けることなどが簡単にできます。 ただし対応しているブラウザはFireFox3.6, Safari4+, Chrome5+, Opera10.6で、IE6,7,8は対応していません。 しかしながらIEには簡単なJavaScriptで対応することができます。 サンプルはこちら。 CSS3での指定は以下のようになります。 tr:nth-child(odd) td { background-color: #fdfff3; /* 奇数行の背景色 */ } tr:nth-child(even) td { background-color: #f8f8f8; /* 偶数行の背景色 */ } IEではJavaScriptでTR要素にoddクラスやevenクラスを付けます。（後
縦書きを可能にするjavascriptライブラリ「竹取JS」
SEO的にも問題の無い縦書きのコンテンツを作りたい。そんな時に便利なのが、今回紹介するjavascriptライブラリ「竹取JS」です。javascriptで指定されたブロックを縦書きに変換してくれます。 HTMLのみで縦書きというのは非常に面倒でしたが、これなら気軽に縦書きコンテンツを作れそうです。 詳しくは以下 上記のように文字だけではなく、リストや、取り消し線、テーブルなど様々なHTMLで創られた基本要素を縦書き化してくれますので、従来のサイトの構造を保ったまま縦書きのコンテンツを制作することが可能です。また切り替えボタンやダブルクリックで横書きへ瞬時に切り替わる機能も実装されています。 対応ブラウザはInternetExplorer5.5+ / Firefox3.5+ / Safari3.2+ / Chrome3.0+ / Opera10.5+と幅広いブラウザで利用可能。ライセンスは
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
すっきりしたデザインのギャラリーライブラリ·Galleria MOONGIFT
GalleriaはレスポンシブWebデザイン対応を謳ったJavaScriptイメージギャラリーです。 デジカメで撮影した多量の写真も見せなければHDDの肥やしでしかありません。そこでWebサーバ、Flickr、Picasaなどにアップロードした後はGalleriaを使ってギャラリー化してみましょう。 サムネイルが下に並び、上で写真の表示を行います。 フローティングで説明も表示できます。 縦の写真も問題ありません。 大きな写真もぴったり表示されます。 Picasa/Flickrといった外部リソースの表示も行えます。 Galleriaはレスポンシブなイメージギャラリーとなっていますが、MIT Licenseの範囲で公開されているテーマでは対応していないように見えます。また、プレミアムなテーマは販売されており、より多様なデザインのギャラリーが展開できるようになっています。 GalleriaはJa
サイトのギャラリーに最適なスマートなギャラリーライブラリ「Galleria」
WEBで画像を表示するようなギャラリーはよく見かけるし、作品紹介や、写真紹介など様々な用途で使われる場合が多いです。Flashなどを使ってギャラリーページを作っても良いのですが、もっと手軽にかっこいいギャラリーを作りたいそんな時におすすめなのが、今回紹介するJavaScriptベースのライブラリ「Galleria」です。 「Galleria」はJQueryを使ったライブラリで、シンプルながらも画像表示にフェードをかけたり画像の表示もスマートで、導入も比較的簡単にできるようになっています。 詳しくは以下 公開されているDemoは初めの画像のように、メイン画像下にサムネイルをまとめた「Galleria Demo 1」ともう一つはメイン画像の左側にサムネイルを配置した「Galleria Demo 2」の2種類。どちらもCSSでレイアウトは制御されているので、比較的カスタマイズしやすくなっています
ÔÚÏß¹Û¿´¾«Æ·¹ú²ú¸£ÀûƬ-Å·ÃÀÉ«Å·ÃÀÑÇÖÞÁíÀàÔÚÏß-¹ú²ú¾«Æ·¾Ã¾Ã¾Ã¾Ã¾«Æ·-Ò»¸öÌíÏÂÃæÁ½¸ö³ÔÄÌ°ÑÍÈ°Ç¿ª
ÔÚÏß¹Û¿´¾«Æ·¹ú²ú¸£ÀûƬ-Å·ÃÀÉ«Å·ÃÀÑÇÖÞÁíÀàÔÚÏß-¹ú²ú¾«Æ·¾Ã¾Ã¾Ã¾Ã¾«Æ·-Ò»¸öÌíÏÂÃæÁ½¸ö³ÔÄÌ°ÑÍÈ°Ç¿ª-Å·ÃÀÑÇÖÞÈÕº«¹ú²ú×ÛºÏÍø-99ÔÚÏß¾«Æ·ÈÕº«Ò»ÇøÃâ·Ñ-ÑÇÖÞ¹ú²úרÇøУ԰ŷÃÀæÃæÃ_Ö÷ҳΪÄúÌṩ¸ßÇåÎÞÂë¹ú²ú¡¢Å·ÃÀ¡¢ÈÕº«ÎÞɾ¼õÍêÕû°æÊÓƵ£¬ÒÔ¼°¸ßÇåÃÀüͼƬ¡¢¼¤ÇéС˵¡£»¶ÓÊÕ²Ø ÔÚÏß¹Û¿´¾«Æ·¹ú²ú¸£ÀûƬ-Å·ÃÀÉ«Å·ÃÀÑÇÖÞÁíÀàÔÚÏß-¹ú²ú¾«Æ·¾Ã¾Ã¾Ã¾Ã¾«Æ·-Ò»¸öÌíÏÂÃæÁ½¸ö³ÔÄÌ°ÑÍÈ°Ç¿ª-Å·ÃÀÑÇÖÞÈÕº«¹ú²ú×ÛºÏÍø-99ÔÚÏß¾«Æ·ÈÕº«Ò»ÇøÃâ·Ñ-ÑÇÖÞ
Flashと代替コンテンツをswfobject.jsで切り替え | WebScripter.jp
仕事でFlashの代替画像を入れる必要があったので、Flashのパブリッシュ時に書き出されるAC_RunActiveContent.jsで出来るのか試してみましたが… javaScriptオン、FlashPlayerオフ、もしくは使用できない状態では代替画像を表示する事は無理なようで、他に代わるものは無いかと調べてみたら、swfobject.jsといういいものがありました。しかも設置はとても簡単で--> ダウンロード先：swfobject - Project Hosting on Googole Code 設置方法は２通りあります。 1）オブジェクトタグを使って静的に埋め込む 2）javascriptを使って動的に埋め込む 1）の方法だと、IEでアクティブコントロールの許諾要求がでるようなので、2）の方法で記述してみます。 <head>〜</head>タグ内に以下のコードを記述
スライドショー 無限ループの考え方 | ENDESIGN
今回解説するのは某アートディレクション事務所のサイトにあるような 画像が左に消えて右からでるような無限に続くスライドショーです。 色々なやり方があると思いますが、僕は float を利用した 方法で作 今回解説するのは某アートディレクション事務所のサイトにあるような 画像が左に消えて右からでるような無限に続くスライドショーです。 色々なやり方があると思いますが、僕は float を利用した 方法で作っていきます。 完成品はこちらです。 -デモ あえてスライドを早くしています。 HTML <div id="slide_wrap"> <div class="slide">One</div> <div class="slide">Two</div> <div class="slide">Three</div> <div class="slide">Four</div> <div c
角丸を簡単に作れる『curvyCorners』-JavaScript Library Archive
角丸を簡単に作れる『curvyCorners』 Check Tweet 配布元：curvyCorners ライセンス：General Public License curvyCornersはボックスの角を丸く表現してくれるライブラリになります。 設置方法 rounded_corners_lite.inc.jsファイルをhead要素で読み込みます。 <script type="text/javascript" src="rounded_corners_lite.inc.js"></script> 次に、角丸にしたいブロックレベル要素にclass属性を付けて配置します。 <div class="myBox"> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷる
API キーの取得 - スタート ガイド - Google Maps JavaScript API v3 — Google Developers
フィードバックを送信 概要 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Maps JavaScript API を使用すると、独自のコンテンツと画像を使って地図をカスタマイズして、ウェブページおよびモバイル デバイスに表示できます。Maps JavaScript API で提供されている 4 つの基本地図タイプ（道路地図、衛星、ハイブリッド、地形）に、レイヤとスタイル、コントロールとイベント、さまざまなサービスとライブラリを使用して変更を加えることができます。 対象読者 このドキュメントは、JavaScript のプログラミングとオブジェクト指向プログラミングの概念を理解しているデベロッパーを対象にしています。また、ユーザーの視点で マップを使い慣れていることも必要です。ウェブ上に多数ある JavaScript チュートリアルも参考にしてください。 こ
フラットUIなカレンダー·CLNDR.js MOONGIFT
CLNDR.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 カレンダー機能は意外とよく使われます。イベント系はもちろん、ブログのサイドバーにつけることもあります。そんなカレンダー表示をjQueryで提供するのがCLNDR.jsです。 デモ。左側にカレンダー、右側にイベントの一覧が表示されています。 別なデモ。カレンダーのみ表示して日付をクリックすると… イベント表示に切り替わります。 こちらはすっきりとしたデザインのデモ。 CLNDR.jsは今時のフラットデザインですっきりとした見やすいカレンダーになっています。そのまま使うのはもちろんjQueryベースとあって、他の処理と組み合わせて拡張するのも容易です。シンプルなUIだけに使い勝手が良さそうです。 MOONGIFTはこう見る カレンダーの利用場面はとても多いです。単純に表示するの
[JS]これはスゴイ！人の声でウェブページをコントールできるようにするスクリプト -annyang!
下部からアニメーションでエレメントを表示 annyang!の使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 jQueryなどの他のスクリプトは必要ありません。 <script type="text/javascript" src="annyang.min.js"></script> Step 2: JavaScript スクリプトの基本書式は、トリガーとなる言葉をコマンドとして指定し、実行するスクリプトを記述します。 下記は、最後のデモのエレメントをアニメーションで表示するスクリプトです。 <script type="text/javascript"> if (annyang) { // Let's define our first command. First the text we expect, and then the function it s
カレンダー | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
祝日の表記等はありませんのでご注意ください。 PHP版のカレンダー（月切替機能なし）はこちら、 jQuery版のカレンダー（月切替機能付）はこちらです。 ライブラリのダウンロードと設置 こちらをクリックしてダウンロードしてください。 ダウンロードしたcalendar.jsを任意の場所へ置き読み込みます。 <script type="text/javascript" src="calendar.js"></script> オブジェクトの生成と表示 Calendarオブジェクトを生成します。 引数には表示する要素とオプションを設定でき、第一引数（表示する要素）は必須で、第二引数（オプション）は省略できます。 引数 初期値 説明 第一引数
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]レスポンシブ対応の画像表示テクニック！見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint![[JS]レスポンシブ対応の画像表示テクニック！見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint](https://cdn-ak-scissors.b.st-hatena.com/image/square/89b7f74f30b33e347af5955101ddb9470c5139d7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082501.png)
HTML、CSS、JavaScriptの練習に最適な便利ツール『rendur』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
CSS Lecture: swfファイルを簡単に埋め込めるswfobject.js