HTML&CSS ナビゲーションの中央揃え
グローバルナビなどのナビゲーションを中央揃えにする方法です。
ナビゲーションが固定幅なら両サイドのマージンをautoにすれば済みます。
ナビゲーションを中央揃えにするサンプル
CSSコード
HTMLコード
けれども、計...
HTML&CSS 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...
HTML&CSS Bootstrapの使い方（２）〜グリッドシステム
グリッドデザインとは
グリッドデザインとは、均等なマス目に分割して、そのマス目に沿って各部品を配置していくデザインです。
有名なものに「960 Grid System」があります。
Webサイトを作成するときにグリッドデザインを活...
HTML&CSS Atomの使い方
高機能テキストエディタとして人気のSublime Textに代わる勢いのAtom。
Githubが提供するWeb開発用エディタです。その力は鉄腕アトムなみ。。
Atomのインストール〜Mac
Macへの導入で説明します。
Atomの...
HTML&CSS Sublime Textにftpを設定
Sublime Textから直接アップロードできると嬉しいですね。プラグインで実現できますのでやってみましょう。
Dreamweaverでいうところのサイトにあたる新規プロジェクトの作成から始めます。
この内容はすでにFTPを使いこなし...
HTML&CSS Sublime TextにEmmetを導入
Zen Codingの進化形であるEmmetを導入するとコーディングが楽になります。コーダーを目指す方は必須のアイテムとなるでしょう。
導入方法
Dreamweaverの代わりにSublime Textを導入している人も多いと思います。...
HTML&CSS Bootstrapの使い方（１）〜準備
BootstrapはCSSフレームワークのひとつです。自分で一からCSSを構築しなくても簡単に使い勝手の良いデザインのWebサイトを作成することができます。面倒なレスポンシブサイトも簡単にできあがります。
HTMLとCSSの基本をマスター...