趣味サイトリニューアルのお知らせ

ご無沙汰しております。先日、個人で運営している趣味サイトを大幅リニューアルしました。本ブログへのリンクも含む総合ページを設け、以前のブック形式のサイトは 「フォトブック」として、それとは別に、新たに「フォトギャラリー」を制作しました。フォト…

Webサイト制作科修了

Web

昨日、半年間受講していた求職者支援訓練「Webサイト制作科」が終了しました。無事に修了でき、一安心です。感想としては、Adobeのソフトの使い方やWeb全般の知識に関して、受講前よりも理解を深められたと思うので、受講した甲斐はあったと思います。このブ…

Webサイト制作における動的な図形の簡単な作り方(Google Web Designer)

Webサイト制作における動的なパーツなどの制作時に利用できる便利なアプリケーションの一つとして、「Google Web Designer」の紹介があったので簡単にまとめておく。 「Google Web Designer」とは 以下を参照。 https://support.google.com/webdesigner/answ…

Webサイト制作におけるスマートフォンサイトの作り方1

Webサイト制作において、スマートフォンに対応したサイトの必要性が高まってきている。今回からHTML5とCSS3を用いたスマートフォン対応サイトの作り方をまとめていく。 レスポンシブデザインとは? 画面の横幅に合わせてページデザインやレイアウトを変える…

Webサイト制作におけるPHPを用いたRSSの設置の仕方

PHP

Webサイト制作において、RSSを設置することで、チェックしているブログの更新状況をすぐに確認できたり、コンテンツを充実したように見せることができる。今回は、PHPを用いたRSSの設置の仕方をまとめておく。今回のコードで必要となる基礎知識は以下の通り…

Webサイト制作におけるPHPでのフォーム作成(その1.5:$_POSTを追いかける)

Webサイト制作において、問い合わせフォームなどを作る際に、ユーザーからの入力データを、ページを跨いで使いたい場合がある。入力データを保持するスパーグローバル変数として、今後習うセッションというものがあるようだが、セッションを使わずにページを…

Webサイト制作におけるPHPでのフォーム作成(その1:送信方法とスーパーグローバル変数)

Webサイト制作において、ユーザーからの入力を受け取る部分をPHPで作ることにより、データの送受信を行うことができるようになる。今回はWebサイト内の問い合わせページなどで用いられることが多いフォーム作成の基本についてまとめておく。 formタグ フォー…

Webサイト制作におけるPHPの基本(その6:foreach文、連想配列)

PHP

Webサイト制作において、PHPで名簿などを作る際に、配列と一緒に用いると便利なループ(繰り返し)構文「foreach文」についてまとめておく。また、キーとなるデータに紐づけて複数の関連データを扱いたい場合に便利な「連想配列」についてもまとめておく。 f…

Webサイト制作におけるPHPの基本(その5:配列、count関数)

PHP

Webサイト制作において、PHPで名簿などを作成する際に必要となる配列についてまとめておく。 配列 配列とは、関連する複数のデータを一つのまとまりとして扱えるようにしたもの。 通常の変数では、1つの変数に1つのデータ(値)しか入れられなかったが、配…

Webサイト制作におけるPHPの基本(その4:エスケープシーケンス)

PHP

Webサイト制作でのPHPのコーディングにおいて、ソース中の改行を意味する「\n」(\n)などの特別な意味(役割)を持った文字とクォート(シングルorダブル)との関係は、意図した結果を得るために、しっかり理解して、使い分けられるようになっておく必要があ…

Webサイト制作におけるPHPの基本(その3:htmlspecialchars関数と特殊文字)

PHP

Webサイト制作において、フォームなどでユーザーからの入力を受けとる際に用いられるhtmlspecialchars関数と、その際に必要となる特殊文字の扱いについてまとめておく。 htmlspecialchars関数 HTMLには特殊な意味(役割)を持っている文字(特殊文字)があり…

Webサイト制作におけるPHPの基本(その2:変数、定数、データ型)

PHP

Webサイト制作におけるPHPの演算で、同じ値を使い回したりする際に必要となる変数、定数、データ型についてまとめておく。 基本概念 変数:代入した値を一時的に保持し、変更ができる 定数:宣言時に代入(セット)した値を保持し、変更ができない データ型…

Webサイト制作におけるPHPの基本(その1)

PHP

Webサイト制作において、ショッピングカートなどのWebアプリを制作する必要が出てくる場合がある。 その際に用いられているPHPの基本についてまとめていく。 PHPのファイル作成時のルール 拡張子を「.php」にする 文字コードを「UTF-8」にする PHPのコード記…

カメレオンの手(バイオリウム)

以前、とある散歩番組で放送されていたのを見て、一度行ってみたいなぁと思っていた「バイオリウム」。植物の写真が撮りたかったのと、放し飼いにされているというグリーンイグアナを見るべく行ってきました。バイオリウムは、渋谷駅からバスで20〜30分ほど…

Webサイト制作におけるWordPressを用いたブログのトップページの作り方1

Webサイト制作に関連して、ブログを作る必要が出てくる場合がある。今回はWordPressでのブログ制作におけるトップページの作り方の基本事項をまとめていく。WordPressのインストール方法などは省略する。 参照:http://wp-exp.com/WordPressでのブログ制作は…

前田慶次道中日記

突然ですが、前田慶次をご存知でしょうか?漫画「花の慶次-雲のかなたに-」が有名で、近年はパチンコ・パチスロで使われているらしく、知らない人でもCMで目にする機会はあったかと思います。なぜ突然前田慶次が出てきたかというと、タイトルにある通り、「…

Webサイト制作におけるjQueryのプラグイン(設置)に関するまとめ

先日、訓練におけるWebサイト制作の発表が終わったので、授業が次のステップに進む前に今回のWebサイト制作において用いたjQueryのプラグインについてまとめておく。私が用いた主なjQueryのプラグインは以下の3つ。 flexslider:画像の移り変わりの方法(フ…

Webサイト制作におけるパンくずリストの書き方

Webサイト制作におけるパンくずリストの書き方はいくつかあるが、ベターな書き方を習ったのでまとめておく。※パンくずリストとは:http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88ポイントは以下の2点。 ペ…

Webサイト制作におけるjQueryの基本的なメソッド6 - wrap()とremove()

今回はwrap()メソッドとremove()メソッドについて確認する。その前に、ここまでは既にHTML内にある要素を指定してそれを操作するという方法で確認等を行ってきたが、同じような書き方で、新しく要素を作って、それを操作するということができる。記述方法は…

Webサイト制作におけるjQueryの基本的なメソッド5 - before()とafter()

前回に引き続き、今回はbefore()メソッドとafter()メソッドについて確認する。 before()メソッド 以下、挙動確認コード。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>before()メソッド</title> <style> body, div, p, li { margin: 10px; padding: 0; } #done { background: #0F0; } #dtwo { width: 200px; backgr</meta></head></html>…

Webサイト制作におけるjQueryの基本的なメソッド4 - prepend()とprependTo()

前回に引き続き、今回はprepend()メソッドとprependTo()メソッドについて確認する。機能の概要は既に(前回)書いたので割愛する。挿入される位置が異なる以外は、append()メソッドおよびappendTo()メソッドと同じ機能なので、前回の記事を見て頂いた人は特…

Webサイト制作におけるjQueryの基本的なメソッド3 - append()とappendTo()

今回からは、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドの中でも、要素の移動や挿入(追加)する機能をもつメソッドをまとめていく。 要素を移動・挿入(追加)する機能をもつ基本的なメソッド append()メソッド:指定した要素内(…

Webサイト制作におけるjQueryのメソッドの書き方あれこれ

ここ数回に渡ってjQueryの基本的なメソッドについてまとめてきたが、正しい書き方(意図した通りに処理される書き方)がやや曖昧なので、一度確認しておく。以下、確認コード。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>メソッドの書き方あれこれ</title> <style> body, div, p, li { margin: 10px; padding: 0;</meta></head></html>…

やさしい時間(手嶌葵 コンサート2013 〜 Miss AOI-Bonjour, Paris! 〜)

今回はオフネタです。今日は手嶌葵さんのコンサートへ行ってきました。手嶌葵さんはジブリ映画の挿入歌や主題歌を歌っている方で、映画経由でご存知の方も多いと思いますが、個人的には前々から一度ナマで歌を聴いてみたいなぁと思っていたアーティストでし…

Webサイト制作におけるjQueryの基本的なメソッド2

前回に引き続き、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドについて、まとめていく。今回はデザイン面ではなく、コードそのものや表示される内容を変える機能面のメソッドをまとめる。 内容や機能を変更する基本的なメソッド addC…

Webサイト制作におけるjQueryの基本的なメソッド1

今回から、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドについて、何回かに渡ってまとめていく。 スタイルを変更する基本的なメソッド css()メソッド:要素のcssを操作する width()メソッド:要素の幅を操作する。カッコ内はデフォル…

Webサイト制作におけるjQueryのメソッドの基本的な書き方

Webサイト制作のコーディングにおいて用いるjQueryのメソッドの基本的な書き方をまとめておく。まずは記述の共通ルールを確認する。 共通ルール メソッドはドット「.」で繋ぐ(ドットシンタックス) メソッド名には必ず括弧()をつける 必要に応じて括弧()内…

Webサイト制作におけるjQueryのセレクタの種類1

Webサイト制作のコーディングにおいて用いるjQueryのセレクタの種類をまとめておく。セレクタはほぼCSSと同じなので、CSSが分かっている人は一度確認しておく程度でよいと思われる。 基本的なセレクタの種類 タイプセレクタ:HTMLの要素名(タグ名) 例 div …

Webサイト制作におけるjQueryのセレクタの種類2

前回に続き、Webサイト制作のコーディングにおいて用いるjQueryのセレクタの種類をまとめていく。今回は少し高度?なセレクタについて確認する。 セレクタの種類 子セレクタ:指定した親に対する子のみ(孫以下は対象外)を指定するセレクタ 例 div > span …

Webサイト制作におけるjQueryの基礎

Webサイト制作において、動的要素の導入方法の一つとして、jQueryを用いる方法がある。 jQueryはJavascriptのライブラリの一つで、現在ではデザイン面においても機能面においても幅広く利用されている。本日よりjQueryについて基礎から学んでいく。 jQueryの…