CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
2015年1月16日 フォント, 便利ツール 久しぶりにブックマークしているサイトを整理しました。という事でお掃除後の恒例行事?私がブックマークしているフォント・Webフォント・テキスト関連のWebサイトを、中の人へ感謝の気持ちも込めてシェアします!何年もお世話になっているサイトばかりですが、ここ最近はWebフォント関連のサイトが増えてきましたね。いいな!と思えるサイトがあれば嬉しいです。 ↑私が10年以上利用している会計ソフト! フォント関連 フォントhack.jp フォントhack.jp 日本語の無料フォントの表示確認ができるサイト。複数のフォントを表示して比較することもできます。 dafont dafont 英字の無料フォントを大量に集めたサイト。大量すぎて眺めてたらいつも物凄く時間がたってますw ライセンスは各自要確認。 フォントガレージ フォントガレージ 日本語フォントの販売サイ
2015年1月21日 インスピレーション, 便利ツール インフォグラフィックスとは情報やデータをを視覚的に表現したものです。情報を素早く簡単に表現したい場面で用いられ、私たちの身の回りにある路線図や会議での資料、学校の教科書などなど、様々な形で目にする事があるかと思います。今日はそんなインフォグラフィックスに注目してみましょう!インフォグラフィックスを制作する機会がないという方でも、全体のデザインやアイコン制作、配色のアイデアになりますよ! ↑私が10年以上利用している会計ソフト! なんでインフォグラフィックスを使うの? インフォグラフィックスで情報を視覚化することで、伝わりづらい数値や専門的な情報も比較的伝えやすくなります。簡単に例えると、「チョコレートを食べる量が2011年は200kgだったのが、2012年は240kgに増えました」と文章だけで説明されるより、棒グラフで推移を視覚的に見
こんなエントリをみつけました↓ >Illustrator WEB用に保存するとサイズがずれる どうもイラレ系の制作TIPSを見ているとこのテの「イラレから書き出すとズレる」の記述があるんですががが。 結論から言えばズレません。 ズレるのはそのオブジェクトの座標がズレているからです。ピクセルにぴったりあわせてオブジェクトを作ればズレないんですヨ!マジでマジで! 最初っからズレないようにデータをつくれば、イチイチPhotoshopに書き出してからスライスとかしち面倒くさい事しなくて済みます。元ファイルが複数あるとミスの元ですし、できればイラレで作ったら元ファイルはイラレで完結しておきたいところなのです。 スライスもイラレ上で長方形を使ってズレる事なくキレイに切れますからね。 キモは前にも描きましたが。定規とトリムマークと数値入力です。それとピクセルプレビュー。 手順としては 1. 新規書類を開
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 1.三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 2.問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 3.原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro
先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。 IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。 というわけでここらで初心者からパワーユーザーまでぜひおさえておきたいチートシートページやリファレンスサイトをまとめておきますので参考にどうぞ。 CSS3の困った/アレが知りたい、はここで調べよう 筆者選で7つほど。他にもいろいろあるんですが、読みやすいのメインに挙げてみました。 1.E BISUCOM TECH LAB : CSS3プロパティ&ブラウザ対応一覧 恐ろしくまとまり過ぎているページ。もともと書籍の巻末付録だったものをWebで公開しているらしいです。各プロパティの対応ブラウザが一目でわかるのがありがたい。 ベンダープレフィックスの要・不要とかまで書いてます。時々更新され
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー(iframe)の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
こんなエントリーは去年末か年明けに書いておけ!って思いますが、blogを書く練習としてまとめます。 これから列挙するツールを使う事により、去年は手を動かす事の楽しさを再確認。 いままでダルかった作業が楽になるだけではなく、HTMLをキレイに書けたり構造を考えるようになったりと一石二鳥。 SASS and Compass 全俺が感動し、咽び泣くほど無くてはならない存在となったHtmlコーディングの革命児。 なぜすぐに導入しなかったのかと過去の自分に言いたいぐらい! いまさら解説はいらないと思いますので、お世話になったサイトをご紹介いたします。 CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 Sprite画像でもう悩まない?!SassとCompassで速攻Sprite画像を作る方法に感動! | バンクーバーのうぇぶ屋 CompassでCSSスプライト[to-R] C
こんにちは! みなさんQuoraというサイトをご存知ですか?QuoraはFacebookの元CTO(最高技術責任者)が立ち上げたQ&Aサイトです。実名+肩書きの登録が必要なので、他のQ&Aサイトより回答者のクオリティが高い事が特徴のようです。(日本だとYahoo知恵袋が似ているWebサービス) 今回Quoraで日本のWebデザインについての興味深い質問を見つけたので、その質問と回答のいくつかを記事にしてみました。(記事ネタQuestion :Why is web design so bad for Japanese websites?) 【Question】 これまで日本のWebサイトは一般的にきれいなものだと思っていたが、実際は違った。アメリカのWebサイトより5年から10年の遅れを取っているように思えます。多くのWebサイトにFlashが使われているし、アメリカのものよりごちゃごちゃし
ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 body:before { /* top shadow */ content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box
CSS3からDIV一個で出来る表現なんかも色々あるんですね。ちょっと前まで超面倒だったボックスのオシャンティーな線の装飾とかぼかしとかグラデになんやらかんやら。DIVボックス一つとっても色々な装飾効果をもたせられるなぁと思う今日この頃。 それこそ、ONE DIVのような一つのDIVで表現できるアイコンを作ってるサイトもあって、CSS3を突き詰めると色々知ることも出来て面白いなぁと思うわけです。 っていうわけで、ONE DIV程凝ったことはできませんが、今日はそんなDIV一個で使えそうなボックスの作り方をいくつかご紹介!擬似要素使ってちょっとちょめちょめしたら縫い付け効果のボックス出来たりと、以外と使えそうなものを選んだつもりなので、一度見てみてもらえると嬉しいです!ちなみに、IEチェックは9だけしてます。8とかはCSSPIE当たりで頑張ってなんとかする方向で…何か変なとこあったら直しますの
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は? 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう!と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元:少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
ここ最近立て続けに素晴らしいアイコン素材がリリースされたので、まとめて紹介します。 ほとんどが商用利用も無料です。
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
こんにちは、NHN Japanのマッチングサービス事業部でマーケティングを担当しているotakeです。 今回は担当サービスの運用業務と並行して出稿も担っている忙しいディレクターさんやこれから出稿業務に携わる方のために、チャッチャと読んで現場ですぐに使える実戦的なナレッジの一部を「バナー広告制作の基礎知識」として書かせていただきます。 当事者意識を持たせるAttentionを考える ユーザーの購買行動において、バナー広告が担うポジションはAttention(注意)喚起にあたりますが、一般的にバナー広告は誰に注意を促すものなのでしょうか。 検索から目的を持って能動的に何かを探しているわけではないが、潜在的な関係性を秘めているのがバナー広告の対象となる潜在層。ここに位置する対象には”この広告はあなたに関係あるものです”、”おそらくあなたの話です”といった潜在欲求に気づきを与える「当事者意識を高め
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く