lecture

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

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

Photoshopの「Web形式で保存」の使い方

Photoshopで加工した写真などをWeb用に保存するときに使用するメニューが「Web用に保存」。 Web系の人はよく使用するメニューだと思います。「Web用に保存」であまり使用しないけれども気になっている項目について  >>続きを読む

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-5880b  >>続きを読む

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

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

PHP基礎 (15) ファイルの入出力

ファイルを1行ずつ読み込む ファイルを開く PHPでファイルを読み書きするには fopen 関数でファイルを開きます。引数には「ファイル名」と「モード」を指定します。fopen 関数でファイルを開くとファイルポインタ(ハ  >>続きを読む

スライドギャラリー解説補助資料〜jQueryドーナツ本

受講生対象の補助資料です。 以下jQuery教材のドーナツ本のスライドギャラリーの補助資料です。 スライダの構造 スクリプトの解説 HTML構造 ソースが読めてもスライド機能のからくりがわかりづらいですね。 アニメーショ  >>続きを読む

包含ブロックについて

包含ブロックとは ボックスモデルは次の図で表すことができます。 ボーダーを境界にしてマージンとパディングがあり、パディングの内側にコンテンツ(内容領域)が存在します。 これは例えると自分から見た地球のイメージです。 では  >>続きを読む

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プロパティは内容領域(コンテンツ)、パディング領域、に背景を設定することができま  >>続きを読む

PHP実習 (05) メール送信の仕組み

*それぞれのコードは「入力フォームのコード」「確認ページのコード」「メール送信のコード」をクリックすると見られます。 メール送信の仕組みを学習する上での参考例です。セキュリティ問題を完全に解決したものではありませんのでそ  >>続きを読む

PHP基礎 (14) セッションのセキュリティ問題と対策

セッション処理を標準で利用するとセッションIDをcookieでやり取りすることになります。 糸口として、セッションIDを狙った攻撃で重要な情報(例えばクレジットカードの暗証番号)を盗むことが可能になります。これが「セッシ  >>続きを読む

PHP基礎 (13) クッキー(cookie)について

クッキー(cookie)とは クッキーの語源から考察 RFC 6265などで定義されたHTTPにおけるウェブサーバとウェブブラウザ間で状態を管理するプロトコルです。 語源はお菓子のクッキーです。なぜクッキーかというと、f  >>続きを読む

PHP実習 (04) 入力フォームの確認を表示 2

*解答はHTMLコード、HTML&PHPコードと書かれたところをクリックすると表示されます。 問題 次のサンプルのように「PHP実習 (3)入力フォームで入力されたデータを確認付きで表示」を変更して、確認画面か  >>続きを読む

PHP実習 (03) 入力フォームの確認を表示 1

*解答はHTMLコード、HTML&PHPコードと書かれたところをクリックすると表示されます。 問題 次のサンプルのように「PHP実習 (2)入力フォームで入力されたデータを表示」を変更して、入力データを確認した  >>続きを読む

PHP基礎 (12) セッションについて

セッションとは 変数の寿命はページが表示された時までです。リロードすると変数はリセットされます。 それでは少し困る事も出てくることがあります。 例えばユーザーに入力を求めるフォームで、入力内容を確認する仕組みを作る場合で  >>続きを読む