モダンWeb
TOPICS Web , HTML/CSS , JavaScript 発行年月日 2014年09月10日 PRINT LENGTH 284 ISBN 978-4-87311-692-1 原書 The Modern Web FORMAT 誕生から四半世紀を経てWebはその姿を大きく変えています。かつてのWebは単に科学技術文書を公開するためだけの仕組みでしたが、現在ではマルチメディア、ショッピング、アプリケーション、ひいてはオペレーティングシステムさえも包含する技術へと成長しています。このようなWebの最新技術動向を鋭く切り取り、わかりやすく解説したのが本書です。近年脚光を浴びているレスポンシブWebのためのCSSをはじめ、位置情報やバッテリーの状態を取得するためのAPI、プラグインに頼らないマルチメディア再生などを紹介します。さらに、近い将来に普及するであろう注目のWebコンポーネント技術
Androidでスクロールできなくなるバグ
Android2.3端末で、画面をスクロールできなくなる症状に遭遇。 調べてみると、iframeとdhisplay:noneの合わせ技で発生するらしい。 javascriptでつくった１ページ内に「タブ」や「アコーディオン」で複数のコンテンツを切り替えられるページへ 「Youtubeのプレイヤー」や「ソーシャルボタン」などのiframeが内包されている構造は要注意！ 対策 iframeをなるべく使用しないコト。 iframeの使用がさけられない場合は、 display:none での表示・非表示の制御ではなく remove（削除）と再配置で表示・非表示を制御する仕組みへ変更すると バグ発生条件を満たせなくなるため、スクロールできなくなる症状は回避できます。 参考サイト： Androidで全くスクロールできないバグ 関連記事 Xperia acro でスクロールできなくなるCSS JavaS
PCCSのSCSSでの使用: VCware Web Pattern Language
・・・VCwareがWEBサイト（やフライヤー、その他印刷物など）の「デザイン」を行うさい、「配色」（カラーコーディネート）には、原則としてPCCS（日本色研配色体系）を用いる。 これは簡便のためである。 「色彩調和」（カラーハーモニー）技術のあらゆる手法を適用することができ、あらかじめマッチするように体系化されているのがPCCSである。 まさにカラーハーモニーのために体系化された色彩体系であるため、間違いが生じにくい。 VCwareではCSSの記述にSCSS記法を用いるため、この項目はもっとも重要である。 もちろんクライアントの要望に応じてベースカラー、アソートカラー、アクセントカラーは決定されるべきであり、そのさいには体系で定義された値のズラシが必要となる。その場合でも、簡易的にPCCSにおける近似値で配色をしておき、ある程度コンセプトが固まった段階で、新たな色彩体系のSCSS変数ファ
三点リーダー(…)を真ん中に表示する方法-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
こんにちは、ひらたです。わたしは「…」を多用するのが好きなのですが、そのせいか、なんの前触れもなく、三点リーダーについての話題を振られてしまったので、ちょっととまどいつつも書いてみたいと思います... そもそも「…」は日本語では三点リーダーと呼ばれたりします。もともと日本語にはなかった表現なのですが、欧文からの翻訳のなかで日本にも定着していった(Wikipedia調べ)ようですね... で、なぜ三点リーダーが話題になったかというと、Movable Type関連情報が数多く紹介されているブログ「小粋空間」に「三点リーダが真ん中に表示されない理由」というエントリーがあがったからのようです。日本語では、ちょうどフォント高の真ん中にあってほしい「…」が、ブラウザ上では「…」のように、ベースラインの上に表示されてしまうようです。なるほど... エントリーでも解説されているのですが、こちらは欧文フォン
[WebDev]三点リーダ問題、webfontでついに解決！……か？ | orangeProse
で、「日本語フォントのunicode-range」に対応していないブラウザではどうなっちゃうのかというと、 @font-faceのローカル参照に対応しているFirefoxやSafariでは、unicode-rangeディスクリプタが無視されて単にメイリオで上書きされるので、すべての文字がメイリオで表示される @font-faceのローカル参照に対応していないIE8以前ではsans-serifで表示される ということになります。 （上記のコードはメイリオとArialのみの例示です） （Macに対応するため、"HelveticaArialHiraginoMeiryo"みたいにどんどん上書きしていく必要があります） （それと、Android OSだと、ローカル参照があると、そのフォントが在っても無くてもローカルフォントで表示しようとします。と2011年6月に出版された『CSS［略］） 2つ目：W
JavaScriptファイルをgzip圧縮して設置してみる。
自分で作ったWebページの読み込み / 表示速度を向上させるために、htmlから呼び出す外部JavaScriptやCSSファイルのサイズをできるだけ小さくしてみます。 まずは自分のページの表示速度を診断。 → GTmetrix | Websie Speed and Performance Optimization｜英語 ページURLを入力して「Go!!」をクリックすれば、かなり詳細に診断して助言を与えてくれます。例えば「複数の .cssファイルをまとめなさいよ」とか「JavaScriptファイルを最小化したらいいよ」とか。 自分が何をすべきか把握したところで、JavaScriptファイルを最小化。 無駄なタブスペースや改行を取り去れば、.jsファイルのサイズはかなり小さくなります。手作業で行うのは面倒なので、例えばこんなWebサービスを使ってみる。 → YUI Compressor Onl
Less Parser
Once you add your project folders to the application, it will automatically start monitoring the less files inside these folders for changes. After you have saved the less file, the application will automatically parse your less file into a regular css file. I saved my less file, but I don't see my changes in my browser. What happened? There are a number of different scenarios where this can happe
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
CSSをシンプルに書くことができるLESS使ってみた
CSSをシンプルに書くことができるLESS使ってみた CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 投稿日2011年12月13日 更新日2011年12月13日 ネスト（階層）化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
CSSハック一覧
CSSハック一覧 - IE, Firefox, Safariなどなど異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ Internet ExplorerIE6 以下#help_me { _color: blue; } * html #help_me { color: red; } IE7*:first-child + html #help_me { color: red; } * + html #help_me { color: red; } IE6, IE7#help_me { /color: blue; } IE8#hel
5分でわかるスタイルシート講座
それから、CSSでもテキストエディタを使います。 HTML編でも述べたように、Windowsの「メモ帳」やMacの「テキストエディット」は、HTMLやCSSのような（それからJavaScriptなどのプログラミング言語も）、厳密に規格が定義されたテキストを書くのには向いていません。 Windowsなら「EmEditor」、Macなら「Coda」をインストールしてくださいね。【追記】MacはEspressoの方がいいかも。詳しくはzen-codingの記事を読んでね！ これらのエディタは、再来週に書く予定の「5分でわかるzen-coding講座」に対応しています（zen-codingとは、HTMLやCSSを書くスピードを10倍速くする、魔法の記述法です）。 さて、いつものように前置きが長くなりました。 さっそく1分目、行ってみましょう。 1分目：「ディレクトリ」を知る、作る あなたのパソコン
Sass: Syntactically Awesome Style Sheets
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work
1分でできる Google Web Fonts を使って CSS3 の Web Font を使おう
Web Fonts を使えばパソコンにインストールされていないフォントを表示させることができます。見出しなどに特殊なフォントが使ってある際に、わざわざ画像で用意したりする手間を省くことができます。私のサイトでもロゴに使用しています。 実際に試すことで勉強になりますので、一緒に勉強してみましょう。 Web Fonts を導入する HTML ファイルの作成 まず導入するための HTML ファイルを作ります。 <html> <head> <title>Weble</title> <style type="text/css"> .logo { font-size: 72px; } </style> </head> <body> <p class="logo">WEBLE</p> </body> </html> ブラウザで表示すると以下のようになります。 Google Web Fonts を使う G
ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」:phpspot開発日誌
HTML layout generator - Layzilla.com ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」 空白のキャンバスにボタンをポチポチ押していってドラッグ＆ドロップすることでレイアウトをどんどん組み立てられます。 レイアウトを配置した例。それぞれ、ふちをドラッグすればリサイズ可能 終わったらソースコードをジェネレート 次のようなそこそこ綺麗なHTMLが出力できます。 勿論、CSSも出力できます。 関連エントリ 複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1Kb CSS Grid」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ
ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://less-ja.studiomohawk.com/
Scout-App - Site has moved
IEにも対応！10分でできるWebフォント実装法 (1/3)
Loading...
