Web Designer News - A curated collection of the best news for designers each day. http://www.WebdesignerNews.com
先日jQuery 1.6がリリースされましたが、案の定.attr()関連で議論になったようで、一週間後に後方互換を保つ更新が行われました。 jQuery: » jQuery 1.6.1 Released 1.6の更新内容は先日の記事をご覧頂ければ。 jQuery1.6の更新内容をまとめたよ。 | Ginpen.com 更新内容 jQuery 1.6では.prop()メソッドの追加と.attr()メソッドの変更があり、これが「属性」と「プロパティ」の差、及び関係性についての議論を引き起こしました。結果として、1.6.1では後方互換を保つよう修正される事になりました。 つまり1.5.2から(1.6を飛ばして)1.6.1へバージョンアップする際は、.attr()関連のコードは変更が不要です。 なお.date()の方は1.6のリリースノートの通りの動作のままである事に注意してください。 前回(1.
先日のCSS Nite LP, Disk 26「CSS Preprocessor Shootout」でStylusのご紹介をさせていただきました。 Stylus nib - CSS3 extensions for Stylus enja-oss/stylus · GitHub 自分事で恐縮ですが、StylusでSass/LESSという2大巨星と闘いつつ、CyberAgent3人組の共通裏テーマ「ちゃんとCSS書け」というニュアンスを伝えるのは、正直不安な部分もありました。しかしながら、アンケートを見る限りは極端な不評もなく、Twitterを見る限りは概ね好評だったようで本当に良かったです。 今回のセッションで、Stylusの魅力はもちろん、CSSとプリプロセッサの関わりや諸問題について、みなさんに伝わるものがあったなら幸いです。 rework visionmedia/rework · Gi
今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。 指定後の画像を見てもいまいちどのような変化があるかわかりづらいと思うので、前回の記事CSSアニメーションの初歩をおさらいで紹介した、animationを使って 変化の状態を見ながら確認しようと思います。今回も説明のベンダープレフィックスは省略していますが、動作はFirefoxとChromeの最新で確認しています。 また、このプロパティは3Dの指定もありますが、今回は平面の2D指定のみだけにします。 rorate 要素の回転を指定します。 transform: rotate();・・・XとYを同時に指定 transform: rotateX(); transform: rotateY(); transform: rotate();(角度の変更) #img01 img { animation: animat
1月12日、CSS Nite LP26 CSS Preprocessor Shootoutへ行ってきました。 今回も内容が濃く非常にためになりました。 以下、メモ書きです。 ◇基礎講演:CSSの設計◇ 高津戸壮さん(ピクセルグリッド) 設計について CSSを書いているとごちゃごちゃになるので、 うまいこと設計する必要がある。 ただ、コードを書くだけではちゃんとした設計はできない。 ページ設計の段階から考える必要がある。 ・モジュール名を基準に書く 干渉しないなどのメリット色々 ・モジュール一覧を作る どこだっけと探したり、同じモジュールを二度作ったりすることを防ぐ ・具体的過ぎず抽象的過ぎない命名を ・余白のルールを設ける なるべく単純に ・細かいデザイン 細かい余白の調節と量産効率性を考える。 *オススメ マージン用のモジュールを作る。 デザインを細かく再現する必要
2013-01-14 CSS Nite LP, Disk 26「CSS Preprocessor Shootout」に行ってきためも。 昨日、CSS Nite LP, Disk 26に行ってきました。今回のテーマはCSS Preprocessor Shootout。 CSSの設計をどうすべきかというテーマの基調講演ののち、前半はCSSプリプロセッサ SASS/LESS/Stylusそれぞれのお話、中盤はそれらを使うためのツールのお話、後半は実務で使われている企業の方々の事例、最後にCSSデザインの過去・現在・未来についてと、豪華登壇者による全10セッションでした。時間にして5時間半の長丁場でしたが、面白くて興奮しすぎて全然苦じゃなかった笑。参加した人には後で資料のフォローアップがある(確か3ヶ月後くらいには参加してない人向けにもオープンになるはず)ので、ここでは自分が気になった部分のざっ
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Form Follows Function project is a collection of entrancing and engrossing "interactive experiences", each experience has its own unique design and functionality. The award-winning project includes a spinning navigation wheel on the website, with each interactive experience represented by a poster. By clicking on a poster, an interactive experience opens up. Each one is as much a piece of art as i
HTML5 Drag and Drop Avatar Changer with Resizing and Cropping In any app that has user avatars, users should be able to change those avatars. Anything to make that easier is desirable. Many apps start with a user’s Twitter avatar, Facebook avatar, or Gravatar. That’s a smart move. Avatars give users a sense of ownership over a virtual space so any way to get them to have their desired avatar is go
スクロールに関する演出を調べたので、調べたものに使用しているプラグインと実装方法のメモです。 なお、デモについてはFirefoxで確認してますので他のブラウザではずれてる場合があるかもしれません。 慣性スクロール 横スクロール(ナビゲーション付き) iOS見たいなスクロールバーと慣性スクロールができるプラグインNiceScroll スクロールに遅れてついてくるコンテンツ 途中からスクロールについてくる 慣性スクロール こちらは以下のサイトに実装方法が書いてありましたので、そちらをそのままご紹介です。 jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる | webOpixel 参考JSソース <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く