タグ

2013年10月17日のブックマーク (11件)

  • HTML5・CSS3時代のweb制作コンセプト

    HTML5・CSS3対応のブラウザが増えてきて、制作のコンセプトも変化してきました。 プログレッシブエンハンスメントなどユーザーのブラウザ環境に焦点を置いた制作コンセプトをまとめました。 足りない知識を埋めながら書いたので一部認識が間違ってる箇所があるかも知れませんが、その場合はご指摘頂けると助かります。 Progressive Enhancement Graceful Degradation Polyfill Progressive Enhancement(プログレッシブエンハンスメント) どのブラウザでも基的な水準のユーザーエクスペリエンスを提供をし、 新しく高水準のブラウザにはCSS3やjsなどでよりリッチなデザインや機能を提供するという考えです。 またProgressive Enhancementには下記の原則があります。 基的な内容は、すべてのブラウザでアクセス可能である必要

    HTML5・CSS3時代のweb制作コンセプト
  • レスポンシブウェブデザインのつくり方:mockup

    こんにちは、西野です。好きなinput typeはinput type="range"です。 前にAdobe Edge(現Adobe Edge Animate)の使い方記事を書きました。(Edgeが出た当時の記事なので情報が古いかも…) 今回は、最近ぼちぼち見かけるようになってきたレスポンシブデザインについてお話したいと思います。 実装の話はさわり程度で、企画、ディレクター、デザイナー向けにまとめています。 1.レスポンシブデザインとは レスポンシブデザインとは、簡単にいうと同じHTML/CSSでいろいろな画面サイズに対応することです。 「あー、ワンソース マルチユースってやつでしょ」と言うと業界っぽい感じが出せます。(あくまで出せるだけです) 実例としてはTIMEのサイトやBREAKING NEWSなどが完成度が高いサイトとして挙げられると思います。 Bootstrapもレスポン

  • 子供とも楽しめる!炊飯器で作るホットケーキミックスのお菓子レシピ

    レシピ簡単レシピケーキ2020年5月9日 更新子供とも楽しめる!炊飯器で作るホットケーキミックスのお菓子レシピ時間がない!めんどくさい!そんな人は炊飯器で作る、ホットケーキミックスの簡単お菓子作りはいかが?手に入りやすいホットケーキミックスを炊飯器に入れるだけ!早速詳しいホットケーキ×炊飯器のお菓子レシピを見ていきましょう。 究極簡単なお菓子レシピ、『炊飯器×ホットケーキミックス』 ホットケーキミックスを使って炊飯器で焼き上げるだけという、超カンタンなお菓子レシピがあるんです。 これなら基的に材料を混ぜたら炊飯器で焼き上げるだけなので超簡単。 さらにホットケーキミックスを使うので材料も最低限で出来ますし、工程も簡単なので、お子さんと一緒にクッキングする楽しさも! お菓子作りに苦手意識を持ってる人だって安心ですよ! 洗い物だって少ないので、時間がない人にもオススメです♡ ■炊飯器で作るケー

    子供とも楽しめる!炊飯器で作るホットケーキミックスのお菓子レシピ
  • 出産後の育児スタートのあまりの過酷さに鬱になった話

    結婚して1年、29歳で初めて妊娠・出産をした。妊娠前は深夜帰宅のそこそこ激務なITブラック企業に務めていて 学生時代にはスポーツをしていたから、心身の健康にはまあまあ自信があった。 同じ年の夫と結婚して1年、妊娠が発覚した。 産むまでの妊娠経過。私は健康優良妊婦だった。つわりは人並みにあったものの、血液検査の結果も尿検査の結果も毎回良好、血圧も正常。 不正出血もなく、順調そのものの妊娠生活だった。 陣痛は、予定日を3日過ぎた日の夜中にはじまった。 陣痛と出産陣痛は、私のちんけな想像をはるかに凌ぐ、ものすごい激痛だった。 痛みの感じ方には個人差があるというが、私にとっては鋭いナイフで下腹部をえぐられているかのような痛みだった。 はじめは軽い腹痛みないなものなのだが、時間経過とともにどんどん痛みが増してくる。 脂汗が全身から吹き出し、痛さからなんとか逃れようと、体が勝手にのたうちまわる。 陣

    出産後の育児スタートのあまりの過酷さに鬱になった話
  • レスポンシブ時代の10のキーワード | grip on minds

    1. Responsive Web Design(レスポンシブウェブデザイン) スクリーンサイズに応じて、コンテンツの並び替えや表示/非表示、レイアウトの変更、画像やテキストをリサイズする手法の総称で、Ethan Marcotte 氏が 2010年に A List Apart に寄稿した「Responsive Web Design」で紹介されました。 スクリーンサイズの判定は、おもに CSS3 の「Media Queries(メディアクエリ)」を用いるので、HTML がワンソースで済むのが最大の特長です。 レスポンシブ Web デザインのメリット/デメリットを以下に記述します。 メリット デバイスごとに HTML ファイルを用意しなくて済むので、開発コストが抑えられる 将来のデバイス(家電など)にも対応できる URL がひとつなので、SEO の観点からも望ましい デメリット ファイルサイズ

  • 生活雑貨AIDA

    AIDAではネットショップ新商品・ 再入荷のお知らせ、お店の お知らせなどのメールマガジンを 不定期で発行しています。 下記のフォームにメールアドレスを ご入力後、「登録」をクリックして ご登録いただけます!

  • お家で作れる「ラング・ド・シャ」 | レモンの秘密 - レモンと PICO が暮らす日々 -

  • jQueryを高速に動作させるためのポイント5つ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    最近東京にこなれてきたどうも僕です。何がこなれてきたって?電子マネーさ!東京ならSuica、Edy、Waon、なんでもタッチで買えちゃうんだぜ!コンビニで清算するとき、「支払いはEdyで」と一言、そして、読み取り機にソフトタッチ。支払いのシャリーンという音とともに僕の白い歯がキラーンとかがやくのさっ! そんな東京にこなれてきた僕が、今日はjQueryを使う上で気をつけておきたいポイントを何点か紹介しようと思うよ! jQueryって便利だけど、もとはJavaScriptで、インタプリタ言語で、コンパイル時に最適化なんてされないから、書き方一つで意外とパフォーマンスに差が出てくるんだよね!開発時は高スペックのPCで見てるから気づかないかもしれないけど、あなたのサイト、低スペックマシンとかモバイル端末でみたら、もっさもさかもよ! っというわけで、jQueryを使う上で気をつけたいポイントを挙げて

    jQueryを高速に動作させるためのポイント5つ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 表示のエフェクト(3/4):初心者のためのjQueryプログラミング入門 - libro

    show/hide以外にも、視覚効果の機能は用意されています。それは「スライド効果」と「フェード効果」です。 スライド効果は、エレメントを上にするすると引き上げて消したり、上からするすると引き出してきて表示したりするものです。これには、以下の3つのメソッドがあります。 slideDown――引き出して画面に表示する。 slideUp――引き上げて画面から消す。 slideToggle――slideDown/slideUpを交互に繰り返す。 フェード効果は、透過度を変えていくエフェクトです。次第に透明になって消えて行ったり、次第に現れてきたりするものです。これも3つのメソッドがあります。 fadeIn――次第に現れてくる。 fadeOut――次第に消えていく。 fadeTo――指定の透過度で表示される。 この中で、やや性格が異なるのは「fadeTo」でしょう。その他は基的に「エレメントの表

    Yukarigohan
    Yukarigohan 2013/10/17
    fadeIn fadeOut fadeTo
  • jQuery入門道場

    Kindle版の購入(¥450円) 書のメニュー 「jQuery入門道場」と「よく分かる jQuery Deferred」の2冊をAmazon Kindle電子書籍として販売しております。サイトでは「jQuery入門道場」の5章までの内容をカット無しでWEB版で公開しております。 始めに jQueryとは? セレクター 属性、CSS操作 HTML、テキスト、フォーム値の取得&設定 横断(Traversing) jQueryオブジェクト操作 イベント処理 AJAX エフェクト・アニメーション プロパティ .data() ユーティリィ(関数) プラグイン その他 その他、目次など詳しくは、jQuery入門道場紹介ページをご覧ください。 電子書籍の形式と購入先 Amazon Kindle版では、PDFのような固定レイアウトではなく、リフロー型になります。リフロー型とは、見る端末により表示さ

    Yukarigohan
    Yukarigohan 2013/10/17
    hide show fadeIn fadeOut
  • jQuery入門道場 ~ jQueryの使い方~ 【エフェクト・アニメーション(Effects)】

    jQueryの基的な使い方を学べるサイトです。エフェクトとは、アニメーションの効果のことを指します。何かの状態が変化した時に、いきなり表示が変わるのは、ユーザーにとっては何が起きたのか分かりにくいものです。一定のアニメーションを付けることで、ユーザーに変化が起きている事を伝えられます。適切な箇所で、適切なアニメーションを使っていきましょう。 .show()、.hide() .toggle() .show()、.hide() .show()、.hide()は、お互い反対のメソッドのため、一緒に見て行きましょう。 .show()は、選択している要素を表示する場合、.hide()は、選択しているを非表示にする場合に使用します。 .show() .hide() 引数無しでこれらを呼び出した場合、瞬間的に選択されている要素を表示・非表示にします。 サンプルを見てみましょう。 .hide()は、C

    Yukarigohan
    Yukarigohan 2013/10/17
    hide show fadeIn fadeOut