Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう
Jeff Croft「web標準が成功しhtml名人は用済みになった」 - 以下斜め読んだ内容
jeffcroft.com 2014.1.3のブログエントリ 2014.2.13追記。結び（diversify or die）を誤解してた Web Standards Killed the HTML Star – JeffCroft.com 「html/cssが得意なだけでは飯が食えない」という周知の事実について 「名人」としての活動歴（書籍、登壇）のある人が現状について書いたエントリ 「あの名人はいま」風で面白く読んだ 以下斜め読んだ内容 2003年にJeffrey Zeldman「Designing With Web Standards」を出版した頃の話 html/cssかくあるべし、と議論されてた レイアウトはtable要素でなくcssで 画像置換のテクニック。これはアクセシビリティを守るため semanticなマークアップ - などなど カンファレンスも何度もあった。本を書いた人も
パフォーマンスから考えるSass/Compassの導入・運用
- The document discusses the introduction and use of Sass and Compass for a large-scale e-commerce site. - Key aspects covered include using Sass features like nesting, mixins, extends and @import to organize CSS, Compass features like sprite generation and creating a style guide. - The results of adopting Sass/Compass included improved development speed and a 40% increase in site traffic over 4 m
身につけておきたいWebサイト高速化テクニック #1｜アジェンダ編 | DevelopersIO
Webサイトの表示高速化対策していますか？ 日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。 特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。 日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。 幸いなことに僕も最近鶴の一声によってクライアントからサーバー周りまで包括的な高速化対策を経験する機会を得ることができました。 それまでは、「手間がかかりすぎるからできればやりたくない」というのが本音でした。職務怠慢ですね（苦笑）。 でも、できるだけ楽したい！と思うのが人の常。 この連載ではできるだけ楽をしながらできる高速化手法と計測結果を1つ1つ紹介しようと思います。 基本的にはすべて受け売りの内容です。やってみた対策を羅列して、連載の中で自分で試
CSS Nite LP23フォローアップ（4）『設計段階から実装まで、今すぐ始める高速化＋ライブデモ』（こもり まさあきさん）｜CSS Nite公式サイト
CSS Nite LP23フォローアップ（4）『設計段階から実装まで、今すぐ始める高速化＋ライブデモ』（こもり まさあきさん） 記事公開日：2013年1月 8日（火） 2012年6月30日（土） 、ベルサール九段で開催したCSS Nite LP, Disk 23「表示速度最適化」のフォローアップとして、こもり まさあきさんの『設計段階から実装まで、今すぐ始める高速化＋ライブデモ』のスライドなどを公開します。 スライド（PDF、99ページ、4.2MB） 音声（前半） 音声（後半） 当日デモで最適化したサイト 最適化前（移行しただけ）のサイト Pingdom Toolsでチェックした結果 メッセージ こもりです。LP23に参加された皆様、関係者の皆様、登壇者の皆様、土曜日は長丁場お疲れ様でした。表示高速化については、石本さんのお話にもあったように、それをやみくもにやるのではなく、その環境や状況
Webでの文字のレイアウトについて - 2011年に試してみたこと - - くらげだらけ
2011年の後半あたりから文字や文字組に興味を持ち始めました。元々、大学時代に文字についての勉強をちゃんとできていなかったことが、ある種のコンプレックスのように感じていました（今もそうです）。そのうえで「デザイナー」という肩書きを持っていることを嫌って、名刺にデザイナーではなく「制作」とわざわざ入れたこともありました。 そんなこんなで過ごしながら今年読んだ本が「文字をつくる―9人の書体デザイナー」と「文字講座」という本でした。どちらの本にも文字がどんなふうにできたのか、どんな想いでできたのかといったことが書かれていて、非常に面白かったです。それから書体や文字組に関する本を読んだりして少しずつですが勉強している毎日です。 最近では電子書籍が少しずつ読めるようになって来ました。私もiPhoneで読んだり、iPadで読んでみたりしています。私もWebに関する仕事をしているので、最近ではWebの文
Web開発にお役立ちなチートシート集 | TRIVIAL TECHNOLOGIES on CLOUD
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー All The Cheat Sheets That A Web Developer Needsという記事を先日見つけて，割と知らないものが多く，また便利だったのでご紹介:-)。英文のチートシートだけど，仕様を短くまとめてあるチートシートは日本人のWeb開発者も便利に使えるはず。 HTML HTML/XTML in one page HTML5: The Evolution of Web Standards by James Sugrue (X)HTML Elements and Attributes Doctype Declarations (DTDs) XHTML Character
webの縦書き!! - お前の血は何色だ!! 4
今日の sugamo.css で webの縦書きについてのプレゼンを聞いた。 すごく面白かったので、自分でも調べてみた。 蝶と文字、そして糸 第24回Sugamo.cssで話したCSS3縦書きのスライド http://blog.imagedrive.jp/web/research/2011/01/08/sugamocss-css3-vertical-writing 早速テスト あなたの予想に反して、あなたのブラウザでは、この文章が縦書きにみえていますか？ h1 / h2 がはてなのスタイルシートで壊れてますね、、直接このファイルを開いてみてね。 縦書き123XYZこの中は、縦書きされますわよ。 おねえさま 問☆題☆解☆決！ 段落のテストとかやってみたり、 これは段落じゃなくしてみたり。 「あれ、セリフはどうなるのかな？って みさかはみさかに縦書きを行ってみたり。」 超長い文章は勝手に改行さ
米Yahoo!で議論された、フロントエンドエンジニアリングの将来（後編）
米Yahoo!が11月8日から3日間にわたり開催したWebテクノロジーのイベント「YUIConf 2010」。主にWebアプリケーションのフロントエンド技術を中心にしたセッションが並ぶ中で、著名人によるパネルディスカッション「The Future of Frontend Engineering」が開催され、そのビデオが公開されています。 この記事は「米Yahoo!で議論された、フロントエンドエンジニアリングの将来（前編）」の続きです。 後編では会場からの質問を中心に、IE9問題、HTML5とWebのセキュリティ、そしてフロントエンドエンジニアの採用などについてディスカッションしています。 左から、司会のDion AlmaerとBen Galbraith。Tantek Çelik、Joe Hewitt、Elaine Wherry、Doug Crockford、Thomas Sha、Ryan
米Yahoo!で議論された、フロントエンドエンジニアリングの将来（前編）
Dion Almaer みなさんこんにちは。このディスカッションでは、ここにいるBen Galbraithと、私Dion Almaerで司会をします。まずパネリストを紹介しましょう。 左から、司会のDion AlmaerとBen Galbraith。Tantek Çelik、Joe Hewitt、Elaine Wherry、Doug Crockford、Thomas Sha、Ryan Dahl 私とBenのとなりにいるのが、Tantek Çelik（テンテク・チェリック）。IE 5.5の開発に携わり、その後Web標準に関する活動もしてきました。 Joe Hewitt（ジョー・ヒューイット）はFacebookに所属していますが、Firebugの開発者でもあり、Facebook for iOSの開発もしています。もともとはNetscapeからMozillaになるときのFirefoxのオリジナル
HTMLコーディングの格安代行・外注ならコーディングフリー
コーディングフリーのサービス概要 低価格・高品質・短納期＋安心のHTMLコーディング コーディングフリーのHTMLコーディングは、基本料金10,000円、1ページ単価最安3,600円と低価格。また、低価格ながら、コーディング歴10年を超えるコーディングのスペシャリストたちが、多数の実績で培われたノウハウを用いて高品質を実現。文法やブラウザ対策などのチェック体制も整っております。さらに、ベーシックコースの納期は1日3ページ目安と短納期。もちろんアフターケアも万全です。 このように、コーディングフリーでは、お客様のご要望にお応えするために、基本となる『低価格・高品質・短納期』を実現しております！ ● さらに安心も追加！初めてのお取引でも不安を解消します HTMLコーディング専用の窓口を設置しておりますので、お客様の疑問や初めてのお取引でもすぐに対応する事ができます。また、納品後の修正依頼やご質
Web Developerで行うCSSデバッグ
Web Developerで行うCSSデバッグ Web Developerはナトラボさんが公開しているWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。 インストール Firefoxで配布ページにアクセスし「ダウンロード：Webdeveloper for Firefox (399kb)」をクリックすることでインストールが開始されます。 インストール開始時にページ上部に「このサイト(lab.tubonotubo.jp)からはFirefoxにソフトウェアをインストールできない設定になっております。」と表示されますが、右の「許可(A)」ボタンをクリックすることでインストールが可能です。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてイン
Zen-Codingの応用でもっと超速に - 原稿ありきの変換について
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 前回の記事（マークアップ効率化 - zen-codingでコーディングを倍速に）ではZen-Codingの基本について説明しました。 また、その内容をCSS Nite実行委員会（公式ページ）が主催した、Dreamweaver Town Meeting in TokyoというDreamweaverにフォーカスをあてたイベントで公演させていただきました。 ［撮影：飯田昌之］ その公演では、Zen-Codingを知らない方向けに、Zen-Codingとは何か・どんなことが出来るのかなど、基本に関して実演を行い
CSSによるWeb訪問履歴の漏洩に具体的対策、楽天ad4Uなど無効化へ
Mozillaは、CSSを利用することで利用者の訪問履歴が漏洩する可能性のあるWebブラウザの機能を改善することを明らかにしました。これは、楽天ad4Uのような、CSSやJavaScriptを用いて利用者の履歴を取得しているインターネット広告への対策として考えられたものです。 利便性のための機能から訪問履歴が漏洩 Webブラウザ上のリンクは、訪問したことのあるリンク先に対して色や文字の大きさなどのスタイルを変更することができます。これは、Webブラウザの画面上でどのリンクが訪問済みなのかを知らせるための、ユーザーの利便性を想定して作られた機能です。 しかし一部のインターネット広告では、これを利用して広告の中に大量のリンクを埋め込み、そのリンクの中から訪問済みのスタイルになっているリンクを自動的に探しだすことでユーザーの訪問履歴を取得。履歴情報をいわゆる行動ターゲティング広告の手段としている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ
IBM Developer
ashikunep.org
ウェブ制作関連のチートシートをまとめたポータルサイト -Quickly Code