HTML&CSS

transitionプロパティでアニメーション〜CSS3

*この記事は一部修正と訂正を行っています。(2015/08/30) gifアニメやFLASH全盛のころのような派手なアニメーションは敬遠されがちですが、ユーザビリティから見て使いやすく誘導するためのアニメーションは歓迎さ  >>続きを読む

Bootstrapの使い方(8)〜コンテンツの書式設定2

リストの書式 よく使うリストの表示形式をクラスの指定で実現できます。 list-unstyledクラス ulに指定するとマーカーを表示しない。また、ulの左余白を0にする・・・サンプル list-inlineクラス ul  >>続きを読む

Facebook 「Page Plugin」の設定

これはFacebookページに「いいね」してもらうためのものです。 「Like Box」は使えなくなるようです。こちらを使用するようにしましょう。 注:この記事の内容は2015年5月現在のものです。Facebookの仕様  >>続きを読む

Bootstrapの使い方(7)〜コンテンツの書式設定1

テキストと見出しの書式 テキストや見出しの書式は決められたクラス名で設定します。この辺のクラス名はBootstrapのページなどでクラス名と書式を確認しておくとよいでしょう。 bodyの設定 Bootstrapの基本設定  >>続きを読む

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

フルードイメージについて Googleのモバイルフレンドリー宣言からレスポンシブWebデザインが当たりまえになりつつあります。 レスポンシブ対応にするためは、画像をブラウザの幅に応じて縮小するフルードイメージの仕組みが使  >>続きを読む

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

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

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

グローバルナビなどのナビゲーションを中央揃えにする方法です。 ナビゲーションが固定幅なら両サイドのマージンをautoにすれば済みます。 ナビゲーションを中央揃えにするサンプル CSSコード [crayon-5880b7b  >>続きを読む

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

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

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

WordPressのナビゲーションにBootstrapのグローバルナビの設定を組み込むにはWordPressの書き出すタグのclass名にBootstrap用の「.nav」と「.navbar-nav」の2つのclass名  >>続きを読む

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

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

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

Bootstrapのグリッドシステムの仕組みを更に掘り下げてみます。 Bootstrapを使用するときに注意する点はボックスモデルの概念が通常と違うところです。 Bootstrapは通常のボックスモデルではありません。b  >>続きを読む

Bootstrapの使い方(2)〜グリッドシステム

グリッドデザインとは グリッドデザインとは、均等なマス目に分割して、そのマス目に沿って各部品を配置していくデザインです。 有名なものに「960 Grid System」があります。 Webサイトを作成するときにグリッドデ  >>続きを読む

Atomの使い方

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

Sublime Textにftpを設定

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

Sublime TextにEmmetを導入

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

Bootstrapの使い方(1)〜準備

BootstrapはCSSフレームワークのひとつです。自分で一からCSSを構築しなくても簡単に使い勝手の良いデザインのWebサイトを作成することができます。面倒なレスポンシブサイトも簡単にできあがります。 HTMLとCS  >>続きを読む

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

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

jQuery Mobile1.4でスマホサイト作成4〜テーマの変更

data-thema属性で変更できるテーマは、jQuery Mobile 1.4の場合は「a」(白ベース)と「b」(黒ベース)の2種類のみです。 data-theme=”a”またはdata-the  >>続きを読む

jQuery Mobile1.4でスマホサイト作成3〜開閉式コンテンツとPOPアップ

完成例サンプル リストをうまく利用することで小さなモバイル画面で情報を見やすく整理することができます。 リストビューの作成 リストの作成はul要素にdata-role=”listview”属性を付  >>続きを読む

jQuery Mobile1.4でスマホサイト作成2〜ボタンの作成

完成例サンプル リンクボタンの作成 リンクボタンの作成は簡単です。a要素にclass=”ui-btn”というクラスを指定するだけです。 リンクボタンの作成は旧バージョンから1.4になってから大きく  >>続きを読む

jQuery Mobile1.4でスマホサイト作成1〜文書構造作成

jQuery Mobileのバージョン1.4では、従来バージョンから変更があります。1.4に対応した記述方法を学習します。 jQuery Mobileの準備 モバイルページサンプル meta要素にviewportの設定を  >>続きを読む

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

スマホサイト作成のときにiOSの実機をシミュレーションする必要があります。 その場合MacにはiOSシミュレータが用意されています。 iOSシミュレータを使用するにはXcodeがインストールされている必要があります。 X  >>続きを読む

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

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

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

2カラムのレイアウト作成 2カラムレイアウトで基本的なレイアウトを作成する例です。固定幅の場合と可変幅の場合、そして固定幅と可変幅の場合をそれぞれ紹介します。 固定幅の場合 これはfloatで2カラムにしたものです。ボッ  >>続きを読む

box-sizingについて〜CSS3

box-sizingの値は次のようになっています。 content-box パディングとボーダーを幅と高さに含めない(初期値) border-box パディングとボーダーを幅と高さに含める content-boxは現状の  >>続きを読む

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

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

target疑似クラスを使う〜CSS3

target疑似クラスを使うと、id名を利用したページ内リンクをクリックしたときに、リンク先に対してCSSを適用させることができます。 工夫次第でスクリプトを使用せずにちょっとした仕掛けを作成できます。 E:target  >>続きを読む

HTML5〜コンテンツモデル

HTML5におけるコンテンツモデルとは、ある要素の中に何を含めることができるかを定義したものです。 例えば次のようなHTMLがあったなら、コンテンツモデルから正しい書き方かどうか判断できます。 [crayon-5880b  >>続きを読む

:nth-child()の使い方を極める〜CSS3疑似クラス

:nth-child() 擬似クラスについて :nth-child() 擬似クラスの仕様として、W3CのRecommendation仕様書(日本語訳)には以下のように記されています。 6.6.5.2. :nth-chil  >>続きを読む

アイコンフォントの使用方法〜疑似要素への導入方法も追加

アイコンフォントとは アイコンフォントとはWebフォントと同じような仕組みでサーバー上のアイコンを表示する仕組みです。 アイコンフォントの使い方 疑似要素に導入する方法はこちら Font Awesomeを例にしてCDN(  >>続きを読む