HTML&CSS

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

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

Atomの使い方

高機能テキストエディタとして人気のSublime Textに代わる勢いのAtom。 Githubが提供するWeb開発用エディタです。その力は鉄腕アトムなみ。。 Atomのインストール〜Mac Macへの導入で説明します。 Atomのページからダウンロードします。無料です。 zipファイルをダウンロー  >>続きを読む

Sublime Textにftpを設定

Sublime Textから直接アップロードできると嬉しいですね。プラグインで実現できますのでやってみましょう。 Dreamweaverでいうところのサイトにあたる新規プロジェクトの作成から始めます。 この内容はすでにFTPを使いこなしている中級者を対象にしています。FTP初心者はまずはFileZi  >>続きを読む

Sublime TextにEmmetを導入

Zen Codingの進化形であるEmmetを導入するとコーディングが楽になります。コーダーを目指す方は必須のアイテムとなるでしょう。 導入方法 Dreamweaverの代わりにSublime Textを導入している人も多いと思います。Sublime Text3での導入の説明です。 Package   >>続きを読む

Dreamweaverのツールバーの表示〜地球マークの出し方

よく出る質問で、いつも出し方がわからなくなるのでメモ。 Dreamweaverのツールバーの中のブラウザ表示の「地球マーク」がある「ドキュメント」といわれる部分が何かの拍子で非表示になった場合、再度表示させる方法です。 下の図の赤枠の部分です。 次のような状態になるものです。 これを解決するには「メ  >>続きを読む

iOSシミュレータの使い方〜Macユーザー用

スマホサイト作成のときにiOSの実機をシミュレーションする必要があります。 その場合MacにはiOSシミュレータが用意されています。 iOSシミュレータを使用するにはXcodeがインストールされている必要があります。 XcodeはApp Storeで無料でダウンロードできます。Macでの開発で何かと  >>続きを読む

マウスホバーで画像を入れ替える〜jQuery

マウスホバーでボタンなどの画像をフワッとクロスフェードさせたいという相談が多いので、何種類かのアプローチと失敗例などを書きました。 CSS3でクロスフェードさせるサンプル jQueryでimgタグの画像をクロスフェードさせる(成功例) jQueryでCSSのbackground-mageをクロスフェ  >>続きを読む

リキッドと固定を組み合わせた2カラムレイアウト

2カラムのレイアウト作成 2カラムレイアウトで基本的なレイアウトを作成する例です。固定幅の場合と可変幅の場合、そして固定幅と可変幅の場合をそれぞれ紹介します。 固定幅の場合 これはfloatで2カラムにしたものです。ボックスモデルの計算を正しく行って作成するだけです。 サンプル HTML <d  >>続きを読む

box-sizingについて〜CSS3

box-sizingの値は次のようになっています。 content-box パディングとボーダーを幅と高さに含めない(初期値) border-box パディングとボーダーを幅と高さに含める content-boxは現状のボックスモデルに従った幅を表します。一方border-boxの方は古いIEの解釈  >>続きを読む

Web Fontのダウンロード〜webfont-dl

Web Fontを使ったら気に入ったものがあったので、Illustratorでも使用したい、けれどもどうしたらいいのか?などと質問が出たりします。 その場合にはWeb Fontをダウンロードする必要があります。 *Web Fontを使用するときはライセンスによる指示に従う必要がありますので、その内容  >>続きを読む