うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
18 Creative Examples of Typography in Motion
The use of typography in video allows us to reclaim the lost art of arranging typefaces in a way that would make an 18th century typesetter's head spin. This type of art is also known as Kinetic typography. The text is presented in a manner intended to convey or evoke a particular idea or emotion. In this compilation we showcase 18 creative uses of kinetic typography which include short movies mad
[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版（MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う）の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
![[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6e22153e1233d79c8da8733fc112f935fe5ee4a/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Ftypographic-1-1.png%3Ffit%3D500%252C250%26ssl%3D1)
20 Websites with Beautiful Typography
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. Typography in web design plays an inte
10 Examples of Beautiful CSS Typography and how they did it... | 3.7 Designs
Submit your website link and get a detailed report on how you can improve page performance, SEO optimization, mobile usability, and more. 5. Buzzworthy Buzzworthy Studio <div class="example"> <h2><span class="seg">ser</span><span class="seg">vic</span><span class="seg">es<b>.</b></span> <p>Using WordPress as our framework, we custom build websites to make your brand stand out from the noise. It al
Photoshop講座・メモ集：文字でシームレスパターン
WEBの背景用画像でもよし、フォトショップで作品を作っているときに、一定の選択範囲内をパターンで塗り潰すもよし、４５度の角度に曲げたテキストをシームレスに敷き詰めるパターンの作成方法です。 [1] フォトショップ7のフィルターには「パターンメイカー」って便利そうなものがあるけど、今回の場合、ランダムに敷き詰められちゃうと文字列が判読不能になっちゃうので（笑）使えません。まずは、適当な大きさの新規ファイルにお好きな文字列をコピペなどを利用して、ビッチリと埋め尽くしてみてください。わたしはココでは、小さな文字でどひゃ〜〜っとひたすら「PHOTOSHOP」という文字を打ち込んでみました。 [2] このテキストレイヤーはラスタライズする必要もないです。編集→変形→回転を選んで、 上の画像の赤の部分のように、回転の設定をするボックスにマイナス45を設定して確定します。打ち込んだテキストが４５度の
Hints of fonts on the web -- Introduction
Section 1：概説 Section 2：画像化テキスト Section 3：サンセリフ欧文(1) Section 4：サンセリフ欧文(2) Section 5：サンセリフ欧文(3) Section 6：セリフ欧文(1) Section 7：セリフ欧文(2) Section 8：セリフ欧文(3) Section 9：草書系・筆書系欧文(1) Section 10：草書系・筆書系欧文(2)・装飾系欧文 Section 11：等幅欧文・その他の欧文 Section 12：ゴシック系和文(1) Section 13：ゴシック系和文(2) Section 14：明朝系和文(1) Section 15：明朝系和文(2) Section 16：その他の和文 Appendix A：無償利用できるフォント Appendix B：Windows の標準フォント Appendix C：PostScript
株式会社アドレッサンス浪漫堂
6-chōme-33-1 Jingūmae, Shibuya City, Tokyo 150-0001 JAPAN © Adolescence Romando co.,ltd.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cameron Zotter
53 Mind-blowing Uses of Typography | Envato Tuts+
typeface.js -- Rendering text with Javascript, <canvas>, and VML
FlashEff2 | Online panel
Huge | A design and innovation company