2017-05-01から1ヶ月間の記事一覧
CSSのみでのキャプションエフェクト ■考え方 ・positionレイアウト ・キャプションはimgの下に配置しておき、overflow:hidden;で非表示にしておく。 ・hoverでpositionのbottomを変更し表示する。 ・リセットcssにfigure,figcaptionなど入れ忘れに注意。■コ…
デザインカンプの書き方 ■ポイント ・pxで設計するためカンプができたら実装はただの作業になる。 ・ファイル新規作成の際に「ピクセルグリッドに整合」を外す ・一番最初にコンテナーにあたる一番大枠を長方形ツールで描く。 →オブジェクトは「cmd+5」でガ…
要素内外への要素挿入(prepend,append,before,after) ■ポイント ・対象要素の外側：before(); afret(); ・対象要素の内側：prepend(); apend(); ・テキストの変更：text();■コード <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの基本</title> <meta name="description" content=""> <link href="css/style.css" rel="stylesheet"> </link></meta></meta></head></html>
表示・非表示のメソッド ■ポイント ・主要なメソッドの種類 hide,show slideUp,slideDown toggle fadeIn,fadeOut ・時間の指定 ('slow'),('2000') ・アニメーション実行中は次の処理を受け付けない $('#box:not(:animated)').slideUp('2000');■コード html埋…
アコーディオン ■ポイント ・利用：Google CDN: jQuery 1.12.4 ・N件同一要素がある中で、クリックされた箇所の要素の指定の仕方 ※隣接セレクタの使い方 ※$('+dd',this)、$(this).next()、etc... ・選択中の要素に色をつける（クラスを付け外しする） ※addCl…
さくらVPSにPHP環境構築 やったこと■環境 CentOS6.9■ユーザ作成 -uid,pw作成 -wheelGr add -sudoユーザの環境変数設定(sbin,usr/sbin,usr/local/sbin) -sshのポート変更(/etc/ssh/sshd_config)■環境日本語化 -/etc/sysconfig/i18n■iptables -ポートフィルタ…
ヒーローヘッダー（マルチイメージ） ■考え方 ・２カラム(header,container)でfloatをかける。 ・高さは単位vhで調整。 ・横は%指定。 ・headerのロゴを中央指定★ポイント■コード html <body> <header> <img src="img/logo.svg" alt="logo"> </header> <div id="container"> <div class="ph topL"> <div class="text"> <h2>Frog</h2> <p>~Episode1~</p> </div> </div> <div class="ph topR">…</div></div></body>
hover(border-bottom)でリストがずれないやり方 ■考え方 あらかじめborder-bottomを入れておく。 色は背景色ど同色にしておき、hover時に上書きで色を変更する。 ※レスポンシブ対応でliを上下させた際にガタガタとカラム落ちする場合があるためそれの防止の…
ヒーローヘッダー ヒーローヘッダー（Hero Header）とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。（引用） ■考え方 ・ビューポートの高さを考慮( E { height: [x%/100%]vh …
CSSシグネチャー 各index.htmlのbody要素にidを指定し、cssで対象idを指定して記述していくやり方。■利用シーン ページが遷移するたびに、body(背景色)を変更させる場合など■記述 ・各index.htmlのbody要素にidを付与 ・各index.htmlのtitleを変更 → neko-ca…
文字をアーチに沿って描く ■手番 1.楕円形ツールで円を描く 2.パス選択ツールで円の下を選択しdelete。(半月ができる) 3.パス上文字ツールで円の上にテキストを入力し、「cmd+shift+c」でセンタリングする。 ※左寄せはL,右寄せはRをCの代わりに入力 4.選択ツ…
セレクタ指定 jquery/1.12.4/jquery.min.jsあとで整理します。^：〜から始まる $：最後がvalueで終わる→[attribute$=’value’] gt：greater than attr：アターって読む。 ・JavaScriptはhtml操作、jQueryはcssの操作、必要に応じincludeの中身いじって軽量化 …
三項演算子 構文 条件式 ? 式1 : 式2※タイトルはPHPとついているが、演算子なので他言語でも同様
リキッドデザイン(2カラム)で１カラムのみ横幅を固定（width:calc(XX% - YYpx)） width:calc(XX% - YYpx);■利用シーン リキッドデザインでサイドバーに広告を載せており幅を固定し、コンテンツだけリキッドとする場合。 ※caniuseでほぼ全てのブラウザで利用…
ファイル全体がPHPである場合終了タグは記載しない 要約 ・ファイル全体がPHPである場合、終了タグは省略可(Zend FWではむしろNG並の勢い) ・HTML内の記載では必須。この埋め込みがあるため、省略選択の仕様になっている。 理由 ・終了タグ直後の改行（１行…
クエリ情報 ・URLの末尾に[キー名=値]で情報を渡せる。 ・詳細ページに飛んだり、その商品のレビューページに飛んだりするときに利用。 ・値は$_GET['キー']; ※連想配列として値が格納 ※valueはechoで出力が必要index.php <a href="detail.php?name=<?php echo $menu->getName() ?>"></a> detail.php ... <p></p>
継承 ・子クラスは親クラスのプロパティ/メソッドを利用可能。 逆に子でユニークなものを親は利用不可。 ・instanceofでどこのクラスか判別可。 ・コンストラクタをオーバーライドさせる場合、子クラスでは[parent::__construct(...)]とparentを使う。
クラス自身が持つプロパティとメソッド ■ポイント ・プレフィックスにstaticを付与する。 ・クラス内でクラスプロパティにアクセスする際は「self」使う。 ・クラスプロパティ/メソッドのアクセスは、[クラス名::xx;]■コード クラス定義ファイル name = $nam…
Apacheコマンド XAMMP 7.1.1-0(Apache Web Server)を利用================== 事前準備 利用環境 ・macOS Sierra 10.12.5■バージョン確認 httpd -v Server version : 2.4.25(Unix) Server build: Jan 20 2017 06:44:39 ■参考 http://ameblo.jp/ichitaka/entry…
カプセル化 カプセル化とは、クラスのプロパティとメソッドへのアクセスを制限することを言う。 子クラスからでも親クラスのprivateはアクセスできない。子クラスからアクセスする場合はprotectedを付与する。=== アクセス権 public:どこからでも可 protecte…
外部参照 ・記述が多くなって来た場合、「クラス定義用ファイル、データ生成用ファイル、ビュー用ファイル」など、ファイル分割を行う。 ・いまのところ、ファイル最上部に外部参照記述をする。 <html> <head>...</head></html>
endforeachを用いた制御文 ポイント ・他の制御文も同様の書き方で利用可能。 ・{が:、}がendforeachへ変わる。 ・foreach文の中で、通常のhtml要素を利用可能。 ・ここでは代表としてendforeachを扱う。わからないところ ・p要素を３回出力すると、p要素にm…
オブジェクト指向の基礎 <body> <div class="container"> <h1></h1> <p> name = $name; } public $name; //プロパティ public function havePen(){ //メソッド echo 'I have a pen<br>'; } public function hello(){ …</p></div></body>
MariaDB(mySQL)の基本コマンド XAMMP 7.1.1-0(MariaDB 10.1.21)を利用================== 事前準備 利用環境 ・macOS Sierra 10.12.5■環境変数にパスを追加 // .bash_profileにパスを追加 echo export PATH='/Applications/XAMPP/xamppfiles/bin:$PATH' >> ~…
入力フォームのテンプレート ■index.php(入力画面) <form action="recieve.php(url送信先)" method="post"> Email <input type="text" name="email"> 内容 <textarea name="content"></textarea> 年齢 <select name="age"> <option>10代</option> <option>20代</option> <option>30代</option> </select> <input type="submit" value="送信"> </form>
PHP関数の基本 ■関数の作成 function functionName($arg){ echo $arg * $arg; return $arg + $arg; }■関数の呼び出し functionName(arg);■関数 ・strlen('Hatena') 文字列の文字数を返す ・count($colors); 配列の要素数を返す ・rand(1,5) 1~5までの整数を…
ライブトレース 絵はうまくかけないけど、写真をもとにフレームを利用したい場合に活用。 ■手番 1.画像を取得しカンバスに配置 2.背面準備 ・写真の下にレイヤーをつくり、白塗りの長方形をつくる ・「効果＞パスの変形＞ジグザク」で切手風にする。 ・「効…
PHP基本文法 ・コメント １行→// or # N行→/* ~ */・データの種類（大きく） 整数 int 不動小数点 float,double 文字列 string 真偽値 boolean・変数 $ $name = 'Hatena-san';・文字列の連結 echo $study.'PHP'; echo $study.$language; $name = 'Hatena'; $…
いい感じのウェブサイト〜企業サイト〜 企業サイトで印象に残ったものを記載していきます。www.tokyometro.jp ・とにかく動きが多く、クリックしたくなる。 ・全体を通してキャラクターを活かした親しみやすさが印象的。 ・ローディングやファビコンには鈴、…
いい感じのウェブサイト〜お酒〜 お酒に絡んだもので印象に残ったサイト記載していきます。www.nikka.com ・自分の好きなウイスキー（ピュアモルト） ・Imgはhoverした際にopacityがかかるようになってます。逆パターンの場合、「強調」を強く表現したい際に…
