Illustrator

グリッドの作成〜Illustrator

Illustratorでグリッドを作成するときに段組の機能を使うと簡単にできます。 ワイヤーフレームなどの作成に重宝する機能です。 段組設定の使い方 必要な大きさの四角形を作成 メニューの「オブジェクト」→「パス」→段組設定 出てきた段組設定のパネルに必要な行と列の設定 段組設定のパネルにある「ガイ  >>続きを読む

ボタン作成〜Illustrator

Illustratorで簡単にボタンを作成する方法です。文字数が増えても勝手にボタンが大きくなるというものです。 「愛(Ai)はクリエイティブを救う」からのネタを参考にしたものです。(CCで確認) テキストツールでテキストを作成 アピアランスで新規塗りを2回作成 メニューから「効果」→「形状に変換」  >>続きを読む

フルードイメージで起こる問題点〜画像が縮小されない??

フルードイメージについて Googleのモバイルフレンドリー宣言からレスポンシブWebデザインが当たりまえになりつつあります。 レスポンシブ対応にするためは、画像をブラウザの幅に応じて縮小するフルードイメージの仕組みが使われます。 これは簡単で imgに対してmax-width:100%とheigh  >>続きを読む

WordPress4.2から絵文字が使用可能に

WordPress4.2からが絵文字に対応しました。 Mac OSXで絵文字入力するにはcontrol+command+spaceで候補がでます。 🐼 🌷 🚂 💁🏻 「ホッケの漢字(魚に花)」を入力してホッケの絵が表示さ  >>続きを読む

Bootstrapの使い方(6)〜ナビゲーションバーの作成

グローバルナビゲーションとして使用できるナビゲーションバーの作成方法です。 ナビゲーションバーを作成するには少し複雑なタグとクラスを使用することになります。 Bootstrap本家のサンプルを確認してみましょう。 基本的なナビゲーションバーのサンプル 基本的なナビゲーションバーのHTML(Boots  >>続きを読む

ナビゲーションの中央揃え

グローバルナビなどのナビゲーションを中央揃えにする方法です。 ナビゲーションが固定幅なら両サイドのマージンをautoにすれば済みます。 ナビゲーションを中央揃えにするサンプル CSSコード *{ list-style: none; margin:0; padding:0; } nav{ backgr  >>続きを読む

Bootstrapの使い方(5)〜ボタンの作成

Bootstrapを使うと手軽に見栄えのよいデザインでしかも使い勝手のよいボタンやナビゲーションを作成することができます。 buttonタグでボタンの作成 Bootstrapを使ってボタンを作成するには、buttonタグにクラス名 btnと、ボタンの色を指定するbtn-○○ を指定します。 ボタンの  >>続きを読む

WordPressのナビゲーションにBootstrapを組み込む

WordPressのナビゲーションにBootstrapのグローバルナビの設定を組み込むにはWordPressの書き出すタグのclass名にBootstrap用の「.nav」と「.navbar-nav」の2つのclass名を適用させる必要があります。 WordPressナビゲーションバーに新しいcla  >>続きを読む

Bootstrapの使い方(4)〜レスポンシブ対応

レスポンシブWebデザインは一つのファイルで複数のデバイスに対応させることができる仕組みです。スマホサイトの重要性はますます高くなっていますので、サイト作成イコールレスポンシブ対応は当たり前になってきています。 スマホ用とPC用を考慮して設計するのは結構手間がかかりますが、Bootstrapを使うと  >>続きを読む

Bootstrapの使い方(3)〜グリッドシステムの活用方法

Bootstrapのグリッドシステムの仕組みを更に掘り下げてみます。 Bootstrapを使用するときに注意する点はボックスモデルの概念が通常と違うところです。 Bootstrapは通常のボックスモデルではありません。border-boxです!! レイアウトの幅を算出するときはこの事をふまえておく必  >>続きを読む