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

ITに関することいろいろめも。たまにアニメ。

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 コマンド■事前に環境変数へ設定 cd /Users/userName vi .bash_profile i //insert export PATH=$PATH:/Applications/MAMP/Library/bin source .bash_profile echo $path //追加を確認 ■ユーザ作成 ・ログイン mysql -u root -p mysql -u root -proot m…

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行…