続けてif文を勉強していきます。
PHPを使った関数の復習をしていきます。11月の一ヶ月間はほとんどWebサイト制作に費やしてきたので、久しぶりの勉強です。
WordPressの記事に画像を挿入した際のスタイルを指定します。WordPress 投稿の際のプロパティ WordPressで画像を投稿するときに、画像の場所を「なし」「左」「中央」「右」の４つを選ぶことができます。 それぞれ指定したときに、画像にクラスがつきます。 …
index.php を編集して、トップページを表示するようにします。
WordPress用のオリジナルテーマを作ります。WordPress レッスンブック 3.x対応作者: エビスコム出版社/メーカー: ソシム発売日: 2010/09/08メディア: 単行本購入: 17人 クリック: 535回この商品を含むブログ (37件) を見る今回は上記のレッスンブックを参考…
WordPressをXamppを使ったテストサーバーにインストールします。
PHPの機能を利用して、入力フォームからデータ送信と受信をする仕組みを作ります。HTMLでフォームを作る。フォームは以前勉強したので、HTMLで書きます。 【HTML】フォームを作る - PCゲーマーのWebデザイン備忘録 単純な入力フォーム例フォーム内の属性はメ…
PHPでの記述と条件文は、ほぼJavaScriptを応用すれば書くことができます。平成何年かを答えるJavaScript: var year = 2014; var result = year - 1988; var msg = '西暦' + year + '年は、平成' + result + '年です。'; document.write(msg); PHP:
PHPの基本知識と演習のテストを行いました。
PHPの初歩的な出力と演算を行います。基本PHPを使うには「 結果： 文字列を出力する。 文字列を出力するには「print」を使います。文字列はシングルクォーテションで囲みます。例：
ローカル環境でPHPなどの動作確認を行うために、ローカルテストサーバーをXamppで作ります。Xamppのインストール方法 Xamppを公式ページからダウンロードする。 実行してインストール画面を開き、特に設定をいじらずに進みます。もし必要のない機能があれば…
初期状態ではPHPで日本語の処理がうまくいかない時もあるので、php.iniを編集して日本語環境にします。 Xamppのインストールフォルダから「php」フォルダを選択肢、「php.ini」をDreamweaver等で開きます。 「default_charset」で検索し、の先頭についている…
Scrollableを利用して、スライドできるサムネイルを作ります。準備Scrollableのサンプルページのソースから、以下のデータをダウンロードしてきます。Scrollableは新しいjQueryのバージョンで jquery.tools.min.js scrollable-horizontal.css scrollable-but…
jQueryの基本である要素を重ねることを使い、タブパネルを作ります。タブパネル実行例HTML: <html lang="ja"> <head> <meta charset="utf-8"> <title>タブパネル</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-1.11.1.min.js"></script> </head> <body> <div id="container"> <ul class="tab"> <li></li></ul></div></body></html>
Lightboxの派生プラグインであるColorBoxを使います。 Colorboxは画像だけでなく、WEBページやインラインHTMLも表示することが出来ます。準備 Colorboxをダウンロードしてきます。 Colorbox - a jQuery lightbox 解凍して、任意のフォルダに移動。 「colorbo…
jQueryのプラグインであるLightBoxを使います。準備 LightBoxからプラグインをダウンロードしてくる。 解凍して、任意のフォルダに移動。 lightbox内の「index.html」をエディターで開き、必要ない部分を削除して、テンプレートを自分用に変更する。 例： <html lang="ja"> <head> <meta charset="utf-8"></meta></head></html>…
HTML/CSS操作の演習を行いました。今回はそのソースです。特定のID/クラスのスタイルを変更する使うメソッド「css();」 <html> <head> <meta charset="utf-8"> <title>演習１</title> <script src="../../js/jquery-1.11.1.min.js"></script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li id="third">jQuery</li> <li>PHP</li> </ul> <script> $(funct…</body></html>
jQueryの関数を利用して、簡単なアニメーションを表示します。 表示・非表示 $( セレクタ ).show( スピード );//表示 $( セレクタ ).hide( スピード );//非表示 アニメーションはslow、fastまたは数値（1秒=1000）で指定します。実行例 <html> <head> <meta charset="utf-8"> <title>アニメ</title> <script src="../../js/jquery-1.11.1.min.js"></script> <style> div{ wi</meta></head></html>…
イベントを使い属性の内容を変えます。 click()メソッドで、イベントを実行します。実行例ボタンで画像切り替えボタンが押されたときを切欠に画像切り替えを行います。 <html lang="ja"> <head> <meta charset="utf-8"> <title>click()イベント</title> <script src="../../js/jquery-1.11.1.min.js"></script> <style> button{ cursor: pointer; } </style> </head> <body> <p><button>画像を…</button></p></body></html>
【jQuery】 htmlを操作するメソッド - PCゲーマーのWebデザイン備忘録 HTMLの移動を行うメソッドについて学んでいきます。 要素内の前か後ろに移動prependTo（前）とappendTo（後）を使うことによって、別な要素内にHTMLを移動させることができます。 <p id="first">テキス</p>…
Photoshopのスライスツールで1枚の画像から、複数の画像パーツに分けます。 例えばWEBページをトレースする際、フレームワークを抽出しつつ、画像パーツも収集する事が可能です。使い方（例としてLOFTのページを使わせてもらいました。） 定規ツールを利用し…
グリッドデザインの演習です。 レスポンシブWEBデザインに対応させるために、メディアクエリーを使ってます。2カラム目に表示させるときは一番最後のカラムが広がるようにしています。3番目のカラムを3カラム目に表示させるときは、2カラム目の表示のプロパ…
「効果」メニューから「パスの変形」を使って、簡単な図形を描きます。前提として、円を描いておきます。ジグザグ スパイシーな食べ物のポップや、注目商品の見出しなんかに使えそうな爆発した円を描くことができます。 大きさで破裂の長さ、折り返しでジグ…
簡単な文字入りのリボンを作ります。 長方形ツールで、長方形と同じ高さの正方形を作ります。 正方形を選択し、全面ペースト。 いったん選択を解除し、部分選択ツールで左の辺をつかみ、ひし形を作る。 ひし形を暗めの色に塗り替えます。 正方形とひし形を、…
HTMLでフォームを作ります。PHPなども絡んでくるところですが、とりあえずHTMLのみで組みます。 基本formタグの中に、methodとactionを必ず付け加えます。 methodはやりたい動作に応じて帰る必要があります。 <form method="URI" action="送信方法"> </form> 1行テキストフォーム1行のテキストフォームに…
CSS3を使うことで自動的にカラムわけ表示をする事が可能です。使い方@media screenとcolumn-countを使用します。ブラウザ間で対応がまちまちなので必ずベンダープレフィックスを使うこと。 @media screen and (min-width:文字数em)文字指定。１行に○文字以上…
以下のコラムを利用して、アコーディングメニューを作ります。40分で覚える！jQuery速習講座制作例（ソース） <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオン</title> <style> *{ margin:0; padding:0; } dl{ width:400px; margin:50px auto; } dl dt{ background:#7CADB6; border-bottom:1px solid #F</meta></head></html>…
htmlを操作するメソッドを利用して、JavaScriptよりもスマートに操作する事ができます。htmlメソッド $('').html();HTML要素内文字列を取得または書き換え。HTMLタグが記述されている場合は反映される。 $('').text();HTML要素内文字列を取得または書き換え…
jQueryでのCSS制御する方法には2種類あります。 一つは以下のような書き方。 $('div').css('background','#f00'); もう一つは以下のような、CSSの書き形近い書き方になります。 $('div').css({ 'color' : '#f00', }); 実行例（ソース） <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの制御</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></meta></head></html>
jQueryで処理するには、以下のように記述します。 <script> $(document).ready(function(){ }); </script> セレクタの書き方はCSSと同じです。 $('要素名') $('#id名') $('.class名') セレクタを指定し、特定の要素にスタイルを上書きする。実際に要素に当てられているスタイ…
