フォント好きのための定番まとめ！新着満載フリーのデザインフォントのまとめ -2014年4月 | コリス最近リリースされたものを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。 まずは、あのComic Sansを現代的にリデザインしたフォントから！
画像の作り方・使い方でファイルサイズを減らす方法
画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 高速化のための画像最適化の方法はいろいろなところで紹介されております。 当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。 こちらの記事でも紹介したように画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 デザインに左右される方法が多いので使えるケースは限られてますが、知っておくとどこかで役に立つかもしれません。 画像をぼかす jpegはそのアルゴリズムの特徴から通常の画像よりぼかした画像のほうがファイルサイズをおさえることができます。また、これは全体でなくて一部をぼかす場合
スマホサイトの矢印付きメニューをCSSのみで実装する。 | バシャログ。
こんにちは もうすぐ待ちにまったGWですね。今年は、多い人で11連休とかあるんじゃないでしょうか。そんなことしたら…もう、社会復帰できる自信がないmackyです。 さて、 そんな今日は、スマホサイトのメニューの定番デザインである、 矢印付きメニューをcssのみで実装してみようと思います。 CSSのみで実装する定番の矢印つきメニュー こんな感じです。 まずはHTMLを用意します。 HTML <ul> <li><a href="#">シーブレイン七不思議</a></li> <li><a href="#">シーブレインあるある</a></li> <li><a href="#">シーブレイン3つの掟</a></li> <li><a href="#">minamiが行く横浜うまいもの日記</a></li> </ul> css * { margin: 0; padding: 0; } a { disp
display: noneとレスポンシブ・ウェブ・デザイン
レスポンシブ・ウェブ・デザインとその設計を語る時にdisplay: noneが引き合いに出されることが多いなと感じる。その多用は設計ミスというような具合だ。そういうところは確かになくはないが、多用自体はCSSの貧弱さからくるHTMLの複雑さを意味するだけなのではないかと思う。 レスポンシブ・ウェブ・デザインはコンテンツを様々なデバイスで「収まる」ようにレイアウトを調整することではない。実装としてはそうなることは多いが、実際には多様なデバイスでのコンテンツの一貫性を確保するアプローチであると考えた方が適切なはずだ。その一貫性とはほぼコンテンツへのアクセス性と言って良い。様々な画面でそれを同じように確保するためには、レイアウトの調整だけではなく、構成部品の間引きや移動などが必要となる。 そういった一貫性の確保を同じHTMLを通して行う、とすると実装はほぼCSSに限られることになる。そして今のC
レスポンシブ Web デザインのサイトを作成する時に、知っておきたいこと | rakuishi.com
最近、レスポンシブ Web デザインのサイトを仕事で作成しています。レスポンシブは、PC・タブレット・スマートフォンなどのあらゆるデバイスに適したサイトを単一 HTML で表現する手法です。このブログもレスポンシブを採用していて、左右の横幅を狭めていくとページのレイアウトが変わります。 この記事では、レスポンシブサイトを作成する時に、知っておきたいコトをまとめてみました。今までレスポンシブサイトを作ったことがないけれど、ある程度 HTML/CSS を学んだ人向けに書いています。 目次 そもそもレスポンシブを採用するかどうか スマートフォンにおける表示の最適化 PC では幅一定で画面中央に、スマートフォンでは画面いっぱいに表示 Responsive Grid System CSS 記述量が減るメディアクエリの書き方 画像を画面いっぱいに引き伸ばすクラスを用意しておくと便利 伸縮する画像を背景
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
HTML5の標準を狙うGoogleの動画フォーマット「WebM」のこれまでまとめ
高画質かつ高圧縮の「H.264」がビデオフォーマットの主役の座についていますが、次世代のウェブフォーマットであるHTML5においては、H.264とともに主役として期待されているのがGoogleの開発する「WebM」です。WebMのこれまでの流れと今後の動画標準規格を巡る争いについてまとめてみました。 Google builds WebM patent pool of its own to fight back against MPEG-LA | Ars Technica http://arstechnica.com/business/2011/04/google-builds-webm-patent-pool-of-its-own-to-fight-back-against-mpeg-la/ Google and MPEG LA Announce Agreement Covering VP
ワイヤーフレーム作成時に役立ちそうなサイトや記事のまとめ | バンクーバーのうぇぶ屋
僕の日本人クリエイター専用シェアハウス『Frog House』の住人の一人が、BCITという名門IT系専門学校へ通っているんですが（彼のような日本人クリエイター留学生の話は来月のセミナーでしたいと思ってます）、そこの課題にどうやら自由な発想でワイヤーフレームを作ってこいみたいな課題が出たらしく、先日『ワイヤーフレーム作る時に使ってる物や参考になるサイトは無いか』と聞かれたので、こりゃ住人に良いカッコするチャンスと思ったから書く、という不純な気持ちで書いています（笑） でも、思っても見たら今までワイヤーフレーム系のネタで書いた事も無いし、良い機会なので、僕が知ってるワイヤーフレームを描く時に便利そうなツールやサイトを、この機会に全部まとめておこうかなと思います。 制作ツールは勿論のこと、素材サイトや確認ツール、なんか色々独断と偏見からワイヤーフレーム描く時便利そうって思える物ばかり紹介する（
同人誌の表紙のデザインする工程 - MEMOGRAPHIX
最近はTumblrテーマばかり作っているからめっきりやってないけど、ぼくは5年前くらいから同人誌のデザインを依頼されたら作るという活動をしていて、自分のサイトにも掲載している。 同人誌のデザイン、同人作家さんからデザインやってくださいみたいに依頼されるので、作って納品する。大抵は表紙（表1・表4）。そこで、デザインを考えるときの工程を下記にまとめる。最近紙もののデザインを殆どしてないので、事例が2〜4年前くらいのばかりになった。 同人誌、デザインも含めて自分ですべて作りたいという人にとっては、一番楽しい部分をアウトソーシングしちゃうのかよという感じかもしれない。全部自分でやりたい人は普通にそうすればよいと思う。一方で、デザインが苦手で、誰かに任せたほうがうまくいくと思ったなら、第三者に依頼するという選択肢もある。ぼくは特に営業活動みたいなのをしたことないので、そうやって依頼された案件だけを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本語 URL について - 関連コラム集