背景画像をブラウザの枠いっぱいに表示するテクニックの考察
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
cssの未使用セレクタをその場で複数ページ一括調査するブックマークレット・cssess
中小規模サイトの構築時に役立ちそうな ブックマークレットがあったのでご紹介します。 閲覧しているWebサイトで使用しているcss の未使用セレクタを教えてくれるブックマーク レットです。こういったWebサービスはあります が、その場でサクッと調べられるのは面倒が 無くて良いですね。 使いどころはやや限られますが、複数ページを一括で調査し、それぞれのページの未使用セレクタを知らせてくれますのでなかなか便利だなぁと感じました。 おそらくブックマークレットを使ったページからリンクされている同一ドメインページを読み込んでるっぽいのです。zipや#の付いたURLも含まれているのはそのためでしょうかね。こういうリンクがある場合はチェックをはずしてください。 ページごとに使っていないセレクタを教えてくれます。 ブックマークレットを使うと上記のような半透明のボックスが出ますので調べないページのチェックを外
Facebookのページを作る際に便利そうなHTML/CSSフレームワーク「520 Grid System」:phpspot開発日誌
Facebookのページを作る際に便利そうなHTML/CSSフレームワーク「520 Grid System」 2010年11月24日- 520 Grid System - HTML/CSS Framework made for Facebook Page Developers Facebookのページを作る際に便利そうなHTML/CSSフレームワーク「520 Grid System」。 CSSフレームワークといえば沢山ありますが、こちらはFacebookのページ作成に特化したフレームワークです。 フレームワークを使って複雑なレイアウトも比較的容易に実装できそうです。 facebookが流行るかもといわれている今日この頃、一応ツール周り等準備を整えておいてもよいかというところです。 関連エントリ Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「j
[CSS]パンくずの実装はどのようにするのがよいかの考察
パンくずは何要素で実装していますか？ ul要素？ ol要素？ p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul
[CSS]text-shadowでここまでできる、かっこいいエフェクト集
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクト
[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
deferloader – 株式会社ウフル技術ブログ
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
HTML、CSSのリファレンス集·CodeBurner MOONGIFT
CodeBurnerはFirefox/Adobe AIR/Mac OSX用のフリーウェア。Webデザイナー、プログラマーであれば開発中にリファレンスが見たくなることが多いはずだ。都度Webサイトを検索しても良いが、手軽に使えるリファレンスが手元にあると便利だ。 HTMLタグの検索 特にブラウザ間の誤差があるプロパティなのか否かといった情報は重要だ。そうした情報をつかんでおけばデザインが開発がスムーズになる。多様なプラットフォームに対応しているのがCodeBurnerだ。 CodeBurnerはHTML/CSSのリファレンスを多数のプラットフォームを使って提供している。FirefoxとFirebug向けをはじめ、Adobe AIR、OSX Dashboard、Operaが現在提供されており、今後Dreamweaver版が提供予定になっている。 ソースをクリックすると説明が出る 2ペインの画面
[CSS]条件付きコメントを使用した際にレンダリングを早くするテクニック
IE用に条件付きコメントを使用してスタイルシートを配置した際に、ブラウザのレンダリングをすこし早くするテクニックを紹介します。 ※下記の画像はクリックで拡大 Conditional comments block downloads 上：test 1の測定結果（適用前：CSSの後に読み込み開始） 下：test 2の測定結果（適用後：CSSと並列で読み込み） [ad#ad-2] 下記は上記ページを参考にしたものです。 はじめに スタイルシートの構成 test 1：ごく普通に条件付きコメントを使用 test 2：条件付きコメント使用時に並列読み込みを可能にする その他の解決方法とまとめ はじめに 条件付きコメントを使用しない場合は通常、CSSファイルと次のファイルが並列で読み込まれます。 条件付きコメントを使用した場合 詳しくは後述のtest 1：ごく普通に条件付きコメントを使用を参照 これを並
スマートフォン対応してみた。
当ブログをスマートフォン対応したいなーと思ってはいたけど、iPhone持ってないしXperiaの需要はどうなんだろうとか考えたり言い訳しつつずっと放置してましたが、今回 iPod Touch （先代の）を借りたので、勉強がてらiPhone対応と言うかスマートフォン対応してみました。 何かを実験するには自分のサイトが一番手っ取り早くて良いですね。 サイト持ってない方は、ホント何でもいいので、何かしら作ったほうがいいかなーと思います。 ドメイン取得して、サーバレンタルして、構成練って、デザイン・コーディングして、FTPクライアントでファイルアップしてみたり、MTやWPインストールしていじったり、CSS3の実験したり色々使えて便利ですし、カッチリ作れば実績にもなりますしね。 と、それは良いとして、スマートフォン対応したんです。えぇ。 CSS HappyLife for iPhone URLのオシ
Unicorn - W3C 統合検証サービス
Due to lack of resources to maintain the Unicorn project, W3C stopped providing this on-line service as of 31 March 2023. See 2023-02-15 W3C Homepage news. The source code is available on GitHub under the W3C Software license. Anyone can run it for themselves, fork it. Copyright © 2023 World Wide Web Consortium. W3C® liability, trademark and permissive license rules apply.
22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」:phpspot開発日誌
PrimaryCSS 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」。 単体のCSSで予め用意されている22のレイアウトを簡単に実装できるものです。 レイアウトの種類は沢山あります。幅は固定されているので好みに応じて一括置換すればよいでしょう。 サイト上でHTMLコードの発行もできるので、サクッと複雑な段組レイアウトを作成したいような場合に便利そうです。 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 使えるCSSレイアウトテンプレート集「mycelly.com」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
CSS3のでのボックス要素デザインを圧倒的に簡単化できる「CSS3 Click Chart」:phpspot開発日誌
CSS3 Click Chart by Impressive Webs CSS3のでのボックス要素デザインを圧倒的に簡単化できる「CSS3 Click Chart」。 サイトにアクセスすると、サンプルが並んでおり、クリック一発でサンプルのコードが出力されます。 更に、サポートブラウザまでが表示されるので、なんとも便利。 サンプルをクリックすると画面下部にサポートブラウザと具体的なCSS3コードが表示されます。 画面端の矢印で別画面に移動。更にサンプルを表示できます。合計22個が確認できます。 単なるリファレンスとしてだけでなく、入門用としても最適かもしれませんね。 関連エントリ ピュアCSS3で3Dアニメーション jQueryとCSS3で作るカラフルなスライダーウィジェット ピュアCSS3を使ったajaxアニメーション実装例 近未来に頻繁に使われるであろうCSS3サンプル１０
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とは何か・どんなことが出来るのかなど、基本に関して実演を行い
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ultimate CSS Gradient Generator from ColorZilla
CSS HappyLife ZERO