ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

MySQL007 様々な条件で抽出(2)

chap8 続き■複数条件を指定した選択(AND/OR) ・AND select * from chap8 where uria>=50 and uria select * from chap8 where bang like '%1' and tuki=4;・OR select * from chap8 where uria200;・複合 select * from chap8 where bang like '%1' and tu…

MySQL006 様々な条件で抽出

MySQL006 様々な条件で抽出 chap8■データ準備 create table chap8 (bang varchar(10), uria int, tuki int); insert into chap8 values('A103',101,4); insert into chap8 values('A102',54,5); insert into chap8 values('A104',181,4); insert into chap8 …

MySQL005 コマンド5 (コピー)

chap7・カラム構造+データのコピー ーselectした結果から構造・データをコピーし新規テーブル作成する。 ーauto_incrementなど一部属性はコピーされない ★注意create table tbcp1 select * from tb1;・カラム構造のコピー ー構造のみコピー ーデータはコピー…

MySQL004 コマンド4 (index)

chap6 続き・最初からデータが入ってるカラム ※データ挿入時のデフォルト値を指定 create table tb3 (gender varchar(10) default '-', name varchar(20) default '名無しさん'); →insert into tb3(gender) values('男'); →insert into tb3(name) values('神…

MySQL003 コマンド3 (primaryKey, uniqueKey, 自動採番)

mysql コマンド3 主キー(Primary Key)■chap6 continue○主キー(primary key) ーユニークであること ー重複がない ーNULLにできない・主キーを設定してテーブル作成 create table tb2 (pk int primary key, testClm varchar(10)); →insert into tb2 values(1,'…

MySQL002 コマンド2 (alter table)

mysql コマンド2alter table tableName [modify/add/change/drop] ~ ■chap5:データ型とデータ入力 データ型 1.数値 int, tinyint, smallint, mediumint,bigint,float,double,decimal 暫定:整数はint、小数点以下含むものはdoubleを利用2.文字列 char,varch…

MySQL001 コマンド1

mysql コマンド■ユーザ作成 ・ログイン mysql -u root -p mysql -u root -proot mysql db1 -u root -p・ユーザ作成 create user kaname identified by ‘madoka’; ※’の文字化けに注意・権限付与 grant all on *.* to madoka; 全権限付与・ユーザ削除 drop use…

Git001 git branch

Git

主にbranchコマンドを記載■git branch ・ローカルブランチの一覧表示 git branch・リモートブランチの一覧表示 git branch -r・ローカル/リモート全てのブランチを一覧表示 git branch -a・新しいリモートブランチを自分のローカルに持ってくる git branch n…

SSH公開鍵認証の設定でやること

RSA 鍵の生成から配置、ログインまで■だいたいのやること ・鍵の生成 ・鍵がセットになってるか確認 ・鍵を配置 ・サーバ側でrsa公開鍵認証を有効にする(無効の場合) ・鍵のパーミッション設定 ・config設定でsshログインの簡素化(必要に応じ)■参考 http://q…

FuelPHP002 Apacheモジュール「mod_rewrite」機能

Apacheモジュール「mod_rewrite」機能 ■意図 検索エンジン対策などを考慮した場合、動的に生成されたページとわかるURLだと望ましくない場合があるため、対象機能でURL読み替えを行う。 ※oil createでpjt作成した場合は、デフォルトで記載済み。■ファイル格…

web027 上付き/下付き文字で利用する要素(sup/sub) * ...

上付き/下付き文字で利用する要素(sup/sub) * ... ・supタグはsuperscriptの略で、上付き文字を表す際に使用します。 ・下付き文字はsub(subscription)を利用する。html <p>必須項目の印<sup style="color: red;">*</sup></p> ■参考 <sup>-HTML5タグリファレンス 上付き文字を表すsup要素>テキストに意</sup>…

FuelPHP001 FuelPHPの概要

FuelPHPの概要■コントローラ----------------------------- ・コントローラは「class」として実装する。 ・コントローラクラス内のメソッドを「アクション」と呼ぶ。 ・コントローラの役割はおおきく3つある。 1.通常 Controllerクラスを拡張して作成する。…

jQuery008 スクロールボタン

スクロールボタン ■考え方 とある酒屋さんのコンテンツを想定した場合 ・画面をローディング時、「offsetメソッドで高さを取得」し変数へ入れる。 ・クリックイベント時、animate({scrollTop: topOffset }で、取得した高さまで移動する。※注意として、ready…

web026 ハンバーガーメニュー

ハンバーガーメニュー ■考え方 ・span要素のみで、cssで装飾していく。 ・positionで配置 ・擬似クラス(::before,::after)で要素を追加する。 ・::afterは::beforeの直下に配置されるため、marginの取り方をうまく計算する。 ・表示されるコンテンツは、jQue…

jQuery007 カルーセル「Slick」

カルーセル「Slick」 ■メモ ・RWD対応してるプラグイン ・カスタマイズが楽。css,jsなど必要なものはマスターからコピーして所定のディレクトリで管理。それに合わせてパス修正。 ・.slider,.slick-slideクラスあたりでcssを整える。 ・埋め込みは外部ファイ…

jQuery006 モーダル「Lightbox」

プラグイン「Lightbox」 公式よりDL。 Lightbox サンプルのindex.htmlがあるため、使いやすい形に修正する。 今回は画像はサムネイルとメインの2つを用意。 ■コード html <html lang="en-us"> <head> <meta charset="utf-8"> <title>Lightbox Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </meta></head></html>

jQuery005 スライダー「bxSlider」

プラグイン「bxSlider」 ■インストール(公式抜粋) Step 1: Link required files →HTMLでjQuery,bxsliderjs,cssを読み込み Step 2: Create HTML markup →スライドさせたいイメージをマークアップ。 Step 3: Call the bxSlider →.bxsliderクラスに対してslid…

Mac001 ファインダーからパスをコピー

Mac

ファインダーからパスをコピー ■手番 ・対象ファイル/ディレクトリを、「control+右クリック」でコンテキストメニュー表示 ・その状態で⌥(option / alt)を押下 ・[◯◯のパス名をコピー]へ表示が切り替わる。※El Capitan からは標準でその機能は実装済みの模様…

Photoshop007 ブラシのプリセット追加

ブラシのプリセット追加 ■手番 事前準備 ・フリーのブラシのプリセットファイル(.abr)をダウンロードする。 ・.abrファイルをプリセット格納場所に移動する。 /Applications/Adobe Photoshop CC 2017/Presets/Brushes/~~.abr ココ★ ※Photoshopの再起動が必要…

Photoshop006 「エッジ(境界線を調整)機能」で女性の髪を綺麗に合成する

エッジ(境界線を調整)機能」で女性の髪を綺麗に合成する ■手番 ・対象人物を「クイック選択ツール」で枠を取る。 ※背景と図の反転は「cmd+shift+i」 ・ツールバーの「境界線を調整」を選択。 ※最新verの「選択とマスク」 ・以下の項目を調整し、OKを押下す…

web025 CSSのみでのキャプションエフェクト

css

CSSのみでのキャプションエフェクト ■考え方 ・positionレイアウト ・キャプションはimgの下に配置しておき、overflow:hidden;で非表示にしておく。 ・hoverでpositionのbottomを変更し表示する。 ・リセットcssにfigure,figcaptionなど入れ忘れに注意。■コ…

Illustrator005 デザインカンプの書き方

デザインカンプの書き方 ■ポイント ・pxで設計するためカンプができたら実装はただの作業になる。 ・ファイル新規作成の際に「ピクセルグリッドに整合」を外す ・一番最初にコンテナーにあたる一番大枠を長方形ツールで描く。 →オブジェクトは「cmd+5」でガ…

jQuery004 要素内外への要素挿入(prepend,append,before,after)

要素内外への要素挿入(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>

jQuery003 表示・非表示のメソッド

表示・非表示のメソッド ■ポイント ・主要なメソッドの種類 hide,show slideUp,slideDown toggle fadeIn,fadeOut ・時間の指定 ('slow'),('2000') ・アニメーション実行中は次の処理を受け付けない $('#box:not(:animated)').slideUp('2000');■コード html埋…

jQuery002 アコーディオン

アコーディオン ■ポイント ・利用:Google CDN: jQuery 1.12.4 ・N件同一要素がある中で、クリックされた箇所の要素の指定の仕方 ※隣接セレクタの使い方 ※$('+dd',this)、$(this).next()、etc... ・選択中の要素に色をつける(クラスを付け外しする) ※addCl…

web024 さくらVPSにPHP環境構築

VPS

さくらVPSにPHP環境構築 やったこと■環境 CentOS6.9■ユーザ作成 -uid,pw作成 -wheelGr add -sudoユーザの環境変数設定(sbin,usr/sbin,usr/local/sbin) -sshのポート変更(/etc/ssh/sshd_config)■環境日本語化 -/etc/sysconfig/i18n■iptables -ポートフィルタ…

web023 ヒーローヘッダー(マルチイメージ)

ヒーローヘッダー(マルチイメージ) ■考え方 ・2カラム(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>

web022 hover(border-bottom)でリストがずれないやり方

hover(border-bottom)でリストがずれないやり方 ■考え方 あらかじめborder-bottomを入れておく。 色は背景色ど同色にしておき、hover時に上書きで色を変更する。 ※レスポンシブ対応でliを上下させた際にガタガタとカラム落ちする場合があるためそれの防止の…

web021 ヒーローヘッダー

ヒーローヘッダー ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。(引用) ■考え方 ・ビューポートの高さを考慮( E { height: [x%/100%]vh …

web020 CSSシグネチャー

CSSシグネチャー 各index.htmlのbody要素にidを指定し、cssで対象idを指定して記述していくやり方。■利用シーン ページが遷移するたびに、body(背景色)を変更させる場合など■記述 ・各index.htmlのbody要素にidを付与 ・各index.htmlのtitleを変更 → neko-ca…

Illustrator004 文字をアーチに沿って描く

文字をアーチに沿って描く ■手番 1.楕円形ツールで円を描く 2.パス選択ツールで円の下を選択しdelete。(半月ができる) 3.パス上文字ツールで円の上にテキストを入力し、「cmd+shift+c」でセンタリングする。 ※左寄せはL,右寄せはRをCの代わりに入力 4.選択ツ…

jQuery001 セレクタ指定

セレクタ指定 jquery/1.12.4/jquery.min.jsあとで整理します。^:〜から始まる $:最後がvalueで終わる→[attribute$=’value’] gt:greater than attr:アターって読む。 ・JavaScriptはhtml操作、jQueryはcssの操作、必要に応じincludeの中身いじって軽量化 …

PHP012 三項演算子

PHP

三項演算子 構文 条件式 ? 式1 : 式2※タイトルはPHPとついているが、演算子なので他言語でも同様

web019 リキッドデザイン(2カラム)で1カラムのみ横幅を固定(width:calc(XX% - YYpx))

css

リキッドデザイン(2カラム)で1カラムのみ横幅を固定(width:calc(XX% - YYpx)) width:calc(XX% - YYpx);■利用シーン リキッドデザインでサイドバーに広告を載せており幅を固定し、コンテンツだけリキッドとする場合。 ※caniuseでほぼ全てのブラウザで利用…

PHP011 ファイル全体がPHPである場合終了タグは記載しない

PHP

ファイル全体がPHPである場合終了タグは記載しない 要約 ・ファイル全体がPHPである場合、終了タグは省略可(Zend FWではむしろNG並の勢い) ・HTML内の記載では必須。この埋め込みがあるため、省略選択の仕様になっている。 理由 ・終了タグ直後の改行(1行…

PHP010 クエリ情報

PHP

クエリ情報 ・URLの末尾に[キー名=値]で情報を渡せる。 ・詳細ページに飛んだり、その商品のレビューページに飛んだりするときに利用。 ・値は$_GET['キー']; ※連想配列として値が格納 ※valueはechoで出力が必要index.php <a href="detail.php?name=<?php echo $menu->getName() ?>"></a> detail.php ... <p></p>

PHP009 継承

継承 ・子クラスは親クラスのプロパティ/メソッドを利用可能。 逆に子でユニークなものを親は利用不可。 ・instanceofでどこのクラスか判別可。 ・コンストラクタをオーバーライドさせる場合、子クラスでは[parent::__construct(...)]とparentを使う。

PHP008 クラス自身が持つプロパティとメソッド

クラス自身が持つプロパティとメソッド ■ポイント ・プレフィックスにstaticを付与する。 ・クラス内でクラスプロパティにアクセスする際は「self」使う。 ・クラスプロパティ/メソッドのアクセスは、[クラス名::xx;]■コード クラス定義ファイル name = $nam…

WebServer001 Apacheコマンド

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…

PHP007 カプセル化

カプセル化 カプセル化とは、クラスのプロパティとメソッドへのアクセスを制限することを言う。 子クラスからでも親クラスのprivateはアクセスできない。子クラスからアクセスする場合はprotectedを付与する。=== アクセス権 public:どこからでも可 protecte…

PHP006 外部参照

外部参照 ・記述が多くなって来た場合、「クラス定義用ファイル、データ生成用ファイル、ビュー用ファイル」など、ファイル分割を行う。 ・いまのところ、ファイル最上部に外部参照記述をする。 <html> <head>...</head></html>

PHP005 endforeachを用いた制御文

PHP

endforeachを用いた制御文 ポイント ・他の制御文も同様の書き方で利用可能。 ・{が:、}がendforeachへ変わる。 ・foreach文の中で、通常のhtml要素を利用可能。 ・ここでは代表としてendforeachを扱う。わからないところ ・p要素を3回出力すると、p要素にm…

PHP004 オブジェクト指向の基礎

オブジェクト指向の基礎 <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>

DB001 MariaDB(mySQL)の基本コマンド

DB

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' >> ~…

PHP003 入力フォームのテンプレート

PHP

入力フォームのテンプレート ■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>

PHP002 PHP関数の基本

PHP

PHP関数の基本 ■関数の作成 function functionName($arg){ echo $arg * $arg; return $arg + $arg; }■関数の呼び出し functionName(arg);■関数 ・strlen('Hatena') 文字列の文字数を返す ・count($colors); 配列の要素数を返す ・rand(1,5) 1~5までの整数を…

Illustrator003 ライブトレース

ライブトレース 絵はうまくかけないけど、写真をもとにフレームを利用したい場合に活用。 ■手番 1.画像を取得しカンバスに配置 2.背面準備 ・写真の下にレイヤーをつくり、白塗りの長方形をつくる ・「効果>パスの変形>ジグザク」で切手風にする。 ・「効…

PHP001 PHP基本文法

PHP

PHP基本文法 ・コメント 1行→// or # N行→/* ~ */・データの種類(大きく) 整数 int 不動小数点 float,double 文字列 string 真偽値 boolean・変数 $ $name = 'Hatena-san';・文字列の連結 echo $study.'PHP'; echo $study.$language; $name = 'Hatena'; $…

website004 いい感じのウェブサイト〜企業サイト〜

いい感じのウェブサイト〜企業サイト〜 企業サイトで印象に残ったものを記載していきます。www.tokyometro.jp ・とにかく動きが多く、クリックしたくなる。 ・全体を通してキャラクターを活かした親しみやすさが印象的。 ・ローディングやファビコンには鈴、…

website003 いい感じのウェブサイト〜お酒〜

いい感じのウェブサイト〜お酒〜 お酒に絡んだもので印象に残ったサイト記載していきます。www.nikka.com ・自分の好きなウイスキー(ピュアモルト) ・Imgはhoverした際にopacityがかかるようになってます。逆パターンの場合、「強調」を強く表現したい際に…