この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト leanModal leanModal leanModal はとにかく軽量です。デモを触ってみると、その軽さがわかると思います。 ただし、軽さを徹底的に追求した結果なのか、IE6 には対応していないとのこと。 また、イメージギャラリーなどとしては使えないとのことです。 ちょっとした文章を表示するだけの場合などはこれで十分ですね。 そこそこ軽量、そこそこ機能的 Simple Modal Simple
こんにちはこんにちは!! ニコニコ超会議2012 『超エンジニアミーティング』で喋った時のスライドを公開します! 『ふつうのformをつかいたい』 - はまちや2 - ニコニコ超会議2012 難しい話は苦手なので、普通のお話です。 あとこのスライドはIEでは動きません。他のブラウザで見てね。 (追記) IEでも見られるようになりました。たぶん。 超エンジニアミーティング全体の内容については、 『ニコニコ超会議の「超エンジニアミーティング」 を全部取材してみた』でまとめてくれています。 ちなみにぼくは自分が喋ったあとは、ずーっと隣の『ニコニコ学会β』の発表を見てました。 ロボット作ったりとかすごいかっこいい。 (関連記事) その言葉は誰のためのもの? [この日記のブックマークコメントを見る/書く ]
知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう CSSで多彩な表現が可能に 本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。 従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。しかし、CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。 この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。 ベンダプレフィクスについて CSS3の多くの機能はまだ規格策定段階のも
海外のサイトを見るとリッチなユーザーインターフェースが実装されたものが増えてきているのに気付きます。私もその波に乗っていきたいので、今年は、このブログに対して「UIの強化」を目標にいろいろやっていこうと考えています。 その第一弾として、タイトルの通り「ページ遷移時に指定要素をフェードイン・フェードアウトさせる機能」を実装してみました。詳しく言うとサイト内のページ間を移動する際に、テンプレート部分の表示は残したまま、コンテンツ部分(ブログの記事)のみをフェードアウトさせ、ページ遷移後も同様にコンテンツ部分(ブログの記事)のみをフェードインさせるといった機能です。機能の実装は意外と簡単でjQueryとそのプラグインで実現可能でした。 ページ遷移時に#contentの部分をフェードイン・フェードアウトさせる実装方法について以下にまとめてみました。 リンクのクリック時に指定個所をフェイドアウトさせ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
通話中に、次の操作を行うことができます。 マイクのオンとオフを切り替えます。 ビデオのオンとオフを切り替える。 カメラの向きを前面または背面に切り替える (携帯電話でのビデオ通話のみ)。 現在の通話と着信通話を結合します (Skype for Web。 グループの呼び出しで手を上げるか下げると、中断することなく追加する機能がグループに通知されます。 グループ通話で参加者リストを表示します。 通話コントロールから、または最近のチャットで進行中の通話から通話 を終了します。 注: 携帯電話での Skype 通話中に、一部の通話コントロールが非表示になる場合があります。それらを表示するには、画面をタップします。 お使いのプラットフォームまたはデバイスによっては、Skype 通話中に利用できる機能が他にもある場合があります。 通話中にチャットに戻る。 通話ボタンをタップして通話画面に戻ります。
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Fire.appはフォルダを監視してSass/Compass/CoffeeScriptを自動変換するソフトウェアです。 最近はCSS/JavaScript/HTMLをそのまま書くのではなくSassやCoffeeScript、Haml/Markdownを使ってそれぞれのフォーマットに変換するのが当たり前になってきています。そこで使ってみたいのがFire.app、自動ファイル変換ソフトウェアです。 起動します。 メニュー常駐型です。 設定画面です。 Growlを使った通知に対応しています。 Livereloadに対応しています。 履歴です。 フォルダを指定しました。 プロジェクトテンプレートを生成してくれる機能があります。 生成しました。後は修正すると自動的に別フォーマットファイルを生成してくれます。 Fire.appはSass/CompassからCSSを、Haml/ERB/Markdownか
履歴 愛知高等学校 東海大学文学部北欧文学科 東北大学大学院経済学研究科(中途退学) 個人サイト »Hiroshi Sawai »Info Town ご質問などありましたら下記アドレス宛へメールをお送りください。 info@findxfine.com WordPress テーマ、プラグインを公式テーマディレクトリ、公式プラグインディレクトリで公開しています。 テーマ WordPress › Theme Directory › kanagata プラグイン Category Archives « WordPress Plugins List Calendar « WordPress Plugins Min Calendar « WordPress Plugins Resize Editor « WordPress Plugins concrete5 Infotown Table 簡単な操作で
* See What Sucks O hai.We’ll help you choosing the best HTML5 based video player for your next project. Last update: 2017-08-10 Feedback on Twitter.Let’s use the simple and easy-to-remember hashtag #videosws for feedback and news. See you there! Information.Made by Philip Bräunlich and Gerrit van Aaken. New players and updates? Demo video by Visuelle Zeiten. Still missing some players:Accessible H
NHN Japan 採用情報のページです。スタッフの声をお届けします。NHN Service & Staff Profile NHN Japanのスタッフやサービスの規模感をご紹介します。
CSS3を使うにあたっていつも問題になるのが Internet Explorer(IE)です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか? ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何?」「CSS3セレクタってどういうもの
All Microsoft Global Microsoft 365 Teams Copilot Windows Surface Xbox Deals Small Business Support Software Windows Apps AI Outlook OneDrive Microsoft Teams OneNote Microsoft Edge Skype PCs & Devices Computers Shop Xbox Accessories VR & mixed reality Certified Refurbished Trade-in for cash Entertainment Xbox Game Pass Ultimate PC Game Pass Xbox games PC and Windows games Movies & TV Business Micro
There’s no support in Internet Explorer or Opera yet, but I would suggest you use the ‘ms’ and ‘o’ prefixes for future proofing. I’ve developed a function in the demonstration page which handles the prefix shenanigans for you: var pfx = ["webkit", "moz", "ms", "o", ""]; function RunPrefixMethod(obj, method) { var p = 0, m, t; while (p < pfx.length && !obj[m]) { m = method; if (pfx[p] == "") { m =
この記事は賞味期限切れです。(更新から1年が経過しています) jQueryUIのdialogは結構お世話になっているのですが、たまに欲しい機能がなかったり、あっても説明されてなかったりするのでここにDialogカスタマイズTipsをしたためておきます。 この記事の内容は既に古くなっています。現在最新バージョンのjQueryUIでは挙動が改善されていたり、渡せるオプションが変わっていたりします。 Modalしたダイアログをオーバーレイクリックで閉じる 任意の要素をクリックして閉じる アニメーションで閉じる・開く エフェクト中にオーバーレイの後ろに回りこんでしまうのを回避する 閉じる・開くアニメーションにパラメータを渡す 閉じるついでにデストロイする 1. Modalしたダイアログをオーバーレイクリックで閉じる escキー押下で閉じるオプションはあるのですが、このオプションはない様子。 そこで
だいたい仕事でやっていると、学習の結果が自己完結してしまって、それを後で体系的にまとめたりだとか、説明的に再解釈するというプロセスを端折って次へ進んでしまうということに成りがちなので、それを誰かに説明したりする場合に、言葉にできていない部分が多々みつかって、うまく伝えられないという事態を被る事がある。 そんなわけで、自分なりの CSS のデザインのやり方をまとめてみる。 デザインの戦略 デザインを行うにあたっては必ず戦略をたてる。何が正しくて何が間違っているのかを決定していくためには、その拠り所になるものを決めていないと、結果キメラが出来上がってしまいかねない。戦略とは法律に対する憲法のようなもので、法律は絶対に憲法に違反することができないように、デザインはデザインの戦略に服従する。それに違反した場合には、違憲立法審査権を発動できるアーキテクチャをつくらなければ、デザインはいずれ崩壊してい
「フォームの button と img と Firefox 4」というエントリを去年書いてまして、要は Firefox だけ button 要素に CSS で消せないパディングが付いてて、中の要素(テキストも含む)との間に隙間が入ってしまうのが場合によっては困るかなあという話なんですが、たまたま今日なんとなく normalize.css のソースとそのコメント部分の翻訳記事を読んでますと、その辺を解決するコードがしっかり含まれているのに気が付きました。 該当部分は次の部分で、最新バージョンでいうと470行目以降。 /* * Removes inner padding and border in FF3+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ b
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQuery.LazyJaxDavisというライブラリを書いた。このライブラリは、一般的な静的に生成されるようなサイトを、HTML5 history APIの力を使って素敵にダイナミックにします。 このライブラリを使うと、すべてのリンクを、通常遷移の代わりに、Ajaxベースのダイナミックな遷移にします。その際、history.pushStateして、通常の遷移と同じように見せる。言葉にするのは難しいので、実際にサイトを見てもらったほうが分かりやすいと思う。以下のサイトの左ナビをポチポチクリックするなりして。 jQuery.LazyJaxDavis加えて、結構汎用的なURLルーターの機能も備えて
JavaScript によるイベントドリブン アジェンダ JavaScript の言語について DOM について イベントについて jQuery について MVC アーキテクチャについて まずはじめに Just moment! Web で JS を使うとき、HTML の知識が前提となることが多い http://www.kanzaki.com/docs/htminfo.html 少なくとも「簡単なHTMLの説明」は押さえておきたい。 目的 講義時間は限られているので JS を学ぶ上でとっかかりをつかめること リファレンスを提示します。概念を理解 言語的部分、DOM 及びイベントドリブンなプログラミング 覚えようとするとクソ多いのでリファレンスひける部分は覚えない JS とはどんな言語であるか? 基本クライアントサイド=ブラウザで動く 実装がたくさんある はてなのエンジニアはみんな誰もがある程
Sorry; your browser does not support svg! Sorry; your browser does not support svg! http://www.meetup.com/framsia/ < 100ms "0.1 second [100ms] is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result." Jakob Nielsen
Interested in learning more about jQuery? Check out the jQuery Fundamentals course at Pluralsight.com. We’ve been seeing a sharp increase in the number of people interested in getting started with jQuery lately in our training and consulting business which is exciting since it’s such a great framework to use for client-side coding. If you’ve been fighting with cross-browser issues and want to make
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The goal is to have a ~5-10k modular library that downloads and executes fast, with a familiar and versatile API, so you can concentrate on getting
Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit! How much library code do you really need — 50K? 100K? 150K? More? How much of that do you really use? Sure, we all love our favorite monolithic frameworks, and sometimes we even use them fully. But how often do we reach for the ride-on John Deere tractor with air conditioning and six-speaker sound system, when a judiciously applied
履歴 愛知高等学校 東海大学文学部北欧文学科 東北大学大学院経済学研究科(中途退学) 個人サイト »Hiroshi Sawai »Info Town ご質問などありましたら下記アドレス宛へメールをお送りください。 info@findxfine.com WordPress テーマ、プラグインを公式テーマディレクトリ、公式プラグインディレクトリで公開しています。 テーマ WordPress › Theme Directory › kanagata プラグイン Category Archives « WordPress Plugins List Calendar « WordPress Plugins Min Calendar « WordPress Plugins Resize Editor « WordPress Plugins concrete5 Infotown Table 簡単な操作で
履歴 愛知高等学校 東海大学文学部北欧文学科 東北大学大学院経済学研究科(中途退学) 個人サイト »Hiroshi Sawai »Info Town ご質問などありましたら下記アドレス宛へメールをお送りください。 info@findxfine.com WordPress テーマ、プラグインを公式テーマディレクトリ、公式プラグインディレクトリで公開しています。 テーマ WordPress › Theme Directory › kanagata プラグイン Category Archives « WordPress Plugins List Calendar « WordPress Plugins Min Calendar « WordPress Plugins Resize Editor « WordPress Plugins concrete5 Infotown Table 簡単な操作で
個人的に制作に欠かせないアプリケーションの一つがAdobe Bridgeです。 制作者の方は既に知ってるアプリケーションだとは思いますが、春ということで、新人の制作者やAbodeのアプリケーションを使い始めたばかりの人向けに書いてみました。 個人的に制作に欠かせないアプリケーションの一つがAdobe Bridgeです。 制作者の方は既に知ってるアプリケーションだとは思いますが、春ということで、新人の制作者やAbodeのアプリケーションを使い始めたばかりの人向けに書いてみました。 多数の形式のファイルをプレビュー サブフォルダ内の表示 ファイル名のリネーム ワークスペースの切り替え キーワード・レート・ラベルの追加 フィルター スマートコレクション スタック フルスクリーンプレビューやレビューモード Mimi Bridge Adobe Bridgeは写真や制作ファイルの管理・閲覧が簡単にでき
かゆいとこだらけの Ex Flex Fixed (サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed)を作り直しました。 改善内容 fixed 要素の幅を自動調整するようにした リキッドレイアウト(可変幅)でちゃんと表示するようにした fixed 要素がコンテナからはみ出ないようにした fixed 要素がウィンドウ高さに収まらない状態でのスクロール時の表示を見やすくした 動的にレイアウトサイズが変更されても、ちゃんと表示されるようにした カラム高さを揃えるプラグインと併用できるようにした という訳で半年も放置しておいてあれですが、ちょくちょく問い合わせもあるので、ご利用の際には新バージョンでどうぞ。 動作確認 以下のレイアウトのデモページで、新旧それぞれのバージョンの動作を確認してみます。 <div class="heade
SUBARUの公式見積りシミュレーション。グレード、メーカーオプション、アクセサリーを選んで360º自由にエクステリアイメージをご確認いただきながら、簡単に見積り試算が行えます。おクルマのご検討にぜひご利用ください。
コードレビューをしてると「なんじゃこりゃぁ!?」というコードにまれに出くわします。 既存のコードとの兼ね合いでなってる場合は、致し方無くても、新規コードまで真似するのは良くないですよね。 そろそろ新人エンジニアの中には「はじめてのこーでぃんぐ」をする人も現れるのではないでしょうか。 そんな時、参考にするのは当然、既存のコードでしょう。でも、果たして既存のコードは真似するべき綺麗なコードでしょうか? というわけで、私がレビュー時に良く注意する点をアンチパターンとしてまとめてみました。 ちなみに私はWeb屋さんなので、業界違うと微妙に違うところもありそうですけど、本質的なところは変わらないと思ってます。 パターンの名前は一般的なのをWikipediaから引っ張ってきたり、自分で思いついたのを適当に書いたりしています。 太っちょメソッド 名前のとおり大きすぎるメソッドを作るアンチパターンです。
あなたの健康状態を改善する簡単で自然な方法は数多くあります。ここでは、そのいくつかをご紹介します: 1.休息と睡眠を十分にとる。睡眠は全身の健康維持に不可欠であり、気分の改善、ストレスの軽減、エネルギーレベルの上昇に役立ちます。 2.健康的な食品を食べる。栄養価の高い食事は、気分を改善し、エネルギーレベルを上げ、全体的な健康を促進するのに役立ちます。 3.定期的に運動する運動は、ストレスの軽減、気分の改善、エネルギーレベルの向上など、心身の健康にとって多くのメリットがあります。 4.日中、休憩をとる。1日の中で休憩を取ることは、ストレスを軽減し、集中力と生産性を向上させるのに役立ちます。 5.愛する人とつながる。愛する人と過ごすことは、ストレスを軽減し、ポジティブな感情を促進し、全体的なウェルビーイングを向上させることができます。 6.自分が楽しめることをする楽しいことをすることは、ストレ
I'm Hakim El Hattab, a Swedish front-end developer and interface designer. I co-founded and am working on Slides. +++ Slides is a platform for creating, presenting and sharing slide decks. Sign up for free or check out this demo presentation. ResumeFilter.AI Upload a job description + resumes and ResumeFilter will tell you who's the best fit. Plus, get an individual report including strengths, wea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く