タグ

2014年3月25日のブックマーク (7件)

  • レスポンシブWebデザインでハマりがちな%指定 │ Design Spice

    レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指

    レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
  • CSSのセレクタがちょっとあやふやな人はやってみて! 楽しみながらCSSのセレクタを学ぶ -CSS Diner

    CSSのセレクタがちょっとあやふやな人はやってみて! 楽しみながらCSSのセレクタを学ぶ -CSS Diner

    deepblue_will
    deepblue_will 2014/03/25
    これも面白い!ゲーム感覚でセレクタを覚えられる!
  • おかんでもわかるUXデザイン Version 0.1 - ネコメシCEOブログ

    3/24、TAM Coworkingをお借りして、「おかんでもわかるUXデザイン」というセミナーを自分で主催して実施しました。これ、ゆくゆくはマジでおかんでもわかるようにしたいんだけども(ようは、専門家じゃない人向けということですが)、まずはそのたたき台という感じで(だからVersion 0.1)、単にUXデザインって何よっていうのを単純化しただけの内容になっていて、完全におかんを突き放しているという、タイトルに偽りアリのものとなっております。 Version 0.1とはいえ、まー、UXデザインやってみたいけどやったこと無い人とか、何したらいいのかわからん人とかにとっては、ひとつの道しるべになるかもしれないので、スライドを公開する次第なのですが、気で職でUXデザインしてる人とか、アーキテクト的な人とか、そゆ人たちが見たら憤慨しそうなくらいに単純化しております。ツッコミどころ満載かと思い

    おかんでもわかるUXデザイン Version 0.1 - ネコメシCEOブログ
  • 【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。

    JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの? モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',

    【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。
  • 【Photoshop】あると便利!無料パターンを集めました。 | バシャログ。

    なかなかマリノスがACLで勝てないので、ヤキモキしているokadaです。 今回は、Photoshopパターンを集めました。よろしくお願い致します。 追加方法 ダウンロードした.patファイルをダブルクリックをして追加するか [レイヤー効果]→[パターンオーバーレイ]をクリックし、1から3をクリックし、パターンの読み込みで追加します。 {Patterns Triangles} 三角形をベースにしたジオメトリックパターン {Patterns Triangles} New Free Paper Patterns 紙のテクスチャパターン New Free Paper Patterns Handmade paper pattern set こちらも紙のテクスチャパターン Handmade paper pattern set Micro Patterns シンプルなシームレスパターン Micro Pa

    【Photoshop】あると便利!無料パターンを集めました。 | バシャログ。
  • 初心者がクラウドワークスで2連勝したIllustratorアイコン作成勉強法 - atskimura-memo

    ビギナーズラックかわかりませんが、Illustratorの勉強を始めてほぼ土日だけの二週間でクラウドワークスのコンペで2連勝してしまいました。仲間を増やしたいので、この二週間何をやったかまとめてみたいと思います。 なお、性格にもよると思うので、この勉強法が合わない人もいると思います。 こちらが証拠の私のクラウドワークスのページです。自己PRとかなんも書いていませんw atskimuraさんのプロフィール【クラウドワークス】 では、2週間何をやったか書いていきます。 イラレでアイコンを作るという作業を体で理解する Illustratorテクニックファイル アイコン&マークデザイン 最初はこちらのを買いました。 ちょうど娘がインフルで私は暇だったこともあり、土曜だけで7時間くらいやったんじゃないでしょうか。 の3分の1くらいひたすらやりました(7時間で1/3。意外と時間かかる)。 この

    初心者がクラウドワークスで2連勝したIllustratorアイコン作成勉強法 - atskimura-memo
    deepblue_will
    deepblue_will 2014/03/25
    アイコン作ってみたいと思ってたんだよねー
  • あなたのHTML/CSSがダメな理由はこれだ『WTF, HTML and CSS?』 | 100SHIKI

    HTML/CSSのマークアップをする上で気をつけるべきことをまとめたサイトが「WTF, HTML and CSS?」だ。 コーディングをしていて「あれれ?」と思ったら見返すのもいいし、自分の知識レベルを確かめるためにざっと眺めておいてもいいだろう。 ただ、もちろん時代や状況によって、これらのアドバイスが適切でないこともある点には気をつけておこう。 どちらにしろスキルチェックリスト的に知っておくといいですな。

    あなたのHTML/CSSがダメな理由はこれだ『WTF, HTML and CSS?』 | 100SHIKI