タグ

webデザインに関するIGA-OSのブックマーク (10)

  • 現在の実装でよく使用されるCSSの機能、これから登場するCSSの新機能のまとめ

    現在の実装でよく使用されるCSSの機能をはじめ、まもなく使用できるようになる新機能まで、現在とこれからのCSSを紹介します。 CSS3が登場した2015年以降の新機能、2022年これから登場するCSSの新機能、最近のCSSについてWeb制作に携わる人は要チェックです。 What's New Since CSS3 by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS3以降の新機能 CSSワーキンググループ これから登場する新機能 はじめに 「CSS3」はCSSにとって大成功でした。たくさんの新機能がリリースされ、素晴らしいものばかりでした。CSSグラデーション、CSSアニメーション、border-radius、box-shadow、transform、などたくさんあります。さらに、CSS

    現在の実装でよく使用されるCSSの機能、これから登場するCSSの新機能のまとめ
  • パララックスサイトの作り方の初歩

    最近パララックス(視差効果)を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量:" + y);//表示用 }); }); サンプルペー

    パララックスサイトの作り方の初歩
    IGA-OS
    IGA-OS 2012/07/03
    流行りもの
  • HTML5マークアップの心得と作法

    HTML5のマークアップの特徴を一言で表すとすれば「セマンティクス」。それ故に、HTML5では文脈に合わせてマークアップしなければいけません。もはや、マークアップは単純作業ではなくクリエイティブなものになっているのです。マークアップにも心得と作法がよりいっそう重要になってきています。セッションでは、HTML5仕様ではマークアップに何を求めているのか(心得)、そして、我々はどのようにマークアップをすべきか(作法)、について具体的に解説します。

    HTML5マークアップの心得と作法
    IGA-OS
    IGA-OS 2011/08/30
    分かりやすいチュートリアル!
  • カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」:phpspot開発日誌

    カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 2010年11月29日- JQUERY BUBBLE POPUP v.2.3.1 - display animated and shadowed "bubble" popups with few lines of code in jQuery カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 カーソルを合わせた際に、単にポップアップするのではなく、ポップアップ自体がフェードインアニメーションしながら動きをもって表示されることでより、利用者の注意をひくことができそうです。 見た目も影付きでカッコいいのが特徴です。 デザインは選べます。 何かにカーソルを合わせた時だけじゃなくて最初から特定のエレメント上に表示しておくこともでき

    IGA-OS
    IGA-OS 2010/11/29
    使ってみようかな。
  • 今日からCSS3アニメーションを使えるようになるチュートリアル

    CSS3のアニメーションってスゴい! 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか?CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew 

    IGA-OS
    IGA-OS 2010/09/27
    そろそろCSS3も勉強しようか・・・。
  • おそろしく高機能でフリーなFlashフォトギャラリーの決定版「dfGallery 2.0」 - GIGAZINE

    AJAXによって複数の好きな画像を一気にアップロードし、それをフォトギャラリーとしてページに埋め込んで表示できるのがこの「dfGallery 2.0」。フルスクリーンモードにすることもでき、FlickrやPicasaのアルバムと連携可能で、カスタムテーマとマルチスキンによって見かけやレイアウトを大幅かつ自由に変更可能で、さらに管理用のコンソール画面、複数のギャラリーセットとアルバムのサポート、BGMの再生なども可能です。これだけ高機能であるにもかかわらずフリーでの利用(Apache License 2.0)が可能となっており、あらゆる局面で利用可能となっています。 実際の動作デモやインストールとカスタム方法を解説したムービーの再生などは以下から。 dfGallery 2.0 - Free Flash Gallery | Dezinerfolio 上記ページからこの「dfGallery 2.

    おそろしく高機能でフリーなFlashフォトギャラリーの決定版「dfGallery 2.0」 - GIGAZINE
    IGA-OS
    IGA-OS 2010/03/02
  • duree dpe

    Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par

  • iPhone向けサイトのユーザビリティ最適化でチェックしておきたい項目まとめ

    iPhoneを始めとするタッチパネル&フルブラウザ搭載のスマートフォンの普及が進んでいる。iPhoneの出荷台数は世界で3000万台、日国内に関して公式な発表はないが200万台を超えていると推測されている。今後はWindows Mobile端末の進化やAndroid携帯電話により、このスタイルの携帯端末の利用者がさらに拡大していくことが予想される。 今回は、こういったタッチパネル&フルブラウザ搭載のスマートフォンからのウェブサイト/サービスのユーザビリティについて、主にiPhoneを題材に考えてみよう。 iPhone対応は形式にとらわれず「ユーザー中心」視点で iPhoneからのウェブ利用には、従来の携帯電話と同様の「携帯性の高さ」「位置情報との連動」などに加え、 従来の携帯電話と比べて画面サイズが広い 端末の処理能力が高く、アプリでのサービス提供の自由度が高い 独自の操作(画面をつまむ

    iPhone向けサイトのユーザビリティ最適化でチェックしておきたい項目まとめ
  • iGoogleのようにコンテンツをドラッグ&ドロップできるスクリプト(2009/7)

    boxの中身にrssフィードを読み込ますことができます。ボックスを動かすのはJavaScriptですがフィードを読み込むためにMagpieRSSを使っているのでphpが使えるサーバーでないと作動しません。ちなみに私はこれを使ってiチャート広場っていうページを作りました。

    iGoogleのようにコンテンツをドラッグ&ドロップできるスクリプト(2009/7)
    IGA-OS
    IGA-OS 2009/07/21
    自分のWebサイトで使ってみたいな。
  • 今時のWebサイトを構築するのに便利そうなCSSフレームワーク·Malo MOONGIFT

    海外に見る最近のWebサイト(特にトップページ)のデザインは、縦に何段かに分かれたデザインが多い。一番上は大きな画像とともに二段構成、その下が2×2のテーブル組みなどでサービスの特徴を書き、次に横並びの3段で利用者の声といった具合だ。 今時のWebサイトっぽいデザインが簡単に まぁテーブルで組めばできないことはない。だがそれはださい、ださすぎる。CSSだけでどうにかしたい所だが、ブラウザの互換性も含めて考えるとプログラマにはとても無理だ。Firefoxで見られるように何とか組んで、IEで見たら吹き飛んでいた…なんてなったらもうやる気がなくなる。そんなことになる前に使いたいのがMaloだ。 MaloはGoogle Code上で公開されているCSSフレームワークで、GPLの下に公開されている。 Maloが実現するのは複雑な、それでいて簡単に設定できるCSSデザインだ。ヘッダとフッターを設けた上

    今時のWebサイトを構築するのに便利そうなCSSフレームワーク·Malo MOONGIFT
    IGA-OS
    IGA-OS 2008/12/08
    これは興味深い。導入を検討する。
  • 1