うつくし明朝体+オープンソースフォント商用可能
フリーフォントうつくし明朝体+は商用可の日本語書体 フリーフォントのうつくし明朝体+フォントは、無料ダウンロードでき商用可能な漢字も入った日本語書体。このフリーフォントは第二水準の漢字も含まれ、ワープロ、Adobe製グラフィックソフトなどのアプリケーションで自由に加工して使えます。ひらがな、カタカナをオリジナルで制作し、漢字をIPAex明朝で補完しています。 フォントのデザイン特徴について オールドスタイル明朝体は、基本的に縦書きの美しい流れを重視してデザインされています。印刷物やデジタルデバイスなど日常生活において明朝体の横書きが主流になっており、今後はより横書きの需要が高まっていくと感じています。うつくし明朝体+は柔らかさ・レトロな味わい・漢字とかなのバランスなど求められるオールドスタイル明朝体のエッセンスは残しつつ、横へのつながりを感じさせるモダンなデザインにしました。垂直水平のライ
Bootstrap 3正式版がリリース。モバイルファースト、レスポンシブ、フラットデザインなどを採用
複雑なCSSを自分で書かなくてもHTMLのマークアップで簡単に美しい比率のグリッドレイアウトを構成でき、分かりやすいボタン、パンくずリスト、メニューなどのWebページを記述できるCSSフレームワーク、「Bootstrap」の最新版「Bootstrap 3」が公開されました。 Bootstrap 3ではモバイルファーストを意識したデザインとなり、ボタンやメニューなどはフラットデザインを採用。 公開されのは現地時間8月19日で、Bootstrapの2周年にあたる日でした。 Bootstrap 3のテンプレート例 下記はBootstrap 3ではさまざまなテンプレートがの用意されていますが、下記もそのテンプレートの1つ。
これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
レスポンシブWebデザインはブームではない
スマホ表示がFC2のデフォルトテンプレート使ってるような私にいわれたかないでしょうが、あくまでも使ってるユーザー側の視点として考えてもらえると嬉しいなと。 決して軽くするのが目的ではない 基本的にCSSでもじょもじょしているわけですから、例えばPC表示でサイドバーに画像があり、その領域をスマホに最適化する為に全て排除したとしても、見えないだけで読み込んでは居るわけですね。 Ethan Marcotte（イーサン・マルコッテ）氏が考案したレスポンシブWebデザインが生まれたのは2010年の5月。読み込みサイズに関してはやはり海外でも色々と議論されているわけでして、なかなかどうして大変ですねと。 そこから1年くらいたったあたりから日本にも広がりつつあります。 広がった理由はとてつもなく単純でして、PC表示、小型のスマホ、タブレットなど、様々なデバイスサイズに対応するために、全て1からCSSを書
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
バンクーバーのうぇぶ屋
高卒でバカなのに最高に楽しい僕の生き方と守りぬいてきたこと 200.1k件のビュー 自分のやりたい事を仕事にしてる僕らに見られる10個の特徴 125.7k件のビュー 今更聞けない？！WEBデザイナーなら最低限知っておきたい有名フォントの数々 108.7k件のビュー 現代における留学が無意味だと思う5つの理由と、目標とすべき5つのこと 83.8k件のビュー 『海外に住めば英語は出来るように成る』は本当か？５年間カナダに居座った僕が体感したTOEICとかの意味 82.1k件のビュー 英作文に時間をかけるな！英語圏のWEB制作現場でよく使われる英語表現テンプレート集！【メール編】 60.5k件のビュー 超かっこいいタイポグラフィを駆使した映像の数々！息をのむ程魅入った映像総まとめ 48k件のビュー チーム間のコミュニケーションを円滑にしたい時に試してみるべきツールやWEBサービス色々 46.3k
無料で商用利用も可能なフリーアイコン集「30 Toolbar Icons」
画面の上や下に配置されるツールバーにあるお気に入りやプリンター、戻るや進むといったボタンをカスタマイズできるシンプルなアイコンが「30 Toolbar Icons」です。個人的に使うことはもとより、商用利用もできます。 30 Toolbar Icons for User Interface Design | Web Resources | WebAppers http://www.webappers.com/2012/07/09/30-toolbar-icons-for-user-interface-design/ アイコンの大きさは32×32、ファイル形式にはPSD形式とPNG形式の2つがあります。 アイコンは写真、メール、ダウンロード、設定、本、フォルダ、ページ、ツール、プリント、ヘルプ、サーチ、ペースト、アンドゥ、ホーム、電源、リンク、星、コメント、ロック、戻る、進む、ストップ、ゴミ
レスポンシブ・ウェブデザイン基礎
1. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ レスポンシブ・ウ ブデザイ ェ ン基礎 Responsive Web Design Basic こもりまさあき 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki 2. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ 自己紹介 こもりまさあき http://blog.gaspanik.com http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後 そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行し て従事。2001年、会社を退職しそのままフリーランスの道へ。案件ごとに業務内容 や立ち位置が異なるため、職域的な肩書きは
次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG（Web Hypertext Application Technology Working Group – ワットダブルジーと読む）で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか？ なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb
BananaPeel : バナナの皮 | トミモトリエ生霊ワールドツアー（仮）
当サイトについて当サイトはギャンブル業界に長年携わっている専門家が運営しており、皆さんが知っておくと役立つ情報をご紹介しています。もしご質問などあれば、お問い合わせページよりご連絡ください。 インテリアデザイナーが、新しいカジノの室内装飾、あるいは古いカジノの改装を手がける際に設計の段階で熟慮するいくつかの事実があります。 日本でオンラインカジノをプレイするなら、国内人気ナンバーワン「ベラジョンオンラインカジノ」がオススメです。 お客様を理解する カジノに関しては、カジノを訪れるお客様の情報は極めて重要です。デザイナーは、お客様を温かく迎え入れ、心地よく感じさせるような設計をすることが必要とされるからです。例えば、お客様の大半が女性であれば、女性を引き付けるように、装飾は暖かく優雅で明るくあるべきです。これは、色、備品、鏡、その他の小物などに反映されます。カジノをもっと女性らしい雰囲気にす
ProjectDD
最果タヒさんがつむぐ「詩になる直前」の言葉が並んでいるのですが、むしろ展示デザインを担当された佐々木俊さんとの「詩や言葉の、無限大の表現方法を探るインスタレーション展」と言った方がしっくりくる…それくらい言葉の表現方法のバリエーションに触れることができる展示になっています。
いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！
HTML5 旋風、吹き荒れてますね！(^0^)／ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！ 株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。 そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
https://jp.techcrunch.com/2009/11/12/20091111sneak-peak-at-nyts-latest-online-news-reader-prototype/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」:phpspot開発日誌
//// COLOURlovers :: loving colours since 1981
Amazon.co.jp: レスポンシブWebデザイン「超」実践デザイン集中講義: 山崎大助: 本
WordPressで一般的な企業サイトを作るときに参考になる記事
新着記事
