CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
Takazudolog - OOCSSとSass
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
60fps scrolling using pointer-events: none
60fps scrolling using pointer-events: none Paul Lewis did an interesting article a while back about avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class. UPDATE: I’ve done a follow up article which demonstrates a more robust technique. That approach doesn’t scale well an
15 Free Bootstrap Admin Themes
In the past, the admin sections of web applications were often built with functionality as the only priority, with little or no consideration given to the design. Thankfully, times have changed, and in recent years, there has been a pleasing convergence of powerful functionality and beautiful design. This trend has been supported by the popularity of the Bootstrap framework, which has made it easi
Perfect Full Page Background Image | CSS-Tricks
📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣 This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all tim
CSSで気をつけたい事やつまづいたときのちょっとしたコード
Webデザイナーにとって、必須のスキルである CSS ...。スタイルシートを書くときに普段から気をつけてることや、あれ？これってどうやってやるんだっけ？となかなか覚えきれないものをちょっとまとめてみました。またサンプルも作ってあるので合わせて見てくださいね！ Webサイトを作っていると、CSS でつまづくことがたくさんあります。初心者の頃は、CSS で思うようなレイアウトやデザインを描けない事が何度もありました。また各ブラウザ間の表示の差異もあって、ますます壁が高いなーと感じてました。 今回は後々メンテナンスが楽になる CSS の書き方や、気をつけたい事、つまずいた時に「そういえばこうだった」的なものを集めてみました。後半はコードのまとめになってます。 CSS の注意書き 目次 (X)HTMLを書く時に気をつけたい事 スタイルシートを読みやすく書く CSSのブラウザのバグを把握、知ってお
日本のWebサイトの404ページデザインいろいろ+α
気になって探したのですが、ググッても 9割は海外のデザインだったので、日本 の素敵な404ページを探してみました。 時間の関係でさほど数を揃える事が出来 ませんでしたが、少しでも参考になれば 幸いです。 404は、誰でも訪れる可能性のあるページです。ある意味、用意したコンテンツよりも見られる可能性がありますのでほんの少しでも手を入れておくといいかも知れませんね。 どこかで「404は古い。無条件でトップページリダイレクトが最適」なんて意見も見かけましたが、個人的にはユーザーを混乱させる要因になるのでリダイレクトは避けたほうがいいと思います。 では、個人的に気になった404ページをご紹介していきます。順不同で、ややサイトの属性がWeb関係に偏っていますがご了承ください。尚、リンクは404ページではなく、TOPページにしてあります。 株式会社サクラクレパス デザインも好評のサクラパレスの404ペ
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
CSSオンリーでJSを使った風のよく使われるテクニック集１０:phpspot開発日誌
Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling | DevSnippets CSSオンリーでJSを使った風のよく使われるテクニック集１０。 よく使われているかどうかは実際はよくわかりませんが、ピュアCSSということでなかなか凄いテクニック集がまとまっています。 我こそはCSSマスターという方は覚えておいてもよさそうです。 写真ギャラリー カーソルを合わせると拡大するアイコン アニメーションするコンテンツスライダー アニメーションするプログレスバー ピュアCSSなLightBox かなり色々なテクニックがなされているようですが、実用的なものが多いですね。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 ピュアCSSで実装された吹き出しのデザイン例色々 クリーンなデザイ
iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編） - EC studio デザインブログ
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート（縦向き）であれば 横
iPhoneサイトを無料作成！Dreamweaver拡張機能が登場
使い慣れたDreamweaverで、iPhone用のWebサイトを作りたい。そんなWeb制作者の声に応えるエクステンション（拡張機能）「iPhone site extension for Dreamweaver CS4/5」が登場した。利用は無料で、開発元のエイチツーオー・スペースのWebサイトからダウンロードできる。 iPhone site extensionは、アドビ システムズのHTML/CSSオーサリングツール「Dreamweaver」にiPhone用Webサイトの作成支援機能を追加するエクステンション。iPhone site extensionをDreamweaver CS4/CS5にインストールすると、新規作成メニューから「iPhone用ページ」「iPhone用Webアプリ」の2種類のHTML/CSSテンプレートが選択できるようになる。各テンプレートには、アップルのデザインガイ
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
WebFonts として利用できるフリーの和文フォント | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
HTML5/js/CSSでiPhone/Androidアプリが作れるPhoneGapのメモ (blog@browncat.org)
blog@browncat.org Web, Linux, Ubuntu, Mac, PDA, 携帯電話, プログラミング, ソフトウェア＆落書き iPhoneのソフト開発を行うのに少し敷居が高いのはやはりObjective-Cでしょうか。慣れてしまえば何とでもなるのでしょうがお手軽とは言い難いものがあります。 で、まあこれをいろいろと簡単に行うツールが出ているのですが、手っ取り早くWebアプリをネイティブ化してくれるPhoneGapを軽く使ってみたのでメモ。 このPhoneGapはなかなか面白く、ちょうどMobileデバイス向けにMozilla PrismやAdobe Airのような働きをします。要はデバイスに内蔵されているブラウザコンポーネントをベースにhtmlやcss,jsをひとまとめにしてネイティブアプリを作成するというもの。クロスプラットフォームでiPhone/Android/B
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
10 Great PSD to HTML Tutorials to Make Your Awesome Design a Reality | Tech King
The Easiest Way to Create Vertical Text With CSS | Envato Tuts+
本当にiPad“だけ”にCSSを読み込ませるには。