CSS Architecture on Vue.jsABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
<a>タグのリンクを無効（disabled）にする - CSS｜OAR CODE
リストの表示で<a>タグを利用していると現在表示中のページのリンクだけ無効にしたいといったことが時々あります。 これまでは<a>タグにdisabledといった属性はないので、<span>タグに切り替えてHTMLを出力していましたが、CSSを使ってもっと簡単にできることを知ったので、そのメモになります。 目次コードコード（IE、Edgeの場合）hrefの属性自体を出力しないコード（JavaScriptの場合）コード（jQueryの場合）実際の表示確認まとめ参考リンク コードは至って簡単で以下のようなCSSクラスを定義します。 a.disabled{ pointer-events: none; } あとは無効にしたいリンクに設定するだけです。 <a href="/" class="disabled" tabindex="-1">CSSクラスに「disabled」を設定したリンク</a> boo
『インクルーシブ HTML + CSS & JavaScript』をレビューしました - 水底の血
アクセシビリティなピンク本と緑本*1でお馴染みの、太田さん（@bakera）と伊原さん（@magi1125）のコンビによる新たなウェブ技術関連の訳書がまもなく世に送り出される運びになりますが、そのお手伝いをほんのちょっぴりしました、というお話です。要するに書籍の宣伝と言う類いのものです。 さて、訳書と言うことは当然原著が存在するわけですが、原著者は緑本と同じ、ヘイドン・ピカリング（@heydonworks）さんです。緑本の"あの"独特な感性は本書でも健在であります。ちなみに、原著のレビュワーとして、W3C HTML 5.1のエディターでもあるスティーブ・フォルクナー（@stevefaulkner）さんの名前が見えます。図らずも書籍で同じページに名前が載ることになりました。うふふ。 日本語版レビュワーは私を含めて4人いたりするのですが、私以外にはWebsite Usability Infoの
ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist
Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。 確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。 パフォーマンスで確認したい項目 SEOで
フロントエンドの制作者が、HTML, CSS, JavaScriptでWebページのパフォーマンスを改善するためのテクニックを磨ける良書 | コリス
Webサイトやアプリを制作する際、パフォーマンスは重要なポイントの一つです。ページが早く表示されることは、それだけでユーザーの満足度に繋がり、Googleにおいても非常に重要な項目に挙げられています。 ページを表示するブラウザのレンダリングの仕組み、HTML, CSS, JavaScriptをどのように改善すべきか、フロントエンドの制作者がチューニングを基礎からくわしく学べるオススメの本を紹介します。 本書は中・上級者向けの解説書で、既にフロントエンド制作者としてのスキルを備えている人を対象したものです。 HTMLやCSSやJavaScriptの使い方を基礎から解説したものではなく、パフォーマンス面において基礎から徹底的に解説されてします。
Web界隈で最近気になるWebサービスとか集めてみた【2016年7月版】 - Brian'z Imagination
2016年もいよいよ下半期突入。 歳を取るごとに1年が過ぎるスピードがますます加速するように感じるけれど、全然悲観的じゃない。むしろ毎日新しくて新鮮なことが向こうからどんどん飛び込んできて、毎日エキサイティングだ。 そんなわけで、今回も先月に引き続き最近気になるWebサービスやアプリケーションなどを紹介していきたい。前回は海外サイトを中心に紹介したけれど、今回は海外編・国内編と2本立てで紹介していく。ほとんどのサービスは無料だけれど、とんでもなく便利なものも多いので、きっとあなたの役に立つはずだ。 ちなみに前回の6月版の記事はこちら。 海外編 Real Time Users Real Time Usersは、1分(60秒)以内にサイトを閲覧しているひとの数を表示するカウンターのjavascriptプラグインだ。CSSで表示部分をカスタマイズすることができる。数行のコードではてなブログにも設
Bootstrap-シングルページ制作編１ | みずかず
Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。 Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。 変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。 制作編１ではグローバルナビゲーション（Static top navbar）を設置するところまでの記録。 シングルページ制作編 Bootstrap-シングルページ制作編１ Bootstrap-シングルページ制作編２ Bootstrap-シングルページ制作編３ Bootstrap-シングルページ制作編４ Bootstrap-シングルページ制作編５ Bootstrap-シングルページ制作編６ Bootstrap-シングルページ制作編７ ＊Bootstrap3.3.4 Bootstrapのファイルはダウンロード済み ダウンロード方法は導入編にて。 シングルペ
Angular directives for Bootstrap
UI Bootstrap Bootstrap components written in pure AngularJS by the AngularUI Team Code on Github Download (2.5.0) Create a Build Angular 2 For Angular 2 support, check out ng-bootstrap , created by the UI Bootstrap team. Dependencies This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is re
フォームのデザインを簡単に整える「iCheck」がとっても便利！ | WebChokoTips – ウェブチョコチップス
フォームのデザインって難しいですよね。でも、ユーザの動きを考えやすくて作りがいがあるかと思います。 しかも、デフォルトのスタイルだと全体のテイストと合わなかったりするので、実装に手間がかかってしまいます。 そこで今回紹介するプラグインは、「iCheck」というjQueryのプラグインです。スタイルの変更が面倒なチェックボックスとラジオボタンをいい感じに整えてくれるすぐれものです。 まずはDEMOを用意したのでご覧ください。 DEMO DEMOにあるフォームはサーバーへの送信はしていませんので、お気軽に試して見て下さい！ 使い方 HTMLは以下のような感じで、特別なマークアップは必要無いようです。
Google Web Fonts を非同期で読み込みをして表示改善する方法
このブログのタイトル見出し部分を Google Web Fonts を利用して表示しているのですが、これまではhead内でフォントの指定とCSSの font-family での指定を入れていました。そのようにしていたところ、Googleのツールで、遅延して読み込ませるなど工夫しなさいと Warning が出てしまっていたので、ちょっとだけ改善を試みることにした。 Google Fonts Google Web Fonts は遅い？フォントを選択する際に、スピードメーターのような表示の部分は赤いところを指し示していたことは事実だけど、体感的にはそれほど遅いと感じていませんでした。 Google Web Fonts の利用自体が遅いための警告かと思っていたのですが、今回指摘されたのは、ファーストビューでの表示が遅い・見えててほしい部分が見えないよということの様子。 Chrome で確認してみた
なぜWebフォントを非同期に読み込むのか
Webフォントを非同期に読むテクニックはいくつかあるけど、その理由についてまとめられた文章は少ない。僕は非同期に読み込むのは3つのそれぞれ違う分野での問題を解決するためだと考えている。どの問題も致命的なものではないので、非同期に読み込むべきかどうかはそれらをどう捉えるかで変わってくる。 Webフォントのファイルサイズ 最もわかりやすいのはファイルサイズ、つまり転送量の問題。日本語フォントを例に上げるまでもなく、そこそこの範囲のユニコード記号や絵文字をサポートするだけでもかなりのサイズになる。カーニングやリガチャなどを加えれば更に大きくなるだろう。非同期に読み込むことにより、ダウンロードが終了するまでページの読み込みが終わらないなどということは避けられる。 しかし、これは日本語フォントでもたかだか3から5MBほどなので、それほど気にすることではない。モバイルのことを考慮してようやく「できれば
[WEB開発] 私的な最近のおすすめサービス/ツール 14選 〜2014年版〜 - Qiita
社内のライトニングトーク用に Qiita:Team に書こうとしていたものですが、誰かの参考になればと思い、こちらにアップします。対象は 「エンタープライズ系ではない」「スクリプト言語系の」WEB系エンジニア/プログラマ です。 流行り廃り、好みがあると思いますが、これらは実際に、私が試してよかったものです。サービスであったりライブラリであったり粒度がバラバラではありますが、参考まで^^; 「最近の」というタイトルですが、私的に最近、活用しているという意味で、サービス自体は昔からあるものもあります。 ① Heroku Heroku を利用すると、Ruby(on Rails)、PHP、Node.js、Python 等のサーバ側アプリケーションをホスティングすることが出来ます。デプロイ方法は Git で push するだけ です。 商用でちゃんと使おうとすると、無料枠の構成では難しいですが、デ
![[WEB開発] 私的な最近のおすすめサービス/ツール 14選 〜2014年版〜 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a05c54efc4e23b8f321cec1bcae63bb87257553f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV0VCJUU5JTk2JThCJUU3JTk5JUJBJTVEJTIwJUU3JUE3JTgxJUU3JTlBJTg0JUUzJTgxJUFBJUU2JTlDJTgwJUU4JUJGJTkxJUUzJTgxJUFFJUUzJTgxJThBJUUzJTgxJTk5JUUzJTgxJTk5JUUzJTgyJTgxJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkzJUUzJTgyJUI5JTJGJUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJUFCJTIwMTQlRTklODElQjglMjAlRTMlODAlOUMyMDE0JUU1JUI5JUI0JUU3JTg5JTg4JUUzJTgwJTlDJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1hYzRkNzQ2NGU1M2VlZDNkZTQwYTYxNDNlZmQ1MjZkOA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoa3VzdSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDQ2MDhlM2MxY2U1Y2E4MzU0YTFiOWMzNmI0MGNkZWE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44KG44KB44G_%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dd239fddef9fb1a234fbc44b218471eb6)
Working with the Page Visibility API
Programming tutorials for web developersWorking with the Page Visibility API Matt West wrote this on Sep 16, 2014 These days it’s rare for someone to browse the web with just a single tab open. We tend to switch between tabs consuming the information that is most important to us at that moment. As a developer it’s important to consider this behaviour. Especially when you’re building a website that
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Our eBooks Have Moved | Envato Tuts+
Amazon.co.jp: インクルーシブHTML+CSS & JavaScript: 多様なユーザーニーズに応えるフロントエンドデザインパターン: Heydon Pickering (著), 太田良典 (翻訳), 伊原力也 (翻訳), 株式会社Bスプラウト (翻訳): Digital Ebook Purchas
Amazon.co.jp: Webフロントエンド ハイパフォーマンス チューニング: 久保田光則: Digital Ebook Purchas
reactcss.com
GitHub - mcasimir/mobile-angular-ui: Angular.js Mobile UI Framework with Bootstrap 3
javascript - CSS delivery optimization: How to defer css loading? - Stack Overflow
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ