セリフ体 欧文書体で文字の先端にヒゲのような飾りが出来ているものをセリフ体といいます。セリフ体は大きく分類して4つあります。 ブラケットセリフ 接続部分が曲線を描いている。 ヘアラインセリフ 接続部分が太い線と細い線で繋がっている。 スラブセリフ…

アンチエイリアス設定 illustratorでweb制作環境を整える際、媒体が紙でなくディスプレイなので環境設定>表示>ピクセルプレビューにする。 ただ、そうすると線1px、50x50pxの図形を描写すると、実寸が52x52pxとなってしまう。 これは、線にアンチエイリアス…

emは親要素のフォントサイズを参照する。 一方、remはroot(根っこ、最も祖先の親)要素を参照にしている。 html <section> <p id="em">16x1.5=24px</p> <section> <p id="em">14(直近の親要素サイズを参照)x1.5=21px</p> <p id="rem">16(root要素サイズを参照)x1.5=24px</p> </section> </p> </section> scss section{ font-size: 16px; p#em{font-size:…

visibility: hidden;...見た目は消えるが要素の描画領域は残る。空白スペースが残っているような物。 display: none;........見た目は消えるし、描画領域も無くなる。 html <ol> <li id="v-h">visibility: hidden</li> <li id="d-n">display: none;</li> <li>テスト</li> </ol> CSSなしの出力 visibility: hidden di…

(1)レイヤー>新規塗りつぶしレイヤー>グラデーションを選択 (2) グラデーションタイプ「ノイズ」を選択 カラーモデルを集中線のカラーに合わせる オプションに全てチェックを付ける (3)塗りつぶしダイアログボックスに戻り、「スタイル」を「角度」に設定「9…

(元となるオブジェクト) (拡大縮小するとオブジェクトの各パーツもそれに合わせて拡大縮小してしまう。)オブジェクトを拡大縮小するとオブジェクトを各形状(角丸の半径など）が変わってしまうのを「シンボル登録」することで形状を維持したままサイズを変え…

棒グラフでイラストアイコンを間延びさせる表現をillustratorのアートブラシを使用して表現する。 間延びするアイコンを用意する (1)アイコンを「新規ブラシ」から「アートブラシ」で登録する。 オプション設定 (2)「アートブラシオプション」 から「ガイド…

(1)下地となるカンバスサイズを後で割り切りやすいように、きりのいい数値で作成。 今回は600x600pxで作成。 カンバスの中央にパターンのオブジェクトを配置。 (2)フィルタ>メニュー>その他>スクロールを選択。 その際に「ラスタライズをしますか？」と出る…

ドロップダウンメニュー divのclass名にdropdownを付け、その中にある aタグでドロップダウンをメニューをホバー表示させる。 aタグにはclass="dropdown-toggle"とdata-toggle="dropdownを付与。 ドロップダウンメニューの表示はliとaタグで表示。 メニュー…

文字ツールでキャッチコピーなどで使用する文字を3Dで表現します。 文字をアウトライン化。 グループ解除して1文字ずつ配置分散させる。 効果メニュー > 3D > 押し出し・ベベルで3D化。 3D化が分かりやすく見えるように塗りと線の色のコントラストをはっきり…

イメージの図形 imgタグにクラス名img-図形名をつける。 <img src="http://placekitten.com/200/200" class="img-rounded"/> <img src="http://placekitten.com/200/200" class="img-circle"/> <img src="http://placekitten.com/200/200" class="img-thumbnail"/> 出力結果 イメージのレスポンシブ imgタグにクラス名img-responsiveを付け加える事でデバイスのサイズに沿った大きさになる。

ボタンのカラー buttonタグにクラス名btnをつける。 それに併せて用途に合わせたカラーリングのクラス名を付け加える。 <button type="button" class="btn">btn</button> <button type="button" class="btn btn-default">default</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-info">info</button>

基本のフォームコード inputのクラス名にform-control、id名にexampleInputをつける。 input直下のspanタグにつくクラス名ehelp-blockは入力フォームのヘルプテキスト。 <form> <fieldset> <legend>フォームタイトル</legend> <div class="form-group"> <label for="exampleInput">name</label> </div></fieldset></form>

テーブル表示 テーブルはtable,thead,tfoot,tbody,tr,th,td,タグを使用。 その際tableタグのクラス名にtableをつけtておく。テーブルの表をストライプにするにはtableタグのクラス名にtable-stripedを付け加える。 表の列ごとの区切り線を付け加えるならtabl…

見出し文 通常通りにhタグでコーディング。 hタグの中にsmallタグを挿入することでグレー表示。 <h1>見出し文<small>補足文</small></h1> <h2>見出し文2<small>補足文</small></h2> <h3>見出し文3<small>補足文</small></h3> テキスト表示位置 text-alignが既に設定されてあるクラス名で位置を指示。 <p class="texe-left">左寄せ</p> <p class="text-center">中央寄せ</p> <p class="text-right">右寄せ</p> 脚注表示 …

コンテンツエリアをレスポンシブにする。 2カラムのコンテンツエリアをレスポンシブにするには 2つのカラムを囲む親タグのクラス名をclass="row"と宣言。 その中に入る子タグのクラス名をclass="col-xs-数値"と設定しておくと768px以下の解像度で可変レイア…

Bootstrapとは？ BootstrapとはCSSフレームワークの一種である程度のコードが読めれば、プログラミング知識なくとも コピーペーストするだけで立派なレスポンシブデザインな簡単にできるシステムです。 Bootstrapで生成したサイトはほぼ全てのプラウザで表示…

ヒストグラムとは 参考画像(1) http://doctype.meより引用。 画像の明暗を棒グラフで表示するグラフ表。 グラフの左端がシャドウ。右端がハイライトを意味し、 その内側に並ぶ縦軸の棒グラフが画像の中のピクセル量を意味している。 また、RGB毎にわけてのグ…

Tyopographyモジュールはリンク、行間、テキスト周りのスタイルなど文字通りタイポグラフィを中心としたモジュールです。 Vertical Rhythm まずフォントサイズと行間の数値を変数宣言。 これにより読みやすい文章を形成することをVertical Rhythmという。 変…

Utilitiesモジュールは色、レイアウト、クロスプラウザ対応のミックスインを中心としたモジュール。 link-colors-リンクカラー link-colors(color,:hover,:active,:visited,:focus); SCSS #menu li{ @include link-colors(red,blue,green,orange,black); } c…

Scssでは自分でどのプロパティを組み込むかを設定・定義しておかないと使い回しができません。 Compassでは最初から定義されたモジュールをインポートすることでお手軽にCSSを書き込むことが出来ます。 Compassの主なモジュール 大まかにわけてCompassには5…

backgroundミックスインはCSSと同じく,(カンマ)区切りのショートハンド記述です。 グラデーション表現を出すには 直線形の@include background(linear-gradient(値));関数と 放射線形の@include background(radial-gradient(値));関数があります。 SCSS第1引…

Compassを使用するにあたり下準備を。 コマントプロントでインストール コマンドプロントを開いてcompassをインストール(環境はmacです) sudo install compass インストールが完成したかどうかをバージョン情報で確認。 compass -v アップデートをする場合も…

まずは即席のメニューバーを作成。 HTML <nav> <ul> <li><a href="#" class="Menu01"><span>Menu01</span></a></li> <li><a href="#" class="Menu02"><span>Menu02</span></a></li> <li><a href="#" class="Menu03"><span>Menu03</span></a></li> <li><a href="#" class="Menu04"><span>Menu04</span></a></li> <li></li></ul></nav>