2011年12月第4週号 1位は、ノーマライズの考え方を取り入れたリセットCSS、気になるネタは、Google+メジャー・アップデートへ―スライダーによるストリーム管理など新機能多数 | gihyo.jp
週刊Webテク通信 2011年12月第4週号1位は、ノーマライズの考え方を取り入れたリセットCSS、気になるネタは、Google+メジャー・アップデートへ―スライダーによるストリーム管理など新機能多数 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年12月19日～12月25日の間に見つけた記事のベスト5です。 1. 俺の CSS リセット: 2011 冬 - terkel.jphttp://terkel.jp/archives/2011/12/css-reset-2011-winter/ CSSリセットについて見直してみたという記事です。normalize.cssという、ブラウザ間での見た目の差をなるべくなくして標準化するCSSファイルの考え方を取り入れつつ、影響の大きそうな部分は
2011年12月第2週号 1位は、はじめてのCSSメタ言語はLessがおすすめ！、気になるネタは、グーグル、Flipboard対抗アプリ「Currents」を発表 | gihyo.jp
週刊Webテク通信 2011年12月第2週号1位は、はじめてのCSSメタ言語はLessがおすすめ！、気になるネタは、グーグル、Flipboard対抗アプリ「Currents」を発表 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年12月5日～12月11日の間に見つけた記事のベスト5です。 1. はじめてのCSSメタ言語はLessがおすすめ！ ≪ NAVER Engineers' Bloghttp://tech.naver.jp/blog/?p=951 CSSメタ言語のLessとSassを比較して、Lessの方がシンプルで初めての人には適しているという内容の記事です。CSSメタ言語とはCSSを拡張したもので、色や値の指定に計算式が使えたり、複数個所で同じ記述を使いたい場合は変数のよう
Inspiration and Resources for Responsive Web Design | Artfans Design
With the rapid increase in the use of mobile devices and use a media tablet to surf the Internet, users not only surf the web with desktop computers but also with their mobile devices using cell phones, tablet or notebook, with a screen resolution of each device is different, from small screen to large monitor screens to access the webs. That all required an adaptive web design, responsive layout
Item Blur Effect with CSS3 and jQuery
Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy... For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas... CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects u
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
font-familyの指定はウェイトなしのアルファベット表記のみでほぼよさそう | Culture27
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; 同じフォントを日本語表記とアルファベット表記の両方で指定しているのは、各ブラウザの解釈や挙動が異なるなどの理由からです。ただ、最近のブラウザはどうなんだろうかとちょっと気になったので調べました。 結果としては下記の表になりました。詳細はデモページを見てください。 Parallels上のWin7: IE6-8(IE6,7はIETester), Chrome15, Firefox8, Safari5, Opera11 Mac OS X 10.6.8: Chrome15, Firefox8, Safari5, Opera11 文字コード: UTF-8 指定方法 IE Chrome Saf
フリーのCSSメニューテンプレートとチュートリアル集:phpspot開発日誌
Free CSS Menu Templates & Design Tutorials | Daily Syntax フリーのCSSメニューテンプレートとチュートリアル集。 メニューを組む場合に結構迷うこともありますが、サンプルが多くあるとこんな感じにつくろうとイメージがわきやすくなりますね。 最近仕事でメニューをデザインしてるのですが、どうしようかと迷っているところで発見したのでメモがてらにご紹介です 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 ページ下部で折りたためるメニュー実装サンプル CSSのナビゲーションメニューサンプル５５
レスポンシブなWEB制作のためのCSSフレームワークのまとめ
様々なデバイスが出現してきており、WEBサイトもその環境を考慮した制作を求められており、制作側もどんな端末でも快適に閲覧できるレスポンシブなレイアウトが広まりつつありますが、今日紹介するのはレスポンシブなWEB制作のためのCSSフレームワークのまとめ「15 Responsive CSS Frameworks Worth Considering」です。 Less Framework 4 様々な端末に対応したフレームワークが多数まとめられていますが、今回はその中からいくつか気になったフレームワークをピックアップをして紹介したいと思います。 詳しくは以下 Foundation 12カラムで構成されたレスポンシブなフレームワーク。背景も端末に併せて縮小されます。 Skeleton 真っ更なレスポンシブなフレームワーク。 Amazium ブラウザサイズによってレイアウトが組み変わるレスポンシブフレー
ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」:phpspot開発日誌
HTML layout generator - Layzilla.com ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」 空白のキャンバスにボタンをポチポチ押していってドラッグ＆ドロップすることでレイアウトをどんどん組み立てられます。 レイアウトを配置した例。それぞれ、ふちをドラッグすればリサイズ可能 終わったらソースコードをジェネレート 次のようなそこそこ綺麗なHTMLが出力できます。 勿論、CSSも出力できます。 関連エントリ 複雑なCSSレイアウトをウェブ上で簡単に作成できる「The 1Kb CSS Grid」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集
E BISUCOM TECH LAB : CSS3プロパティ＆ブラウザ対応一覧
「CSS3 スタンダード・デザインガイド」の巻末に掲載したCSS3のプロパティ＆ブラウザ対応一覧です。ここでは各ブラウザの最新バージョンの対応状況を追加していきます。 » 更新内容 CSS3 CSS3で新しく追加されたプロパティ。 CSS3 CSS2.1からのプロパティで、CSS3で機能が追加されたもの。 拡張 ブラウザが拡張したプロパティでW3Cの規格に未掲載のもの。 ○ 対応（○は要ベンダープレフィックス）。 △ 部分対応（△は要ベンダープレフィックス）。 × 未対応。 iOS4.3のMobile Safari Android 2.3/3.0/3.1の標準ブラウザ Firefox 4（バージョン5…⑤、6…⑥） Safari 5.0.5 Chrome 11（バージョン12…⑫） Opera 11.10 Internet Explorer 9（バージョン10…⑩） IE6 IE7 IE8
[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> <
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
CodaにLESSを入れてみた – Kamurogi Blog
LESSというCSSの記述方法を拡張（変数、ネスト化、Mixinsなど）するRuby製のライブラリを導入してみました。 Codaには「.lessファイルを.cssファイルに変換（コンパイル）するプラグイン」と「less用の構文モード」があるので、簡単にLESS環境を構築することができます。 LESSの環境を構築 RubyとRubyGemsをインストール Ruby製のライブラリなので「Ruby」とRuby用のパッケージマネージャー「RubyGems」が必要ですが、Mac OS Xには標準で入っているようです。 ※私の環境はMac OS X Leopardになります。 LESSをインストール 下記のコマンドを実行し、LESSをインストールします。 私はHomebrewでインストールしてみました。 gem install less ここで302エラーが返ってくる場合は、.bash_profile
様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」
TOP > WebDesign > 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。 Nice and Free CSS Templates/Layouts by My Celly 基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中か
CSS Font Stack - The long awaited CSS font stack resource.
What are Web Safe Fonts? Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
ピュアCSSなソーシャルサイトのログインボタン:phpspot開発日誌
http://winstonwolf.pl/clickable-maps/europe.html
wearekiss.com