Oshiスタイルガイド

はじめに

このスタイルガイドはに基づいています Twitterのブートストラップガイド。 これは、Oshiを提示する方法のための一般的な概要を意味するものです。

ブランドのアートワーク

Oshiロゴ

oshi-ヘッダーロゴ-大暗い背景 oshi-ロゴ大黒透明な背景

フルサイズのメディアファイルへのリンクサムネイル、

ロゴに使用される表記規則

ロゴフォント:Ubuntuの。 このフォントは、次のサイトからダウンロードできます。 google.com/fonts/specimen/Ubuntu

iはある#FF0C00上の赤い点

レタリング角:97度

oshiロゴ角度
Oshiロゴタイプ角

「Oshiガイ」マスコット

Oshi男のフルサイズの画像へのリンクは下の画像。

characterposes_vector 1.0
Oshi男、明るい背景
characterposes_vector 1-0ダーク
Oshi男、暗い背景

 

フルサイズのメディアファイルへのリンクサムネイル、

 

ブランドカラーバリエーション&使い方

光の背景

背景色:#FFFFFF

フォントの色:#000000

暗い背景

背景色:#13181C

フォントの色:#FFFFFF

タイポグラフィ

リンクス

外部リンク

ドメイン内のページへのリンクはすべて、になります

リンクテキスト

リンクは外部サイトに行くと、新しいタブで開きますし、これに似たアイコンが表示されます。

リンクテキスト

リンクのCSS:

ホワイトバックグラウンド(#FFF)
{色:#1A0DAB;テキスト装飾:なし;} A:ホバー{テキスト装飾:下線;} A:訪問{色:#609;} 外部リンクは、「アウトリンク」アイコンが表示されます。

暗い背景(#13181C)

Oshi背景色
Oshi背景色#13181C

A:{色:#FF9800;テキスト装飾:下線;} A:ホバー{テキスト装飾:なし;} A:{色訪問:#FFC107を。 テキスト装飾:下線; } 外部リンクは、「アウトリンク」アイコンが表示されます。

2016-05-20_133310

見出し

すべてのHTMLの見出し、 <h1> スルー <h6>、 ご利用いただけます。 .h1 スルー .h6 クラスを使用すると、見出しのフォントスタイルを一致させたいが、まだあなたのテキストがインラインで表示したいときのために、もご利用いただけます。

h1。 Oshi見出し

セミボールド体36px

h2。 Oshi見出し

セミボールド体30px

h3。 Oshi見出し

セミボールド体24px

h4。 Oshi見出し

セミボールド体18px
h5。 Oshi見出し
セミボールド体14px
h6。 Oshi見出し
セミボールド体12px
コピー
<h1> h1。 Oshi見出し</ h1> <h2> h2。 Oshi見出し</ h2> <h3> h3。 Oshi見出し</ h3> <h4> h4。 Oshi見出し</ h4> <h5> h5。 Oshi見出し</ h5> <h6> h6。 Oshi見出し</ h6>

ジェネリックと任意の見出しで軽く、二次テキストを作成します。 <小> タグまたは .small クラス。

h1。 Oshi見出し 二次テキスト

h2。 Oshi見出し 二次テキスト

h3。 Oshi見出し 二次テキスト

h4。 Oshi見出し 二次テキスト

h5。 Oshi見出し 二次テキスト
h6。 Oshi見出し 二次テキスト

二次テキストのCSS。

.h1 .small、.h1小、.h2 .small、.h2小、.h3の.small、.h3小、h1 .small、h1小、h2 .small、h2小、h3 .small、h3小{ フォントサイズ:65%; } .h1 .small、.h1小、.h2 .small、.h2小、.h3 .small、.h3小、.h4の.small、.h4小、.h5 .small、.h5小、.h6 .small、 .h6小、h1 .small、h1小、h2 .small、h2小、h3 .small、h3小、h4 .small、h4小、h5 .small、h5小、h6 .small、h6 {小 フォントの太さ:400。 行の高さ:1。 }

 

コピー
<h1> h1。 Oshi見出し<小>セカンダリテキスト</小> </ h1> <h2> h2。 Oshi見出し<小>セカンダリテキスト</小> </ h2> <h3> h3。 Oshi見出し<小>セカンダリテキスト</小> </ h3> <h4> h4。 Oshi見出し<小>セカンダリテキスト</小> </ h4> <h5> h5。 Oshi見出し<小>セカンダリテキスト</小> </ h5> <h6> h6。 見出しOshi <小>セカンダリテキスト</小> </ h6>

ボディーコピー

Oshiのグローバルなデフォルト フォントサイズ is 14px行の高さ of 1.62。 これに適用されます <BODY> そしてすべての段落。 加えて、 <p> (段落)は半分その計算された行の高さ(デフォルトでは10px)の下マージンを受け取ります。

Nullamモリス笑いQUIS eget ornare骨壷EUのレオヴェル。 スペルマsociis natoque penatibusらmagnis DIS分娩山nascetur ridiculus MUS。 Nullam IDシステム識別nibhのultricies痛みを伝えます。

スペルマsociis natoque penatibusらmagnis DIS分娩山nascetur ridiculus MUS。 〜している間metus ullamcorper nulla非アトリ属auctor。 モリスをDuis、commodo非luctus、のNiSi ERATのporttitorの小舌、切れ込みのNEC ELIT eget SEMの憎悪です。 〜している間metus ullamcorper nulla非アトリ属auctor。

マエケナス笑いegetバリウスSED DIAM blandit非マグナをAMET座ります。 〜している間のID ELIT非マイルポルタ妊婦egetのmetusで。 モリスをDuis、commodo非luctus、のNiSi ERATのporttitorの小舌、切れ込みのNEC ELIT eget SEMの憎悪です。

コピー
<P> ... </ P>

リード本体のコピー

段落を追加することで、スタンドを作ります 。リード.

Vivamus sagittisラクスaugue VEL laoreet rutrum faucibus auctor痛み。 モリス、非のEST commodoのluctusをDuis。

コピー
<P クラス = "つながる"> ... </ P>

少ないで構築されました

タイポグラフィック規模は中2未満の変数に基づいています variables.less: @フォントサイズベース そして @行の高さベース。 最初は全体で使用されるベースフォントサイズであり、第二は、ベースラインの高さです。 私たちは、これらの変数と余白を作成するためのいくつかの簡単な数学、パディング、そして私たちのすべての種類のラインの高さなどを使用しています。 それらをカスタマイズしOshiが適応します。

インラインテキスト要素

マークテキスト

原因別のコンテキスト内の関連性にテキストのランを強調するために、使用します <マーク> タグ。

あなたはにマークタグを使用することができます ハイライト テキスト。

コピー
あなたは、<マーク>ハイライト</マーク>テキストにマークタグを使用することができます。

削除されたテキスト

使用削除されたテキストのブロックを示すための <デル> タグ。

テキストのこの行は削除された文字列として扱われることを意味します。

コピー
<デル>テキストのこの行は削除されたテキストとして扱われることを意味しています。 </デル>

取り消し線テキスト

もはや関連する使用しているテキストの指示ブロックの場合 <S> タグ。

テキストのこのラインはもはや正確として扱われることを意味します。

コピー
<S>テキストのこのラインはもはや正確として扱われることを意味します。 </ S>

挿入されたテキスト

ドキュメントへの追加を示すために使用します <イン> タグ。

テキストのこの行は、文書への追加として扱われることを意味します。

コピー
<イン>テキストのこの行は、ドキュメントへの追加として扱われることを意味しています。 </イン>

下線付きのテキスト

テキストの使用を強調するために、 <U> タグ。

テキストのこのラインは、下線を引いたとしてレンダリングされます

コピー
<U>下線付きテキストのこの行がレンダリングされます。</ U>

軽量のスタイルを持つHTMLのデフォルトの強調タグをご利用ください。

小さなテキスト

テキストの脱強調インラインまたはブロックの場合、使用 <小> 85%親のサイズでテキストを設定するためのタグ。 見出し要素は、自分自身を受け取ります フォントサイズ ネストされたため <小> 要素。

あなたは、代わりにインライン要素を使用してもよいです .small いずれかの場所で <小>.

テキストのこの行は、ただし書きとして扱われることを意味しています。

コピー
<小>テキストのこのラインは細かい文字として扱われることを意味しています。 </小>

ピン

重い重量フォントでテキストの断片のために強調しています。

次のテキストの抜粋です 太字のテキストとして表示されます.

コピー
<strong>太字</ strong>のようにレンダリング

イタリック体

イタリック体で、テキストの抜粋のために強調しています。

次のテキストの抜粋です 斜体のテキストとしてレンダリング.

コピー
<em>のイタリックのテキスト</ em>のようにレンダリング

代替要素

使用して自由に感じます <B> そして <I> HTML5で。 <B> 搬送しながら、追加の重要性なしに単語や語句を強調するためのものです <I> 主に音声、技術用語、などのためであります

アライメントクラス

簡単にクラスにテキストの配置コンポーネントでテキストを再編成します。

左揃えのテキスト。

センターでは、テキストを整列します。

右揃えテキスト。

揃えテキスト。

いいえラップテキストはありません。

コピー
<P クラス = "テキスト左">左整列テキスト。 </ P> <P クラス = "テキスト中心">中央揃えテキスト。 </ P> <P クラス = "テキストの右">右揃えテキスト。 </ P> <P クラス = "テキストを正当化">両端揃えのテキスト。 </ P> <P クラス = "テキストのnowrap">なしラップテキスト。 </ P>

変換クラス

テキストの大文字クラスとコンポーネント内のテキストを変換します。

小文字テキスト。

大文字TEXT。

テキストを大文字に変更しました。

コピー
<P クラス= "テキスト小文字">小文字のテキスト。 </ P> <P クラス = "テキスト大文字の">大文字のテキスト。 </ P> <P クラス = "テキスト大文字">資産計上されたテキスト。 </ P>

略語

HTMLのの様式化された実装 <略称> ホバーの拡張バージョンを表示する略語のための要素。 と略語 タイトル ホバー上と支援技術のユーザーに追加のコンテキストを提供し、ホバーの下境界線とヘルプカーソルを光が点在している属性。

基本的な略語

属性がある単語の略語 ATTR.

コピー
<略称 タイトル= "属性"> attrの</略称>

頭文字

加えます .initialism 小さめのフォントサイズの省略形に。

HTML スライスされたパン以来の最高のものです。

コピー
<略称 タイトル= "ハイパーテキストマークアップ言語" クラス= "頭文字"> HTML </略称>

アドレス

最寄りの祖先や仕事の全体のボディのための現在の連絡先情報。 とのすべての行を終了して書式を保持 <BR>.

Twitter、Inc.
1355マーケットストリート、スイート900
サンフランシスコ、カリフォルニア州94103
P: (425) 247-1895
フルネーム
first.last@example.com
コピー
1355マーケットストリート<BR> <アドレス> の<strong>ツイッター社</ strong>の 、スイート900はサンフランシスコを<BR>、CA 94103 <BR> <略称 タイトル=「 電話」> P:</略称>(123 )456-7890 </アドレス> <アドレス> の<strong>完全な名前</ strong>の<BR> <a href= "mailto:#"> first.last@example.com </a>の </アドレス>

Blockquotes

ドキュメント内の別のソースからのコンテンツのブロックを引用してください。

デフォルトBLOCKQUOTE

ラップ <BLOCKQUOTE> 任意の周り HTML 引用符として。 直線の引用符のために、私たちはお勧めします <p>.

Loremのイプサムの嘆き、AMET consecteturのadipiscingのELITに座ります。 整数ERATは、事前にお問い合わせ今。

コピー
<BLOCKQUOTE> <P> Loremのイプサムの嘆き、AMET consecteturのadipiscingのELIT座ります。 整数アンティをERATお問い合わせ今。 </ P> </ BLOCKQUOTE>

BLOCKQUOTEオプション

標準の上の簡単なバリエーションのスタイルと内容の変更 <BLOCKQUOTE>.

ソースの命名

加える <フッタ> ソースを特定します。 ソース作業中の名前を包みます <引用>.

Loremのイプサムの嘆き、AMET consecteturのadipiscingのELITに座ります。 整数ERATは、事前にお問い合わせ今。

で有名な誰か ソースタイトル
コピー
<BLOCKQUOTE> <P> Loremのイプサムの嘆き、AMET consecteturのadipiscingのELIT座ります。 整数アンティをERATお問い合わせ今。 </ P> <フッタ> <引用 タイトル= "ソースタイトル">ソースタイトル</引用> </フッタ> </ BLOCKQUOTE>で有名な誰か

代替ディスプレイ

加えます .blockquoteリバース 右揃えコンテンツとBLOCKQUOTEため。

Loremのイプサムの嘆き、AMET consecteturのadipiscingのELITに座ります。 整数ERATは、事前にお問い合わせ今。

で有名な誰か ソースタイトル
コピー
<BLOCKQUOTE クラス= "BLOCKQUOTE-逆"> ... </ BLOCKQUOTE>

リスト

順序なし

ないために、アイテムのリスト しません 明示的にも問題。

  • Loremイプサム嘆き座るAMET
  • Consectetur adipiscing ELIT
  • Loremののマッサでの整数molestie
  • pretium Nisl aliquetでFacilisis
  • Nulla velitのvolutpatのaliquam
    • Phasellus iaculis neque
    • Purusはultriciesをsodales
    • 前庭のSEM porttitorのlaoreet
    • リベロ交流volutpatでTristique
  • FaucibusポルタラクスVELアトリ属
  • Aenean ERATは、NUNC AMET座ります
  • Loremののegetのporttitor
コピー
ます 。<ul> <li> ... </ LI> </ UL>

順序付けられました

順序で項目のリスト ありません 明示的にも問題。

  1. Loremイプサム嘆き座るAMET
  2. Consectetur adipiscing ELIT
  3. Loremののマッサでの整数molestie
  4. pretium Nisl aliquetでFacilisis
  5. Nulla velitのvolutpatのaliquam
  6. FaucibusポルタラクスVELアトリ属
  7. Aenean ERATは、NUNC AMET座ります
  8. Loremののegetのporttitor
コピー
<OL> <LI> ... </ LI> </ OL>

Unstyled

デフォルトの削除 リストスタイル そして、(直接の子のみ)リスト項目のマージンを残しました。 これは、直接の子リストのアイテムに適用されます、あなたにも任意のネストされたリストのクラスを追加する必要がありますを意味します。

  • Loremイプサム嘆き座るAMET
  • Consectetur adipiscing ELIT
  • Loremののマッサでの整数molestie
  • pretium Nisl aliquetでFacilisis
  • Nulla velitのvolutpatのaliquam
    • Phasellus iaculis neque
    • Purusはultriciesをsodales
    • 前庭のSEM porttitorのlaoreet
    • リベロ交流volutpatでTristique
  • FaucibusポルタラクスVELアトリ属
  • Aenean ERATは、NUNC AMET座ります
  • Loremののegetのporttitor
コピー
<UL クラス= "リストunstyled"> <LI> ... </ LI> </ UL>

インライン

と一行にすべてのリスト項目を配置 表示:インラインブロック; といくつかの光のパディング。

  • Loremイプサム
  • Phasellus iaculis
  • Nulla volutpat
コピー
<UL クラス= "リストインライン"> <LI> ... </ LI> </ UL>

商品の説明

その説明と関連する用語のリスト。

説明リスト
記述リストは、用語を定義するのに最適です。
Euismod
小舌前庭IDフェリスポルタゼンパー切れ込みeuismod NECのELITのeget SEMの憎悪。
〜している間のID ELIT非マイルポルタ妊婦egetのmetusで。
Malesuadaポルタ
Etiam malesuadaモリスポルタマグナeuismod週間。
コピー
<DL> <DT> ... </ DT> <DD> ... </ DD> </ DL>

水平説明

用語と説明を行うに <DL> サイド・バイ・サイドをラインアップ。 オフデフォルトのように積み重ねを開始します <DL>sのが、ナビゲーションバーが拡大するので、これらを実行します。

説明リスト
記述リストは、用語を定義するのに最適です。
Euismod
小舌前庭IDフェリスポルタゼンパー切れ込みeuismod NECのELITのeget SEMの憎悪。
〜している間のID ELIT非マイルポルタ妊婦egetのmetusで。
Malesuadaポルタ
Etiam malesuadaモリスポルタマグナeuismod週間。
Euismodゼンパーegetフェリス切れ込み
Fusceのdapibus、commodo交流毎日の祈りの規則的順序のELIT、tortor mauris condimentum nibh、ユタ州だけで笑い発酵のマッサをAMET座ります。
コピー
<dlの クラス= "DL-水平"> <DT> ... </ dtが> <DD> ... </ DD> </ DL>

自動切り捨て

水平記述リストはと左の列に収まらないほどの長さである用語が切り捨てられます テキストオーバーフロー。 狭いビューポートでは、彼らはデフォルトstackedレイアウトに変更されます。

関連記事