nicepaper @ ウィキ

nicepaper @ ウィキ内検索 / 「セッションについて」で検索した結果

• セッションについて
  今日はセッションについて勉強していきたいと思います。 セッションとは何か？？ 例えば、ログインフォームを作った後にログインが完了して操作を行うページを作ったとします。 直接、ログインが完了したページのURLを打ち込んでしまえば、パスワードを知らなくても簡単に侵入出来てしまいます。 そんな事態を防ぐための仕組みがセッションです。 セッションの仕組みはクッキーと似ています。 違いは、 クッキーは管理したい値をクライアント側に保存するのに対し、セッションではサーバ側で管理すること です。 クライアント側にはどのセッションを使っているかを識別するためのセッションIDだけを保存します。 このセッションIDをクライアント側に保存するためにクッキーを使います。 クッキーに重要な値を格納した場合、盗み見されてしまう場合があるため、ログインフォームなどではセッションを使う事になります。 ...
• レスポンシブWebデザインについて
  目次 レスポンシブウェブデザイン 練習 それぞれのデバイスの画面の大きさと解像度について レスポンシブウェブデザイン 今日はレスポンシブウェブデザインの基礎について書いていきたいと思います。 まずはレスポンシブウェブデザインの意味について。 レスポンシブウェブデザインとは、ひとつのHTMLでＰＣ、タブレット、スマートフォンなどの様々なデバイスに対応できるウェブサイトの作り方をいいます。 主にCSSで調整をしていきます。一番簡単な方法は@media(){}を利用する方法です。 これは、画面のサイズを指定して、画面のサイズが○○以下、以上であればこのスタイルシートを適用すると指定できるプロパティです。○○は()の中に入れます。(○○をブレイクポイントという)今回も実際の例を挙げて説明してみます。 練習 例）パソコンで閲覧す...
• PHP
  ...ェックする セッションについて オブジェクト指向でPHP PHPでオブジェクト指向入門1～クラスの定義～ PHPでオブジェクト指向入門2～プロパティ～ PHPでオブジェクト指向入門3～メソッド～ PHPでオブジェクト指向入門4～コンストラクタ～ PHPでオブジェクト指向入門5～デストラクタ～ PHPでオブジェクト指向入門6～静的メソッド～ PHPでオブジェクト指向入門7～静的プロパティ～ PHPでオブジェクト指向入門8～クラス定数～ 他カテゴリと混在のもの .htaccessで拡張子htmlのままphpを実行させる MySQLであいまい検索パターンマッチの仕方（Like句の使い）初級編 内容制作編 更新機能を作...
• headに入れる要素について
  今回はheadに入れる要素について説明していきます。 headはとても重要性が高いにも関わらず目に見える形でページに反映されないのでとてもわかりづらいです。そこで少しずつわかりやすく解説していきたいと思います。 headとはtitleやmeta要素などで構成されており、基本的にはtitleは必須です。また、メタデータ(文字コードや検索結果と同時に表示される文章説明、キーワードなどのそのページに関する情報)の集合です。 head meta charset="utf-8" title サンブル /title link rel="stylesheet" href="○○.css" /head これが最も簡単な形のheadでしょう。二行目の部分、meta charsetは文字コードを指定しています。 ...
• tableとlistについて
  リスト(ol,ul,li)と定義型リスト（dl,dd,dt）とtableとの違い リスト(ol,ul,li)の使い方 定義型リスト（dl,dd,dt）の使い方 表(table)の使い方 リスト(ol,ul,li)と定義型リスト（dl,dd,dt）とtableとの違い ウェブページのコンテンツ部分がひとまとまりになるような部分（料理の材料、料理の作り方、更新情報、Q A、データの集計）の話をします。 まず、一番最初に持っておく簡単なイメージは ulやol⇒箇条書きなどをつくるためのタグ（例：料理の材料や料理の作り方） dl⇒定義された用語などを説明するタグ（例：更新情報やQ A） table⇒表を作成するためのタグ（例：データの集計、ウェブメールの受信メール一覧） リスト(ol,ul,li)の使い方 まずは、よ...
• SEO対策について
  この記事は途中編集状態です。 目次 SEO対策とは何か？ クローラーは何をみている？ 具体的な対策 情報の関連性を意識したページ作り h1タグとh2タグ、タグの使用 比率 被リンク ページの表示速度 NGな対策 ありきたりなアフィリエイトサイト 隠し文字 効果の分析 SEO対策とは何か？ 皆さんはSEOという言葉はご存知でしょうか？ Search Engine Optimizationの略であり、これを日本語に直すと「検索エンジン最適化」という意味になります。 検索エンジンとはgoogleやyahooなどのような何かを検索する際にいつも利用しているものを指します。 googleは、ユーザーがいち早く有益な情報にアクセス出来るように、検索結果の...
• JavaScriptについて
  このページではJavaScript（主にJquery）の使い方について説明していきます。 JavaScript入門 jQueryの読み込み jQueryを学ぶ1 jQueryを学ぶ2 jQueryを学ぶ3 jQueryを学ぶ4 jQueryで日付入力フォームを作る jQueryで複数の画像を切り替える jQueryでWEBページ全体をフェードインさせる。 jQueryで画像のスライドショーを実装する jQueryでタブコンテンツを作ってみる。 jQueryですべて表示（全部表示）と個別表示のタブ的なメニューを作る jQuery3.0登場 jQueryとCSSで上へ戻るボタンを作る jQueryで横並びメニューのドロップダウン型メニューを作る ...
• 数字入力について考える2
  前回記事数字入力について考える1では、意図しない入力があった際に、フィルターや関数を利用してもうまく処理できないことを確認しました。今回はそんな中で0～100までの整数値の入力チェックについて考えていきたいと思います。8月9日記事 目次 入力されるイメージ 入力フォーム エラーチェックとエラーがなかった場合の表示 簡単versionのコード 厳密にいうversionのコード まとめ 入力されるイメージ 想定されるものとしてはこんな感じです。全角の数字のみを入力されたら変換ぐらいするぐらいの配慮はしていきたいと思います。 入力フォーム !DOCTYPE HTML html head meta charset="utf...
• 数字入力について考える1
  PHPのよいところは型を宣言しなくても柔軟に対応してくれるところではありますが、中には対応してくれないものもあります。今回はそんな中で数字の入力について考えてみます。8月8日記事 目次 フォームの入力 エンドユーザの入力 確認ページ 表示1（全角で「９１」と入れる） 表示2（「91点」と入れる） 表示3（「50.1点」と入力する） 考察 フォームの入力 ID,年齢,生年月日の入力でユーザから数字を入力させるシーンはよくあります。ECサイトでフォームの入力エラーがあると、それで成約率が下がってくるそうです。そんな中で、エンドユーザから入力されたフォームをどう処理していけばよいのかを考えていきます。 エンドユーザの入力 !DOCTYPE HTML...
• CSSでグラデーションその1
  グラデーションについて記述していきます。2015年5月25日記事です。 目次 グラデーションとは グラデーションのコツ（色の勉強？） 綺麗なグラデーションの例 汚いグラデーションの例 背景色のグラデーション 今後メンテナンスしやすいように記述するコツ とにかく全部対応させたい それぞれの表示を確認してみる。 IE(11.0) GoogleChrome(43.0) Firefox(38.0) Opera(29.0) 謎が残る グラデーションとは 色が連続的に変化すること。 一昔前、webページ制作の時のグラデーションの作り方は、幅10px×高さ60pxなどの画像でグラデーション画像を作り、CSSのbackgroundでその画像を...
• データベースについて（mysql編）
  ここではmysqlDBの操作方法について記述していきます。 目次 XAMPPでMySQLの利用 MySQLでログインとデータベース作成とユーザ作成データベースのログインと初期設定 MySQLでテーブル作成1更新情報を管理するテーブル作成方法の紹介 MySQLでテーブル作成2 MySQLのINDEXと複合INDEXとINDEXなしの時間を計測 MySQLでプログラム作成で使うコマンド一覧 MySQLのフィールド削除のコマンドTRUNCATEとDELETEの違い MySQLの予約語と予約語をテーブル名やカラム名に登録したい場合 MySQLで大容量の画像挿入や出力に対応できるように設定を変更する MySQLで外部結合と内部結合1～他テーブルのフィールド情報変更に対応する～ MySQLで外部結合と内部結合...
• HTMLとCSS
  HTMLとCSSについての記事一覧です。 目次 HTML5とCSS3とは HTML5の宣言文 html5+css3で基本的なページをつくってみよう！① html5+css3で基本的なページをつくってみよう！② headに入れる要素について HTML５で登場する新タグ(新要素) header margin、border、paddingの違いについて CSSのリセット 擬似要素before,afterの使い方 各ブラウザにおけるcss内のfont-familyの挙動 文中の文字の一部のみを指定する場合 HTML5でのタグ使用の注意点 インライン要素とブロックレベル要素（ブロック要素） CSSでmarginプロパティが効かない時の対策 boxの配置方法 ...
• margin、border、paddingの違いについて
  ここでは、margin、border、paddingの基本的な使い方について記していきます。 想像してみてください。デザイン性の高いWebページの条件とはなんでしょうか。 …答えはいくつかあると思いますが、その中の１つに「読みやすさ」があると思います。 CSSのmargin、border、paddingを使って文字や画像、レイアウトなどの距離を定義します。 文字や画像、レイアウトなどのタグをHTML上にのせた場合に、その「要素の内容」からとなりの要素までの距離について、 CSSの中でmargin、border、padding で定義してゆくのです。 まずはこちらの画像をご覧ください。 border、padding、marginを理解するにはこの図が分かりやすいのかな、と思います。 これで理解された方は戻るボタンを押していただいても大丈夫です。 注意すべき点 ...
• Photoshp左右に丸いグラデーションをかける
  Photoshopで左右に丸いグラデーションをかける方法について執筆していきます。画像はhttp //www.photo-ac.com/から拝借しました。9月30日記事 イメージ 目次 Photoshopでキャンバス新規作成 画像配置 Shiftキーを押しながら画像を枠に調整 長方形選択ツールから楕円形選択ツールを選ぶ 「ctrl」+ 「-」で縮小し、全体にかかるように選択 レイヤーパレットのレイヤーマスクの作成ボタンを押す 完成 Photoshopでキャンバス新規作成 [ファイル]→[新規]を選び、適当にサイズを選んで、背景を透明にしていきます。 画像配置 [ファイル]→[配置]を選び、画像を選択していきます。 Shiftキーを押...
• クロスサイトスクリプティング
  今回はクロスサイトスクリプティングについて学んでいきます。クロスサイトスクリプティングは他人のWEBサイトに悪意のあるプログラムコードを埋め込む攻撃手法です。どんなことが起きる可能性があるのか、何を対策しなければならないのかを学んでいきたいと思います。6月6日記事 目次 自分で自分を攻撃してみる。 コード 注入 どんなことが起きるのか。 何をすればよいのか。 対策方法 自分で自分を攻撃してみる。 コード form.php !DOCTYPE HTML html lang="ja" head meta charset="utf-8" title フォーム /title /head body form...
• jQueryを学ぶ3
  今回はちょこっと休憩しjQueryのcdnおよびプラグインについて執筆していきたいと思います。7月13日記事 目次 GoogleにホストされているCDN プラグインの一例 入力フォームのチェックプラグイン タブやページネーションを使えるプラグイン 日付入力をカレンダーから簡単に入力できるプラグイン GoogleにホストされているCDN GoogleにホストされているCDN一覧はhttps //developers.google.com/speed/libraries/にあります。 jQuery jQuery Mobile jQuery UI この3つです。そして3つとも色々なバージョンがあります。これらは代表的で簡易的なJavaScriptしか使えません...
• Webページ制作に使える便利グッズ
  このページではwebページ制作時に利用できる便利なツールについて少しずつ紹介していきたいと思います。 目次 タグ入れ子ルール ピクセル定規 0 to 255 マウスが指している部分の色を確認する事ができるアプリ 角丸ボタンを自由に作成できるサイト ちょっとした時間短縮(？)に使えるかも知れないです。 ベンダープレフィックス対応状況サイト ajaxローディングマークgenerator font-awesome PHPでよく使う関数まとめ 記事 タグ入れ子ルール http //matome.naver.jp/odai/2137515842633207101 ピクセル定規 その名の通りパソコンの画面上に表示させて、ピクセルを測る定規として使うことがで...
• cakePHP3でデータベースのバージョン管理(migrations)1
  cakePHP3であとからテーブルのカラムを追加したり、削除したり、indexを付けたい時というのは運営してよくあります。 そんな中で、どんな変更をしたのかの軌跡を記録したりする方法について考えていきます。 Migrations 基本コマンド 既存のデータベースからマイグレーションファイルを作成する（もうすでにテーブルを作っている人用） migrationファイルを作成（詳細は後日） ステータス確認 実行。 元に戻す（ロールバック）。 Migrations cakePHPのDBバージョン管理システム。 基本コマンド 既存のデータベースからマイグレーションファイルを作成する（もうすでにテーブルを作っている人用） bin/cake bake...
• CSSでメニューなどのスクロールしたらついてくるエリアを作る1
  スクロールしても上のバーが残っている状態のCSSの設定方法です。12月1日記事 イメージ 最初はこんな感じスクロールしてもこんな感じに上のバーが残る 目次 スクロールしたらついてくるものの実装方法 コード まとめ スクロールしたらついてくるものの実装方法 スクロールしたらついてくるエリアの設定はJavaScriptでもありますし、CSSでもあります。まずは今回CSSのみで実装していく方法について考えていきます。 コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css"...
• CSSでのid名やclass名の付け方
  CSSで名前を付けるときに、どうつけるか迷ったりします。より具体的なものにしても汎用性が効かないですし、より抽象的な名前してしまうと、なかなか他で使えなかったり、前に設定したCSSが読み込まれてしまい、デザインを再定義しなおすことにめんどくさくなってしまうことがあります。今日はそんな中でid名やclass名の付け方について考えていきたいと思います。7月4日記事 目次 CSSのおさらい よく使われるid名やclass名 全体部分 ヘッダー部分 ナビゲーション部分 サイドにくるようなもの 本文やメインのところにくるもの フッター部分 一番厄介な本文やメイン部分の名前についての考察 その部品について抽象度を少し上げたクラス名にする。 その部品の細かいところはアンダーバーやハイフンを付ける ...
• CSSのリセット
  IE、Firefox、GoogleChrome、Opera、Safariなどさまざまなブラウザが存在します。しかし、各ブラウザで初期段階で持っているCSSがあり、ブラウザの表示を悩ませてくれます。このようにならないためにも、多くのWebサイトはreset.cssというシートを作り、初期化しています。今回はこの初期化についてまとめていきます。 html5doctorのreset.css その他のCSSリセット html5doctorのreset.css 有名なところとして、Richard Clark氏のCSSがあります。このCSSを自分の読み込みたいCSS以前に読み込ませます。 ※以降に読み込ませてはいけません。自分の定義したCSSのほとんどがリセットされます（笑） 解説ページ：http //www.html5-memo.com/firs...
• PHPでオブジェクト指向入門3～メソッド～
  前回記事PHPでオブジェクト指向入門2～プロパティ～ではオブジェクト指向における変数の扱い方について学んでいきました。 ここでは、オブジェクト指向における関数的なものの扱い「メソッド」に関して記述していきます。9月17日記事 目次 オブジェクト指向における関数はメソッドと呼ばれる。 コード まとめ オブジェクト指向における関数はメソッドと呼ばれる。 クラスで管理される値を処理するための関数です。 メソッドまたはメンバ関数 と呼ばれています。とりあえずメンバ変数を出力していくことからはじめていきます。 コード 前回とは違う内容です。何度もコードを書いて、この形を覚えるためにあえて別々の内容にしています。 classを定義したファイル（Calculator.phpの方） ...
• 文字列のエスケープ処理
  PDOでは自動的にエスケープしてくれるところはいいところですが、それでもPDO以外でエスケープする場合は存在します。そんな中でPHPの文字列のエスケープについて考えていきます。10月7日記事 目次 メタ文字やシングルクオーテーション、ダブルクオーテーションをPHPで扱うためには円マークを先頭につける 文字列を意図的にエスケープ コード 実行 メタ文字やシングルクオーテーション、ダブルクオーテーションをPHPで扱うためには円マークを先頭につける 正規表現や特定の文字を取り除いたりする場合には記号の前に円マークをつけて、その文字を文字としての認識をプログラムにさせる必要があります。円マークを使いたい場合は\\や、"を扱いたい場合は\"としたりとか色々です。（ブラウザによってはバック...
• JavaScript入門5
  前回記事JavaScript入門4では関数の書き方について学びました。今回は配列について考えていきます。10月25日記事 目次 配列 コード まとめ 配列 配列の表現について、連想配列は今後学ぶオブジェクトと似ています。連想配列はオブジェクトの一種だと考えていいです。最後の方はオブジェクトとしての書き方も少しふれておきます。 コード !DOCTYPE HTML html head meta charset="utf-8" title 配列 /title /head body script //基本的な使い方 var testscore = [98,30,100]; console.log(testscore[0]);//0から開始さ...
• Photoshopで文字デザイン7～文字にグラデーション編～
  前回記事Photoshopで文字デザイン6～テカテカ、サテン編～の続きで、今度は、文字にグラデーションをかけていく方法を書いていきたいと思います。9月24日記事 イメージ(枠つけたバージョン)※枠をつけるとより引き立ちます。こちらはPhotoshopで文字デザイン8～文字の縁に縁取り編～で記述していきます。 目次 背景のキャンバス作成 Photoshopを開き、新規作成 文字記入 横書き文字ツール 移動ツールで調整 グラデーションの設定 グラデーションの色を選択 左下の三角マークで開始色を変更 右下の三角マークで終了色を決定 グラデーションの変化位置を調整 完成 背景のキャンバス作成 Photoshopを開き、新...
• Navigationのデザイン
  今回はとても単純でシンプルな形のNavigationのデザインをしていきたいと思います。 まず最初に縦並び横並びの最もシンプルな形のナビゲーションを作っていきましょう。 以下のものを作っていきます。 縦並びのナビ(カーソルをのせるとトップの部分のように灰色になる) 横並びのナビ(カーソルをのせるとトップの部分のように灰色になる) 目次 縦並びのナビゲーション 横並びのナビゲーション コピペ用 縦ナビゲーション 横ナビゲーション 縦並びのナビゲーション まずはulとlinkを使ってHTMLに記述していきます。 HTML div class="menu" ul li a href="#" トップ /a /li ...
• PhotoshopでアニメーションGIFを作る1
  PhotoshopでアニメーションGIFを作る方法を考えていきます。 色々な方法がありますが、まずは開始と終了のレイヤーを決めてその間は自動で変化させるという方法で行っていきます。11月19日記事 イメージ 目次 新規作成 文字を書く 新規レイヤー作成 アニメーションの準備 レイヤーからフレームを作成 開始と終了を逆にする。 アニメーションの間のフレームを作る あとは書き出し 完成 新規作成 [ファイル]→[新規]を選び適当に大きさを決めます。今回何もないところからフェードインのように表示させるため、背景は透過を選択します。 文字を書く 横書き文字ツールを選び、フォントや大きさ色を選んでいきます。 記述後、移動ツールを使って調整しま...
• HTML５で登場する新タグ(新要素)
  ここでは、タイトルの通りHTML5で新たに登場するタグを紹介していこうと考えています。 また、簡易的な説明しか書かれていませんが、ここで説明しているタグについてその使い方や具体例なども近々アップします。 また、以下の違いについてわかりやすく説明したサイトを紹介しておきます。 http //sole-color-blog.com/blog/php/65/　　　　　　　　　 header divとしてグループ分けされていた「ページのヘッド部分(実際に表示される)」 section divとしてグループ分けされていた「コンテンツのまとまりごとのグループ」 article ブログや掲示板の投稿、新聞記事などのような「内容が単体で完結している記事」についてのセクション aside これまでは補足などの情報はどの要素に加えるべきかわかりづ...
• パスワードのハッシュ化
  今回はパスワードをハッシュ化してみたいと思います。 そもそもハッシュ化って何？？ ハッシュ化というのは、パスワードを保護するための方法の一つです。 例えば、ユーザー管理のデータベースにそのままパスワードを入れてしまうと、データベースにアクセスされてしまった時点でパスワードなどは全て丸わかりになってします。 ハッシュ化は不可逆的計算が行われているので、ハッシュ値から原文を復元する事は不可能です。 暗号化との違いはこの点にあり、暗号化は一定の手順により復元する事ができるものです。 また、ハッシュ化だけでなくソルト(データを追加する事)を自動生成し、付加すると同じパスワードであっても攻撃される可能性は低くなります。 コード ?php $options = array( cost = 10); $hash = password_hash($passwo...
• jQueryとCSSでメニューなどのスクロールしたらついてくるエリアを作る2
  前回記事CSSでメニューなどのスクロールしたらついてくるエリアを作る1では一番上にある部分をスクロールしてもついてくる状態にしました。 今度は途中にあるメニュー部分などをスクロールしてもついてくる方法について考えていきたいと思います。12月3日記事 イメージ スクロールする前スクロールしてnav部分をすぎると？こんな感じでナビ部分だけが残る 目次 コード まとめ コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="reset.css" link rel=&...
• Photoshopで文字デザイン3～光る、光彩（外側）編～
  前回記事Photoshopで文字デザイン2～影、シャドー編～に引き続き、今度は文字の外側の光彩です。文字を光っているように見せることができます。6月15日記事 イメージ 目次 背景のキャンパス作成 Photoshopを開き、新規作成 長方形作成 色選択 図形を描く 文字記入方法 新規レイヤー作成 横書き文字ツール 文字の記入 文字を微調整する 光彩のつけかた 光彩を選択する。 光をつける 光彩（外側）の詳細設定 完成 まとめ 背景のキャンパス作成 今度は、光が目立つよう暗めの色の背景にしていきたいと思います。 Photoshopを開き、新規作成 適当にサイズを決...
• レスポンシブデザインとスマホで確認した時の落とし穴
  このページではレスポンシブデザインについて様々な方法を説明していきます。 レスポンシブデザインとは 一つのHTMLに対して画面のサイズ(正確には横の画素数)によってCSS３により別々のレイアウトに変える設計のなされたサイト を言います。 また、レスポンシブデザインをスマホで確認する時に陥りがちな落とし穴についても解説していきます。 OSを搭載した携帯電話であるスマートフォンの登場により、今後増々、様々なデバイスによって閲覧されるWebサイト作りは重要性を増していくと思われます。そんな状況に対応すべく登場したのがHTML5やCSS3と言っても過言ではないくらいでしょう。そしてより素早く全てのデバイスに対応したwebページを作るためには「より良いレスポンシブデザイン」の作成技術は必須は言えるでしょう。 そこでこのページでは、レスポンシブデザインを作成するための３つの方法と、メリット、デメリッ...
• ベンダープレフィックスとは
  ベンダープレフィックスについてお勉強していきます。 CSSで-moz-や-webkit-や-ms-や-o-という記述を時々見かけると思います。それとは何ぞやという話です。 ブラウザ間で挙動が違う！？ ベンダープレフィックスとは ベンダープレフィックスを付けないとできないものの例 グラデーションを表現するプロパティ(linear-gradient) テキストに影を付けるプロパティ(text-shadow) ベンダープレフィックス ベンダープレフィックスが必要か必要でないかを判断するためには・・・ ブラウザ間で挙動が違う！？ 世の中には様々なブラウザが存在します。InternetExplorer、GoogleChrome,Opera,Safari,Firefox,Netscape・・・。CSSを同じよ...
• 色々なハッシュ化アルゴリズムとソルト化
  前回記事MD5のハッシュ化でソルトを行う。の続きで、様々なハッシュ化アルゴリズムについて少し考えていきます。10月4日記事。 目次 MD5以外のハッシュ化アルゴリズムについて考える。 コード 実行結果 まとめ MD5以外のハッシュ化アルゴリズムについて考える。 md5は有名ですが、それ以外のものも色々と登場してきているので、紹介。 コード 適当なパスワードを入れるコード !DOCTYPE HTML html head meta charset="utf-8" title パスワード挿入 /title /head body form action="confirm.php" method="...
• 画像処理
  　ここではPhotoshopやillustratorの画像処理及び画像加工について、記述してきます。 目次 Photoshop 画像加工編 2つの画像のうち画像の片一方を透過させ、もう一つの画像の上に載せる 画像と長方形を二つ並べてグラデーションをかける photoshopで一部分の色だけ変更する illustratorで文字の外側に光彩がある画像リンクを作る photoshopで古風でくしゃくしゃの紙を作る 小休憩 マスクの種類～クリッピングマスクとレイヤーマスク～ photpshopでシミのあるボロボロの紙を作る photoshopで特定の色を抜いたり消したりする Photoshopでキャンバスの作成と四角形で塗りつぶし Photoshopで額縁の作り方 Photoshopで図...
• 擬似要素before,afterの使い方
  このページでは擬似要素、before、afterについてまとめていきます。 サンプル 解説 1、サンプル1 疑似要素before,afterを使わないと・・・ 疑似要素beforeのみをまずは使ってみる。 2、サンプル2 A,まずはbox表示 B,次に影を付ける用のボックスを描いて確認する。 C,上側5pxから始まるようにし、次に影を付け、z-indexを-1にする。 before、afterの擬似要素とは要素の直後、または要素の直前にいれる要素のことです。 before、afterでできるCSSデザインから見ていきましょう。 サンプル 1、サンプル1 2、サンプル2 解説 1、サンプル1 疑似要素befo...
• html5+css3で基本的なページをつくってみよう！①
  HTML5+CSS3を使って実際にページの構成などを考えてみましょう。 こういったページを作成します。 まずスタイルシートを読み込ませたHTML文書がWEB上でどのように表示されるかを確認するために必要な事を書きます。ブラウザは単にWEBページを閲覧するためだけにあるのではなく、一種のエクスプローラのような役割をはたしてくれます。URLを記述する欄にhttp //からはじめて表示させたいファイルが自分のパソコン内(ローカルホスト)のどこに存在するのかを簡単な決まりのもとに書き示していきます。 例えば、 　http //localhost/page/index.html という風に記述します。 するとCドライブ内の○○というドキュメントに保存されているindex.htmlというファイルを表示させる事ができます。 これを使って自分がhtmlに記述した事が正しくブラウザ上で表示され...
• PDO::quote()
  phpの学習に使っている手元にある本にmysql_real_escape_stringという関数が使用されていました。 しかしこの関数が意味するところを調べてみると、もう非推奨となっていました。 そこでPDO quoteに出会い、今回はそれを勉強してみました。 (名著なのですが2008年のものなので仕方ないみたいです・・・) SQLインジェクション セキュリティの不備を利用して、不正なSQL文を実行させることによって、データベースシステムを不正に操作する攻撃手法のことをSQLインジェクションと言います。 このSQLインジェクションに対策を打つべく外部から文字列を入力してデータベースを操作する場合にはサニタイジング処理を行わなければいけません。 サニタイジング処理 これはエスケープ処理とも言われ、特殊文字をエスケープしてくれます。 PDO ...
• Googleマップ、YouTube、電話番号(スマートフォン用)を埋め込む方法
  GoogleMapを埋め込む方法 YouTubeを埋め込む方法 電話番号を埋め込む方法 GoogleMapを埋め込む方法 例えば自分のお店のホームページを作ったときに折角なら地図をのっけたいですよね。 自分で地図を作ってみたりあるいは言葉で説明を書いておくのもいいですが、Ｇｏｏｇｌｅマップをそのまま超簡単に乗っける方法も存在します。 それでは以下の3ステップでやってみましょう。 1 Ｇｏｏｇｌｅマップを検索する 2 埋め込みたい場所の名称、住所を入力 3 印刷の隣にあるリンクをクリックしてウェブサイトへの地図埋め込み用 HTML コードをコピーしてhtmlの張り付ける。 4 ＨＴＭＬでサイズを好きなサイズに修正して、CSSでiframeを使ってマージン、位置などの詳細を指定 東京ディズニーランド(もっとも僕には全く縁のないまさに夢の国...
• Photoshopで文字デザイン5～立体、ベベルとエンボス編～
  前回記事Photoshopで文字デザイン4～光る、光彩（内側）編～です。今度は、文字を立体的にみせるPhotoshopの文字デザインについて書いていきたいと思います。6月17日記事 イメージ 目次 ベベルとエンボスとは Photoshopを開き、新規作成 長方形ツールを選び、色を選択する。 図形を描いていく 文字記入方法 新規レイヤー作成 文字記入 移動ツールで調整 ベベルとエンボスを選択する ウインドウを開き調整する ベベルとエンボスの詳細設定 完成 まとめ ベベルとエンボスとは 文字や図形などのオブジェクトに立体表現ができる機能です。ベベル（外側）とベベル（内側）とエンボスの3通り...
• HTML5のfieldestタグ
  今回はHTML5のfieldestタグについて勉強してみました。 プログラムを勉強しはじめたらフォームも勉強しようと思ったままになっていたのでフォームに関して結構知らないタグがいっぱいありました、、、 fieldestタグってなに？？ fieldestタグはフォームの入力項目をグループ化する際に使用します。 fieldest ～ /fieldest の中に配置されたフォーム部品は一つのグループとみなされ、ほとんどのブラウザでは細い枠線で囲まれて表示されます。 グループに名前や説明(キャプション)を付けたい場合は、fieldestタグの中で一番最初の legend タグで指定します。 属性 fieldestタグには３つのタグが存在します。 disabled属性 この属性を指定するとフォーム内のすべての部分が無効になりま...
• bootstrapでメニュー、ナビゲーション
  bootstrapでメニューやナビゲーションを作る。3月23日記事 目次 概要 コード 概要 スマートフォン用のメニューとPC用のメニューを作る。スマートフォンの場合は、メニューボタンを押すと、下にドロップダウンする感じでメニューがあらわれる。 コード !DOCTYPE html html lang="ja" head /head meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="...
• MySQLのフィールド削除のコマンドTRUNCATEとDELETEの違い
  フィールドデータを削除する場合のコマンドについて考えていきたいと思います。8月13日記事 目次 TRUNCATE TABLE テーブル名 DELETE FROM テーブル名 AUTO_INCREMENTの初期化 削除コマンドを走らせる以外にもデータを表示させない（消す）方法はある。 まとめ TRUNCATE TABLE テーブル名 TRUNCATEではDROP TABLEを行った上で再度同じテーブルを作成する AUTO_INCREMENTが設定されている場合はAUTO_INCREMENTの値は初期化できる。 障害がおこったときに前の状態に戻るというロールバックはできない 使用例（全フィールドデータを削除後、以前と同じテーブルの状態に戻す。） TRUNCATE TAB...
• PHPで正規表現入門1
  正規表現を学びたい！と思ってる人は多いと思います。代表的なものは見つかるけど・・・もっと自分で扱えるようになりたい！という人向けに記事を書いていきたいと思います。8月10日記事 目次 閲覧時の注意事項 正規表現で登場するメタ文字と関数 メタ文字 関数 まとめ 閲覧時の注意事項 このサイトではCSSのfont-familyを日本語にしてあるため、PC環境では、円マーク(\)が表示されていると思います。(スマートフォンではバックスラッシュになってる場合もあります。) 他のサイトによっては バックスラッシュ になっていることもあるのでバックスラッシュは円マークだと思っていただければと思います。 正規表現で登場するメタ文字と関数 まずは、「あーあるある、見たことある～」か...
• Photoshopで文字デザイン6～テカテカ、サテン編～
  前回記事Photoshopで文字デザイン5～立体、ベベルとエンボス編～の続きで、今度は文字をテカテカさせるサテンについて書いていきたいと思います。木工用ボンド？で文字を書いて、乾かせたような質感（こんな説明でいいのか・・・？）を表現することができます。ただ、注意すべき点は サテンのみを使ってもあまり効果はなく、ドロップシャドーやベベルとエンボスとの組み合わせによって非常にデザインがよくなります。 6月18日記事 イメージ 目次 背景キャンバス作成 Photoshopを開き新規作成 長方形ツールを選び、色を選択する。 図形を描いていく。 雲形模様を追加し、拝啓にアナログ感を出す 背景を少し雲模様にする。 文字記入方法 新規レイヤー作成 横書き文字ツール１から2,3,4とフォント、サイズ...
• jQuery3.0登場
  ITニュースにキャッチアップしていくために今日はjQuery3.0のリリース紹介をしたいと思います。7月13日にリリースされました。7月17日記事 目次 公開されるもの バージョン どんなもの？何が変わった？ ファイルサイズは？ 公開されるもの jQuery Compat 3.0 jQueryの1.11.1の後継　従来のブラウザ jQuery 3.0 jQuery 2.1.1の後継　IE9以降の最近のブラウザ 原文参照記事http //blog.jquery.com/ バージョン 両方ともにα版だそうです。α版とはバグがまだ多い初期段階のバージョンのことを言います。 どんなもの？何が変わった？ 引用すると バージョン...
• CSSで見出しデザイン1
  CSSで見出しデザインをまとめていきます。2015年5月28日記事 目次 見出しの基本構成 見出しを色々作ってみる コード 解説 見出しの基本構成 paddingやpadding-left font-family background borderやborder-left,border-bottom border-radius box-shadow といったものを使えば色々とできます。 見出しを色々作ってみる 見出しデザインを作りました。 色々なクラスの使い方を知ってもらうために、h1セレクターの基本プロパティをまず作り、5通りのスタイルの形と1グラデーションのクラスを作りました。それらを組み...
• Laravelでテーブル作成
  Laravelでテーブル作成 マイグレーションファイルの作成 $ php artisan make migration create_comments_table --create=posts php artisan make migration ファイル名 --create=テーブル名。このようにすると日付等が付与されたcommentsテーブル構造が作られる。 テーブル設計 場所はdatabase\migrations public function up→作りたいテーブルを設計 public function down→巻き戻す処理 テーブル作成 $ php artisan migrate ロールバック $ php artisan migrate rollback ...
• ファイルの書き込みに関する関数
  ファイルへの書き込みなどをする関数について書いていきます。9月13日 目次 ログの記述やWEBページのプレビューに使われる。 コード まとめ ログの記述やWEBページのプレビューに使われる。 ログの記録やページのプレビューに使われます。ファイルをオープンしている最中は他からの書き込みを禁止することが重要です。 コード !DOCTYPE HTML html head meta charset="utf-8" title ファイルの書き込み /title /head ?php date_default_timezone_set( Asia/Tokyo ); $log[] = date( Y-m-d H i s ); $log[] = $_SE...
• クッキーの基本
  今回はphpプログラムのクッキーと言われているものについて勉強してみました。 クッキーとは？？ クッキーとは、ウェブサーバ側からクライアントに送られるデータのことで、任意の一定時間クライアント側で保存されるものです。 例えば、会員制のサイトで「一週間ログインしたままにする」などの機能はクッキーによる恩恵といえるでしょう。 クッキーはsetcookie関数を使用します。 setcookie 第1引数にクッキー名、第2引数に保存する値、第3引数に有効期限 を書きます。 有効期限はUnixタイムスタンプ秒で設定していきます。 例えば、、、 「time() + 60」ならば現在時刻から一分後に有効期限が切れてクッキーが削除されます。 クッキーにセットされた値は変数「$_COOKIE」に配列形式で格納されます。 格納された値は$_COOKIE[クッキー名]により取得...
• @wiki全体から「セッションについて」で調べる

更新順にページ一覧表示 | 作成順にページ一覧表示 | ページ名順にページ一覧表示 | wiki内検索