yamadarのブックマーク - はてなブックマーク

イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 - kojika17

数カ月前に@suzukisan__が投稿された﹁Illustrator Unlimited Appearance - suzuki | JAYPEG﹂は、Illustratorのアピアランスを駆使して、1つのオブジェクトからカメラのアイコンを作るという、面白い試みをされていました。アピアランスの可能性を示す、インパクトのある内容であったため、記憶に残っている方もいることでしょう。このアイコンが投稿されてから時間がたっていますが、HTMLとCSSに分解されるイメージが自然に湧いてきたので、少しばかりのHTMLとCSSでアイコンを模写してみました。 HTML と CSS で作ったカメラアイコン模写したカメラアイコンは、Internet Explorer 10以上や、最新のChrome, Firefoxなどであれば表示されるはずです。こちらがHTMLとCSSで書いたものになります。ソ

yamadar 2013/08/09

リンク

HTMLとCSSでカメラを書いたよ

yamadar 2013/08/09

ソース読むまでがネタ。すごいｗｗｗ

リンク

floatを解除する手法のclearfix と次世代のレイアウトの話

floatを解除する手法のclearfix と次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。通常フローから外されたボックスは、親のボックスの高さを認識できなくな

yamadar 2013/06/20

もっとCSS3の話になるかと思ったら歴史の話だった。でもそれぞれのプロパティについて理解を深める良い内容。小手先の技術でなく、基本をきちんと理解してるのは強いです。

リンク

CSS： marginの正しい理解 - kojika17

toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。﹁marginはバグが多い﹂という声をたまに聞きます。しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸

yamadar 2012/08/29

これは良質な記事。基礎がしっかり頭に入っていると強い。

*CSS
*CSS3

リンク

よく分からずにトーンカーブを使っている人に。 - kojika17

画像の色調補正する時、何を使いますか？私の場合、基本的な画像補正はトーンカーブ1つでほとんど済ませてしまいます。トーンカーブは使い方が分かれば、簡易的に明度、色調、コントラストなどを補正できる強力なツールになります。 Photoshopベースで紹介しますが、FireworksやGIMPでもトーンカーブを扱えますので、参考になれば幸いです。トーンカーブのデモで使用する画像は、フリーで配布されているPAKUTASOさんから写真をお借りして、説明します。トーンカーブ基本縦軸と横軸は、0から255まで階調を表しています。画像モードがRGBの場合、縦軸は上から下に向かって暗くなり、横軸は左から右に明るくなります。横軸が入力、縦軸が出力を表します。もっと噛み砕くと、横軸が元画像の階調、縦軸が補正後の階調です。斜めに走っている線にはいくつも点が打て、曲線や直角にしたりできます。階調の出

yamadar 2012/03/17

頻繁に使ってます。マスクと組み合わせるのをよくやる。

リンク

Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法

Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少するという報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。今回はWebサイトのパフォーマンスを上げる方法を取り上げます。パフォーマンスアップの前に応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ

yamadar 2011/08/29

リンク

デザインの基礎、黄金比から大和比、第2黄金比まで - kojika17

よく黄金比という言葉を聞いたりしますが、実際にどういうものかわかっていなかったり、デザインの当てはめ方が分からなかったりすることが多いので、簡単にまとめてみました。貴金属比nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を白銀比、第3貴金属比を青銅比といいます。よく聞く黄金比は、貴金属比の1つです。近似値　1.6180(約5:8) CSSで黄金比を見る伝承では古代ギリシアから使われ始めたと言われています。パルテノン神殿、モナリザなど数多くの建築物や美術、アートなどに使用されています。白銀比白銀比には、以下の2つがあります。 1:1+√2 の第2貴金属比に含まれる白銀比 1:√2　の日本で古くから使用されている白銀比(大和比) どちらも白銀比と呼ばれることが多いので、紛らわしいです。白銀比(第2貴金属比) 近似値　1:2.414(約5:12) CSSで白銀比を見

yamadar 2011/08/17

リンク

コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17

6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。以前にも﹁MicrodataとMicroformatsの違いについて﹂取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か？マークアップ言語であるHTMLは﹁見出し(h1,h2,h3... )﹂﹁段落(p)﹂﹁リスト(ul,ol,li)﹂などの文章構造を示すことができても、﹁人の名前﹂﹁肩書き﹂﹁地域﹂などを示すことができません。それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の

yamadar 2011/06/06

絶対読む。

**あとで読む

リンク

IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎

IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、﹁IE6がー！﹂とか﹁IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変﹂などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML5や IE 8 Beta 2 のモードスイッチなどの情報も含

yamadar 2011/06/05

今更な感じだけど、HTML に関する記事は全部読んでおこう。。。 ●*CSS ●*html ●tips

リンク

Webデザイナーが知っておく、DTPの基礎知識

Webデザイナーが知っておく、DTPの基礎知識 2011-05-08 CMYK RGB(加法混色)で表現される色を、塗料や染料では全ての色を再現できないため、印刷する場合はCMYK(減法混色)ににする必要があります。 CMYKは、シアン︵Cyan︶、マゼンタ︵Magenta︶、イエロー︵Yellow︶、キー・プレート︵Key Plate︶から成っており、シアン、マゼンタ、イエローの三色で理論上、黒も表現できますが、実際は強く表現されないためブラックを補ったCMYKが使用されています。しかしCMYKの黒でも本当の黒には見えません。そこで他の色も混ぜて、本当の黒に近づけることをリッチブラックといいます。印刷会社によっては推奨されているリッチブラックの濃度もありますが、C30%＋M20%＋Y20%＋K100%で問題ないと思います。入稿時にはCMYKの色指定を、5%刻みで指定する様にするよ

yamadar 2011/05/08

リンク

IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。

IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。 2011-05-02 Webサイトをコーディングする時に、IDとclassを考えるのが面倒臭くなったので、IDとclassを使わないでコーディングしてみました。シンプルなサイトなら簡単でつまらないので、IDとclassを使っても難しそうなデザインにしています。今回もJavaScriptは一切、使用していません。完成したサイト ID, classなしで組んだサイトを見る。サイトでやってみたHTML5HTML5では、html, head, bodyタグを完全に省略しても構わないとされています。省略してもDOMツリー上に存在しているので、 body {background:#f00;} というCSSの記述も認識してくれました。サイトで使用したCSS, CSS3の簡単なまとめ Child Selector 結

yamadar 2011/05/02

*CSS3
*HTML5

リンク

float解除の決定版。clearfixを考えたら、進化した。

現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが

yamadar 2011/04/06

これは面白い。ブラウザの描画速度にはどのていど影響するんだろ。overflow:hiddenも使った方が良いな。 ●*CSS

リンク

はてなブックマーク

タグ

ブックマーク / kojika17.com (12)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス