Illustrator グリッドの作成〜Illustrator
Illustratorでグリッドを作成するときに段組の機能を使うと簡単にできます。
ワイヤーフレームなどの作成に重宝する機能です。
段組設定の使い方
必要な大きさの四角形を作成
メニューの「オブジェク...
2015-04
Illustrator Illustrator ボタン作成〜Illustrator
Illustratorで簡単にボタンを作成する方法です。文字数が増えても勝手にボタンが大きくなるというものです。
「愛（Ai)はクリエイティブを救う」からのネタを参考にしたものです。（CCで確認）
テキストツールでテキストを作...
HTML&CSS フルードイメージで起こる問題点〜画像が縮小されない？？
フルードイメージについて
Googleのモバイルフレンドリー宣言からレスポンシブWebデザインが当たりまえになりつつあります。
レスポンシブ対応にするためは、画像をブラウザの幅に応じて縮小するフルードイメージの仕組みが使われます。
こ...
Tips WordPress4.2から絵文字が使用可能に
WordPress4.2からが絵文字に対応しました。
Mac OSXで絵文字入力するにはcontrol+command+spaceで候補がでます。
🐼
🌷
🚂
&#x...
HTML&CSS Bootstrapの使い方（６）〜ナビゲーションバーの作成
グローバルナビゲーションとして使用できるナビゲーションバーの作成方法です。
ナビゲーションバーを作成するには少し複雑なタグとクラスを使用することになります。
Bootstrap本家のサンプルを確認してみましょう。
基本的なナビゲー...
HTML&CSS ナビゲーションの中央揃え
グローバルナビなどのナビゲーションを中央揃えにする方法です。
ナビゲーションが固定幅なら両サイドのマージンをautoにすれば済みます。
ナビゲーションを中央揃えにするサンプル
CSSコード
HTMLコード
けれども、計...
HTML&CSS Bootstrapの使い方（５）〜ボタンの作成
Bootstrapを使うと手軽に見栄えのよいデザインでしかも使い勝手のよいボタンやナビゲーションを作成することができます。
buttonタグでボタンの作成
Bootstrapを使ってボタンを作成するには、buttonタグにクラス名 bt...
HTML&CSS WordPressのナビゲーションにBootstrapを組み込む
WordPressのナビゲーションにBootstrapのグローバルナビの設定を組み込むにはWordPressの書き出すタグのclass名にBootstrap用の「.nav」と「.navbar-nav」の２つのclass名を適用させる必要があ...
HTML&CSS Bootstrapの使い方（４）〜レスポンシブ対応
レスポンシブWebデザインは一つのファイルで複数のデバイスに対応させることができる仕組みです。スマホサイトの重要性はますます高くなっていますので、サイト作成イコールレスポンシブ対応は当たり前になってきています。
スマホ用とPC用を考慮して...
HTML&CSS Bootstrapの使い方（３）〜グリッドシステムの活用方法
Bootstrapのグリッドシステムの仕組みを更に掘り下げてみます。
Bootstrapを使用するときに注意する点はボックスモデルの概念が通常と違うところです。
Bootstrapは通常のボックスモデルではありません。border-bo...