lecture

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

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

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

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

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

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

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

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

Webフォントの使い方

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

PHP基礎 (16) ファイルのアップロード

ファイルをアップロードするには、スーパーグローバル変数「$_FILE」でファイルを受け取り、PHPが一時的に保存した場所からmove_uploaded_file()関数を使用して本来の保存先へ移動をします。 テンポラリフ  >>続きを読む

Webサーバーのパーミッションの設定〜ユーザー権限の考え方

パーミッションの設定でchmodeの使い方とかrwxの使い方だったらネットにもたくさん出てきますが、ユーザー(所有者)、グループ、その他の使い分けについての説明があまりされていません。今回はWebサーバーのパーミッション  >>続きを読む

PHPの配列のまとめ〜PHP

配列の基本的な作成方法はPHP基礎の記事も参考にしてください。 PHP基礎 (06) 配列 ここではもう少し詳しく配列の操作方法を学習します。 PHPの配列作成方法 インデックス配列の基本的な書き方は、空の配列をarra  >>続きを読む

正規表現の使い方の練習〜JavaScript編

正規表現でreplaceする replace関数を使って正規表現の使い方を覚えるために簡単なスクリプトを書きました。 replace(検索文字列 , 置換文字列 )を使用して文字を置換します。 プルダウンメニューで選んだ  >>続きを読む

Xdomain無料サーバーのftp設定方法〜WordPress用サーバー

Xドメインの無料サーバーのWordPressサーバーの使い方です。 ログインして管理パネルに入ります。 左側のナビゲーションの無料レンタルサーバーをクリックします。 初めてWordPressの設定をする場合は「ご利用状況  >>続きを読む

Xdomain無料サーバーのftp設定方法〜HTMLサーバー・PHPサーバー編

無料のレンタルサーバーは基本的に広告が付きます。けれども、テストサイト用とか練習用にはこれで十分です。 Xdomain無料サーバーにはPHPやMySQLが使用できます。 つまりWordPressもインストールできるという  >>続きを読む

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

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

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

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

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

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

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

包含ブロックについて

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