HTML&CSS

Sassの導入 〜Sass(1)

Sass(Syntactically Awesome Stylesheets)はCSSを拡張したメタ言語です。 機能を拡張してより効率的にCSSを書けるようにするものです。 具体的には、変数や関数をはじめ、演算、条件分岐  >>続きを読む

CSS3の新しい単位〜vhとvw

CSS3ではビューポートを基準にした単位vhとvwが導入されました。地味ですね、単位ですから。けれどもこれのおかげで色々なことが簡単にできるようになります。 例えば次の例のように各セクションをブラウザいっぱいに広げること  >>続きを読む

スマートフォン用ドロワーメニューの作成方法〜レスポンシブ対応編

スマートフォン用のドロワーメニューの簡単な例は前回紹介しましたが、少し複雑な動きに対応させるには多少問題があります。 今回は起こり得る問題点と解決方法について考えてみます。サンプルとして前回使用したドロワーメニューを使用  >>続きを読む

スマートフォン用開閉メニューの作成方法

スマートフォン向けのサイト作成の時に定番的に使われている開閉式のナビゲーションの作成方法です。今回は縦方向の開閉と横方向の開閉(ドロワーメニュー)の基本的な仕組みの解説です。 jQueryとCSS3を使用した作成方法です  >>続きを読む

レスポンシブサイトの切り替えポイント〜javaScript

レスポンシブサイトを作成するときに、javascriptで切り替えポイントを認識させる方法の説明です。 javascriptですからjQueryでも使用できます。 CSSメディアクエリによる切り替え まずは、CSSでのメ  >>続きを読む

CSS3のtransitionで使えるイベント〜transitionのトリガー

transitionアニメーションを実行するには何らかのトリガー(イベント)が必要です。通常は:hoverが使用され、マウスがホバーすると簡単なアニメーションを行ったりします。けれどもトリガーになるのは:hoverだけで  >>続きを読む

Bootstrapの使い方(9)〜カルーセルを使う

Bootstrap4の公開も間近になりましたが、今回はBootstrap3を使ってカルーセルを適用する方法です。カルーセルとはメリーゴーランドの意味があります。一般的にはスライドショー的なものが多いです。 カルーセルの善  >>続きを読む

キーフレームでアニメーション〜CSS3

トランジションアニメーションはプロパティの値を疑似クラスなどで変化させることがトリガーになって開始されます。ところが、ページが開いたら自動でアニメーションをさせたい場合などはトランジションアニメーションが使えません。この  >>続きを読む

Webフォントの使い方

フォントはユーザーのパソコン環境に依存しますので好みのフォントを指定してもほとんど無駄でした。 ところが、Webフォントの仕組みができてからは特定のフォント指定に明るい兆しとなったわけです。 今回は自分のサーバーにフォン  >>続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bootstrapの使い方(1)〜準備

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

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の設定を  >>続きを読む

HTML5〜コンテンツモデル

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

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

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

包含ブロックについて

包含ブロックとは 2017年2月26日 「widthやmarginなどのサイズの設定次第で包含ブロックとなる親要素を飛び出す(オーバーフローする)ことも可能です」 を追加しました。 ボックスモデルは次の図で表すことができ  >>続きを読む

CSS ボックスモデルについて解説

ボックスモデルとは どの要素も四角い領域を生成します。この四角い領域を「ボックス」といいます。ボックスを作成する要素はブロックレベル要素に限りません。インライン要素もボックスを作成しますがその表示方法が少しブロック要素と  >>続きを読む

z-indexの使い方〜詳説

z-indexは要素の重なり順を変更することができる便利なプロパティですが、思わぬところで落とし穴があります。 z-indexの値を変更しても重なり順を変更できずに困った経験がないでしょうか。その原因は正しい仕組みを理解  >>続きを読む

flex レイアウト詳説〜Flex Box Layout

レイアウト作成のためのCSS CSS2.1 にて定義されているレイアウトモードは次の4つです。 文書を配置するために設計されたブロックレイアウト テキストを配置するために設計された行内レイアウト 表を作成するためのtab  >>続きを読む

background設定解説〜CSS3

backgroundプロパティ〜CSS3 複数の背景画像による多層化 CSS3 では、ボックスの背景は,複数の 層 ( layer )を持てます。複数の background-image の値は カンマで区切って区別しま  >>続きを読む

background設定解説〜CSS2.1

backgroundプロパティの基本 要素の背景には色または画像のいずれかを表示することができます。 ボックスモデルでのbackgroundプロパティは内容領域(コンテンツ)、パディング領域、に背景を設定することができま  >>続きを読む