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

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

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

Illustrator

デザインカンプの書き方

f:id:neko_kick_panch:20170531013815p:plain
f:id:neko_kick_panch:20170531013828p:plainf:id:neko_kick_panch:20170531013840p:plain


■ポイント
・pxで設計するためカンプができたら実装はただの作業になる。
・ファイル新規作成の際に「ピクセルグリッドに整合」を外す
・一番最初にコンテナーにあたる一番大枠を長方形ツールで描く。
　→オブジェクトは「cmd+5」でガイドに変換。表示＞ガイドロック解除。
　→(ダイレクト)選択ツールを利用し、ガイドの辺をpx単位で,正確に下へ横へとコピーしていく。

・ガイドはオブジェクトを吸着させる。吸着は「表示＞スマートガイド」
・borderのpxサイズに注意。+-5pxを考慮してガイド作成する。
・挿入画像(.psd)は、オプションチェックはなしでpsdを配置。
　左上アンカーポイントでぽちっ！
・画像配置で、親オブジェクトを起点に画像を一致させる方法
→両方選択ツールで選択。基準ボックスを選択。整列ツールで整列。


■参考
IllustratorでWeb向け、ピクセルベースの作業を行う上での設定（完全版） - DTP Transit
https://bge.jp/web-illustrator/
イラレでWebデザインってほんとにできるの？ | Adobe Creative Station

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

jQuery

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

f:id:neko_kick_panch:20170531011624p:plain

■ポイント
・対象要素の外側：before(); afret();
・対象要素の内側：prepend(); apend();
・テキストの変更：text();

■コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの基本</title>
<meta name="description" content="">
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
</head>

<style>
html,body,h1,h2,p,ul,li{
  margin:0;
  padding:0;
}
header{  padding: 40px;}
</style>

<body>

<script>
$(document).ready(function(){
  $('#text').text('テキストの変更');
  $('#prepend').prepend('<small>Prependで追加</small>');
  $('#append').append('<small>appendで追加</small>');
$('#text').before('<small>before()で#textの前に追加</small>');
  $('#text').after('<small>after()で#textの後に追加</small>');
});
</script>

<div class="container">
<header>
<h1>jQuery練習</h1>
<p id="text">基本とセレクタ練習</p>
<h2 id="prepend">:Prepend</h2>
<h2 id="append">Append:</h2>
</header>
<nav>
<ul><a></a></ul>
</nav>
</div>
</body>
</html>

■参考
本：jQueryデザイン入門

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

jQuery

表示・非表示のメソッド

f:id:neko_kick_panch:20170531011056p:plain

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

■コード
html埋め込み

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの基本</title>
<meta name="description" content="">
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
</head>

<style>
html,body,h1,h2,p,ul,li{
  margin:0;
  padding:0;
}
body{
  padding: 20px;
}
div{
  width: 200px;
  height: 200px;
  background: red;
  display: none;
}
</style>

<script>
$(document).ready(function(){
  $('#btn1').on('click',function(){
    $('#box:not(:animated)').slideDown('2000');
  })
  $('#btn2').on('click',function(){
    $('#box:not(:animated)').slideUp('2000');
  })
  $('#btn').on('click',function(){
    $('#box').toggle(2000);
  })
});

/*
hide,show
slideUp,slideDown
toggle
fadeIn,fadeOut
*/
</script>

<body>
<button id="btn">赤い箱を表示/非表示</button>
<button id="btn1">表示ボタン</button>
<button id="btn2">非表示ボタン</button>
<div id="box">
</div>
</body>
</html>

■参考
本：jQueryデザイン入門

jQuery002　アコーディオン

jQuery

アコーディオン

f:id:neko_kick_panch:20170531005358p:plain

■ポイント
・利用：Google CDN: jQuery 1.12.4
・N件同一要素がある中で、クリックされた箇所の要素の指定の仕方
　※隣接セレクタの使い方
　※$('+dd',this)、$(this).next()、etc...
・選択中の要素に色をつける（クラスを付け外しする）
　※addClass(),removeClass()
・if文の条件式
　※if ( $('+dd',this).css('display')=='block' )


■コード
html 埋め込み

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Accordionの基本</title>
<meta name="description" content="Accordionの基本を学びます">
<link href="css/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<style>
html,body,h1,h2,p,ul,li{
  margin:0;
  padding:0;
}
body{
  padding: 20px;
}
dl{
  width: 400px;
  margin: 0 auto;
}
dl dt{
  background-color: #1EE494;
  cursor: pointer;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  border-bottom: 1px solid #fff;
}
dl dd{
  border: 1px solid #222;
  height: 300px;
  margin: 0;
  display: none;
}
dl:first-of-type dd{
  display: block;
}
.open{
  background-color: #e1396c;
}

</style>
<script>
$(document).ready(function(){
//$('dd').css('display','none');

$('dd:not(:first-of-type)').css('display','none');

$('dt').on('click',function(){
  if ( $('+dd',this).css('display')=='block' ) {
    //openされているdt自身をクリックした時の処理
    $('+dd',this).slideUp();
  }else{
    //全体の処理
    $('dd').slideUp();
    $('dt').removeClass('open');
    //クリック箇所の処理
    //$('+dd',this).slideDown();
    $(this).next().slideDown();
    $(this).addClass('open');
  }
});

});/* ready */
</script>

<body>
<div id="box">

<dl>
<dt class="open">坊ちゃん</dt>
<dd>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）</dd>
</dl>

<dl>
<dt>徒然草</dt>
<dd>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）</dd>
</dl>

<dl>
<dt>lorem ipsum</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
</dl>

</div>
</body>
</html>

■参考
jQuery CDN
Web制作小物ツール - dounokouno.com
本：jQueryデザイン入門

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
-ポートフィルタリング

■Apache 2.2.15(Unix)
-ServerTokens
-ServerAdmin
-ServerName
-Options Indexes
-ServerSignature

■MySQL v5.1.73
-文字コード(utf-8)
-rootパスワード設定

■PHP 5.3.3 -> Zend Engineer v2.3.0
-date.timezone = “Aisa/Tokyo”

■vsftpd 2.2.2-24.el6
-install
※vsftpd.confの設定項目と各ファイル（ftpusers,user_list,chroot_list）の関係性に注意

■vim
yy=カーソル行をコピー
p=貼り付け
/検索ワード　※nで次を検索
?検索ワード

コマンドのエイリアス
vi .bashrc
設定ファイル反映(.bashrc,.bash_profile)
source ~/.bashrc

/* ------------------------------ 参考 */
http://qiita.com/kazukichi/items/6b1b89ecdba05e8710e8
http://qiita.com/narumi_/items/179048afb48f64f45c6e
http://www.obenri.com/_webserver/about_apache.html
http://qiita.com/honeniq/items/201156650310c4968c3a
https://help.sakura.ad.jp/hc/ja/sections/201976962-%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E3%81%AE%E8%A8%AD%E5%AE%9A
http://qiita.com/colorrabbit/items/11382273624621f3caee

未実施

■phpMyAdmin

web023　ヒーローヘッダー（マルチイメージ）

Responsive html css

ヒーローヘッダー（マルチイメージ）

f:id:neko_kick_panch:20170527012333p:plain

■考え方
・２カラム(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 class="text">
    <h2>Waterfall</h2>
    <p>~Episode2~</p>
  </div>
  </div>
  <div class="ph btmL">
  <div class="text">
    <h2>Lizard</h2>
    <p>~Episode3~</p>
  </div>
  </div>
  <div class="ph btmM">
  <div class="text">
    <h2>Season</h2>
    <p>~Episode4~</p>
  </div>
  </div>
  <div class="ph btmR">
  <div class="text">
    <h2>Tori</h2>
    <p>~Episode5~</p>
  </div>
  </div>
</div>
<script>
/* forAnimationArea */
</script>

</body></html>

css

body{
  overflow: hidden;
}
/* ----------------------- header */
header {
  width: 200px;
  height: 100vh;
  background-color: #343434;
  float: left;
  position: relative;
}
header img{
  width: 180px;
  height: 180px;
  /* ---------------imgの中央寄せ*/
  position: absolute; 
  top: 0;
  left:0;
  right:0;
  bottom: 0;
  margin: auto;
}
/* ----------------------- .container */
#container{
  width: calc(100% - 200px);
  height: 100vh;
  background-color: antiquewhite;
  float:right;
}
.ph{
  height: 50vh;
  float:left;
  position: relative;
}
.topL{
  width: 50%;
  background:url(../img/frog.png) no-repeat center center;
  background-size: cover;
}

.topR{
  background: url(../img/taki1.png) no-repeat center center;
  background-size: cover;
  width: 50%;
}
.btmL{
  background: url(../img/tokage.png) no-repeat center center;
  background-size: cover;
  width: 33.3%;
}
.btmM{
  background: url(../img/taki2.png) no-repeat center center;
  background-size: cover;
  width: 33.3%;
}
.btmR{
  background: url(../img/bird.png) no-repeat right;
  background-size: cover;
  width: 33.3%;
}
/* -----------------------animarion-text-area */
.text{
  text-align: center;
  height: 15vh;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  position: absolute;
  bottom: 0vh;
}
.text h2{
  padding-top: 15px;
  margin-bottom: 8px;
}
.text h2,.text p{
  font-family: 'Vollkorn', serif;
  letter-spacing: 1px;
}

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

html css

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

f:id:neko_kick_panch:20170526002546p:plain

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

■サンプル

<nav>
<ul>
<li><a href="#">AA</a></li>
<li><a href="#">BB</a></li>
<li><a href="#">CC</a></li>
</ul>
</nav>

nav{
  width: 300px;
  height: 50px;
  background-color: #ff0;
  overflow: hidden;
  margin: 10px auto;
}
nav li{
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  border-right: 1px solid #fff;
  float:left;
  border-bottom: 2px solid #ff0; /*初期値で入れておく*/
}
nav li:hover{
  border-bottom: 2px solid #220;/*hoverで色変更*/
}
nav li:last-child{ border-right: none;}

/*本来はa要素に対してborderをかけておくのが良いが、
サンプルなためliに記載*/