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

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

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までの整数を…