脱jQueryのためにしたこと - Qiita
この記事は加筆して「脱jQueryのためにしたこと - ICS MEDIA」に引っ越しました。 64000PV、480いいねとフロントエンド界隈でご好評いただいた内容です。ぜひご覧ください。 ※Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
CSSはやっぱり便利！最近のWebページでよく使うさまざまなコンポーネントを実装するスタイルシートのまとめ
ここ数年でCSSは加速度的に進化し、ひと昔前まではJavaScriptを使用しないと実装できなかったのが、CSSのみで実装できるようになりました。また、サポートすべきブラウザもIE8が除かれるようになり、今まで躊躇していたテクニックも数多く利用できます。 アコーディオンやカルーセル、モーダルボックス、ポップオーバー、フリップ コンテンツなど、JavaScript無しのCSSで実装するテクニックを紹介します。
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix
米Yahoo!のフロントエンド エンジニア: Thierry Koblentz氏から、シンプルなスタイルシートで書かれたモダンブラウザ用のclearfix最新版を紹介します。 The very latest clearfix reloaded clearfixとは おさらい: micro clerafix(IE6+) モダンブラウザ用のclearfix最新版 clearfixとは 「clearfix」とはフロートした要素が親要素からはみ出してしまう、親要素の背景が表示されないなどを回避するもので、当サイトでもいくつか紹介してきました。 おさらい: micro clerafix(IE6+) まずは、おさらい。 micro clearfixは、normalize.cssのNicolas Gallagher氏によるもので、2011年にリリースされました。
HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート
HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低
IE10 以下を切る場合の JavaScript チェックリスト - Qiita
この投稿は、 JavaScript Advent Calendar 18日目の記事です。 更新履歴 こちら をご覧下さい JavaScript の書き方をアップデートする JavaScript Good Parts で書かれているような JS の書き方は、古くなりつつある部分も多いです。 正直なところ、自分はあの本が「今でも」良書だとは思っていません。 初学者に勧めることもしません。まんべんなさと普遍性と客観性から「パーフェクト JavaScript」 を勧めています。 その頃と比べると、 JavaScript をとりまく環境は変わりました JavaScript の進化に合わせて書き方もアップデートしていくべきなので、今回は分かりやすいしきい値として 「IE10 以下を切れるとしたら」 という前提で、列挙してみます。 たとえば XHR2 や File API に依存したサービスをやる場合な
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
色んなXSS – nootropic.me
2015/4/16(木)：ページの一番下に追記を記述しました。 その昔、なんとかキャンプというセキュリティのイベントに参加した時「アウトプットが大事」と言われたのを思い出しました。 でも、普通自分の見つけた知識は後生大事に抱えておきたいもんだと思います。 そこで今回はそういった何かしょーもないものを捨てるべく、溜め込んだ色んなXSSのPoCを少し書き出してまとめました。 今まで自分で見つけたものや海外のSecurity Researcher達から収集したものもあります。 さて、今回リストアップしたPoCの見方ですがいくつかの項目があります。 一番上の「手法」はタイトルみたいなものだと思って下さい。 二番目の「PoC」はスクリプトを実行する為のコードです。殆どがアラートが出るだけのスクリプトの為危険なコードは無いつもりですがご自分のブラウザで実行する際は自己責任でお願いします。リンクをクリッ
3年間かけて培ったWebシステム開発におけるHTML/CSSコーディングまとめ｜TechRacho by BPS株式会社
こんにちは。私は今まで、3年間、RailsやCakePHP,Ethnaなど様々な言語やフレームワークを使って開発を行ってきました。その中で、共通して使ってきたのがHTML/CSSです。私が3年間かけて培ってきたHTML/CSSの書き方ややり方、方針などをこの場を借りてまとめたいと思います。 まずはじめに 対応ブラウザを確認する スマホ対応の必要があるかを確認する HTML/CSSを使った開発のルールを決める HTML編 idやclassの命名を考える idは多用しない HTMLの共通化を考えた記述をする コラム: IE(後方互換モード)の対応が必要になった時の対処 CSS編 共通で使えるCSSは共通用のファイルを作ってまとめる CSSの適用範囲を考慮して記述する reset.cssを使うかどうかを決める CSSの!importantはできるだけ利用しない BootstrapのCSSを上書き
【画像】 IEの擬人化ｗｗｗｗｗｗｗｗ 悲しすぎワロタｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ : ゴールデンタイムズ
1 ： 頭突き(岡山県) ：2013/11/24(日) 20:13:56.46 ID:V87JMtlE0 BE:871947252-PLT(12030) ポイント特典 久々に起動してもらったIEちゃん https://twitter.com/kngtr/status/404478911368531968 https://twitter.com/kngtr/status/404480598875443200 https://twitter.com/kngtr/status/404493378257055744 https://twitter.com/kngtr/status/404522930844880896 42 ： アキレス腱固め(福島県) ：2013/11/25(月) 03:01:30.05 ID:nQxdN7M+0 絵がうめえ 6 ： ムーンサルトプレス(東京都) ：2013/11
シンプルイズベスト！おしゃれなモーダルウィンドウを実装できる「SIMPLE MODAL」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、ももこです。 おしゃれなWebサイトでコンテンツの表示に、モーダルウィンドウを使うと格好よく映えたりしますよね。 今回はクールなモーダルウィンドウを簡単に設置出来るJavaScript「SIMPLE MODAL」※すでに提供を終了していますをご紹介したいと思います。 「SIMPLE MODAL」 デモ 用意されているデモは全部で8種類あります。 その中でも特に使用頻度が高そうな5つのデモをご覧ください。 ALERT シンプルなアラート風ウィンドウ 商品紹介などに使えそうな基本的なウィンドウ MODAL AJAX AJAXを使用し、コンテンツにアコーディオンを含めているウィンドウ MODAL IMAGE LightBox風に画像を表示するウィンドウ VIDEO EMBED 動画を埋め込んで再生するウィンドウ 記述 ウィンドウ内のテキストや画像は全てスクリプトの中に含めます。 「
+ INITIALIZE - .NTL ～ブルーハーツと純文学とオンライン小説のサイト～
ようこそ。クソッタレ解放区へ ココは電子の辺境地帯、INITIALIZE オンライン純文学小説とプログラミング教材、ブルーハーツの紹介ページ +2003.12.13 , open +2015.11.01 - 近況報告など 虎徹「更新が滞って１年ほど経ってしまいました。いろいろありましたが、システムエンジニアとして変わらず働いております。１年前といえばフリーランスとして働いていましたが、諸事情により派遣会社で働いております。モチベーションも底をつくようなことが多々あり飯も喰えない日々もありましたが、生きています。創作活動は相変わらず止まったままですが、あの頃の自分にしかできないことがあったのだなぁと思います。またいつか創作活動ができたらいいなと思います」 カガミあわせの顔 死に損ないとトカゲ女
背景色をrgbaとrgbで2重指定するときのIE地雷
はじめに結論 CSSで背景に透過色を指定する際に，本来のrgbaとIE6-8用のrgbを2重で書いたりしますが，うっかりハマるポイントがあるので紹介． 結論から言うと背景プロパティは，background-colorではなく，backgroundを利用しましょう，ということになります． Goodパーツ こう書くことを鉄の掟としておけば，特にハマることはないとおもいます．きっと． .someClass { background: rgb(128,128,128); /* または background-color: rgb(128,128,128); */ background: rgba(128,128,128,0.8); } 両方ともbackground指定にしておけば覚えやすくて安全ですが，rgb側はbackground-colorでも大丈夫です． Badパーツ こうやるとIE6-8で背
アンダースコアハック
CSS覚え始めの頃、多様していたハックがアンダースコアハックです。 アンダースコアハックとは、Win版IEのみ適用させたい時に使います。 コレは、IEのバグを利用したテクニックで、プロパティの前に特殊記号などが記述されていた場合でも読み飛ばして通常と同じように解釈してくれます。 記述方法はいたって簡単。 プロパティの前に _ を置くだけ。 使いどころとしてはかなり多様で、IEだけ表示がおかしい時には何かと便利に使えます。 例えば、 .hoge { border-top:1px solid #CCC; margin:1px 10px 20px 0; _margin-top:0; } などのように、記述すればIEだけmargin-topが0になります。 IEには、互換モードの時に、 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう というバグがあるので、バグにはバグ
IE 7以下で背景画像が表示されない場合の対処法
IEで変な現象が起きてしまったのでメモ。 Internet Explorer 7以下で背景画像が表示されなくなるといったもの。 その原因となった部分と対処法。 背景が表示されなくなったページこういうページを作ってました。 背景画像が表示されなかったページ このページの「タイトル」と書かれている部分ですね。 （実際に作ったページとは画像を変更しています） この部分のHTMLとCSSは以下。 <div id="main"> <div class="article"> <div class="head"> <h2>タイトル</h2> </div> <div class="body"> <p>テキスト。テキスト。テキス...</p> </div> </div> </div>/* ここが表示されない */ #main .article .head { background: url(img/main
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSグラデーションで作った背景パターンのサンプル - NxWorld
第三次ブラウザ戦争がそろそろ閉幕します - latest log
日本でガチで闇が深い土地WWWWWWWWWWWWWWWWWWWWWWWW
HTML5 NIGHT 08. Web × パフォーマンス技術
[ CSS ] Internet Explorer で見出しの文字が欠ける場合の対処法![[ CSS ] Internet Explorer で見出しの文字が欠ける場合の対処法](https://cdn-ak-scissors.b.st-hatena.com/image/square/79893ac260f3a28e9b48c41237f08263bc13f852/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2015%2F10%2Fmojikake.png)
