HTML&CSS 垂直・水平方向に子要素を中央揃え
CSSレイアウトで水平方向の中央揃えはできても、垂直方向の中央揃えは難しいですね。
今回は画像を親要素の垂直・水平方向に中央揃えを行います。
header部分へのロゴの配置などに使えるテクニックです。
position:ab...
HTML&CSS 
Illustrator ボタンを指定サイズで書き出す〜Illustrator
Illustratorでボタンやバナーなどを作成してWeb用に書き出す場合に指定寸法どおりにならずに困る場合があります。
ポイントを理解して思い通りのサイズで書き出せるようになりましょう。
四角形にbuttonというテキストの入った...
HTML&CSS フロートしたナビを中央揃えする方法
ナビゲーションをliで作成して、floatを使用して横並びにする方法はよく使用されます。
面倒なのは横並びのliを中央に揃えることです。
liをfloatして横並びにした例
htmlコード
cssコード
中央揃えす...
HTML&CSS transitionプロパティでアニメーション〜CSS３
＊この記事は一部修正と訂正を行っています。（2015/08/30）
gifアニメやFLASH全盛のころのような派手なアニメーションは敬遠されがちですが、ユーザビリティから見て使いやすく誘導するためのアニメーションは歓迎されます。そんなワン...
Tips さくらサーバーのマルチドメインの設定〜他社管理ドメイン使用の場合
お名前ドットコムで管理しているドメインをさくらサーバーのマルチドメインで使用する方法です。
マルチドメインとはドキュメントルートにドメインを設定するのではなく、ドキュメントルートにディレクトリを作成しておいてそのディレクトリにドメイン名を...
Tips 子テーマ作成のポイント〜WordPress
WordPressのテーマ作成の手順がわかったら、既存のテーマを親要素として、さらにオリジナル部分は子テーマで作成すると効率的です。子テーマは親テーマと簡単な関連付けをする必要があります。
子テーマで最低限必要な決まりごと
子テーマ...
lecture Photoshopの「Web形式で保存」の使い方
Photoshopで加工した写真などをWeb用に保存するときに使用するメニューが「Web用に保存」。
Web系の人はよく使用するメニューだと思います。「Web用に保存」であまり使用しないけれども気になっている項目についての説明です。
...
HTML&CSS Bootstrapの使い方（８）〜コンテンツの書式設定2
リストの書式
よく使うリストの表示形式をクラスの指定で実現できます。
list-unstyledクラス
ulに指定するとマーカーを表示しない。また、ulの左余白を０にする・・・サンプル
list-inlineクラス
ulやol...
PhotoShop Photoshopでガイドをピクセルにあわせる方法
PhotoshopでWebの素材を作成するときに、ピクセルが小数単位になると素材の境界線のにじみの原因になります。
その原因として、そもそもガイドの位置が小数単位の位置にあることです。
Webの場合は、ガイドは必ず整数のピクセル単位でな...
Illustrator カンプ、ワイヤーフレーム用グリッドシステムのガイド作成方法
カンプやワイヤーフレームを作成する上で重宝するのが、グリッドシステムです。
これは、縦方向に区切られたカラムに沿って要素を配置するもので、簡単に見栄えのするレイアウトを作成することができます。
多くの制作者はグリッドシステムを利用する場...