初心者からのweb勉強

2012-08-30 BASIC認証 for MAC

BASIC認証 for MAC

BASIC認証をするためには下記二つのファイルを作成する必要があるようです。
WINMACでは若干扱い方が違うのですが、ここではMACでのやり方をメモしておきます。

.htaccess 
.htpasswd


➀フルパスの確認
1,下記内容を記述したphpファイルを作り、
  フルパスを知りたい(basic認証したい)箇所にアップデートする(freewebなど)

<?php
echo __FILE__;
?>

2,ブラウザにフルパスが表示される。


➁ドットから始まるファイルを表示させる
.htaccessなどのドットから始まるファイルはMACでは見れないため.....
1,ターミナルを起動し、下記入力すると見れるようになる。

defaults write com.apple.finder AppleShowAllFiles true killall Finder

2.すべての作業が終わった後は、ファイルを再度非表示にするためターミナルに下記入力するのを忘れないように。

defaults write com.apple.finder AppleShowAllFiles false
killall Finder


.htaccessファイルの作成
1,➁で確認したフルパスを記述した下記内容のファイルを.htaccess の名前で保存。(拡張子なし)

AuthType Basic
AuthName "Input your ID and Password."
AuthUserFile .htpasswdへのフルパス
require valid-user

➃.htpasswdの作成
1,パスワード作成ツール PHP SPOT でパスワード作成。(パスワード暗号化)
2,1で作成したパスワードを.htpasswdの名前でファイル作成。(拡張子なし)


アップデート
BASIC認証したいディレクトリアップデート


○その他、.htaccessファイルの作成サイト.htaccess Editor

Dreamweaver (mac)のパーミッションの変更方法

ファイルパレットで表示をリモートサイトにして、ファイルを右クリックまたはCTRL+クリック。
権限の設定で変更。

ローカルファイルの所からは変更できないので注意!!

2012-08-15 PHP, CSS3 MEMO

PHP MEMO01

プレビュー文字化け解消するために 「php.ini」を編集
行頭の「; セミコロン」を削除し、UTF-8に変更。

777
;default_charset = "iso-8859-1"

default_charset = "UTF-8"

1774
;mbstring.language = Japanese

mbstring.language = UTF-8

1780
;mbstring.internal_encoding = EUC-JP

mbstring.language = UTF-8

CSS3 メモ01

-ベンダープレフィックス-
CSS3では「-moz-」や「-webkit-」などのベンダープレフィックスと呼ばれる文字列を付与する必要がある。

スタイルシートコピペすると自動的に作ってくれるサイトもあるらしい。
使い方は→

2012-08-08 スマートフォンサイト

スマートフォンサイト01

● テーマ変更
● リスト表示


f:id:ponkan7:20120808175946p:image

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css">
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.js"></script>
</head>

<body>
<div data-role="page" id="index" data-theme="c">
<div data-role="header" data-theme="b">
<h1>TOPページ</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">メニュー</li>
<li><a href="#about"><h3>このサイトについて</h3></a></li>
<li><a href="#seminar"><h3>セミナー情報</h3></a></li>
<li><a href="#access"><h3>アクセス</h3></a></li>
<li><a href="#contact"><h3>お問い合わせ</h3></a></li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="about">
<div data-role="header">
<h1>このサイトについて</h1>
</div>
<div data-role="content">
<p><a href="#index">TOPページ</a></p>
</div>
<div data-role="footer">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="seminar">
セミナー情報
</div>
<div data-role="page" id="access">
アクセス
</div>
<div data-role="page" id="contact">
お問い合わせ
</div>
</body>
</html>

●MEMO●

デザイン(色)カスタム...[data-theme](ページ要素に対して)

リスト表示...
[data-role="content"](コンテンツ領域内)
[data-role="listview"](ul要素に対し)

リスト見出し...
[data-role="list-divider"](li要素に)

立体的角丸
...[data-inset="true"](ul要素に)


● aboutページの作成

f:id:ponkan7:20120808183730p:image

f:id:ponkan7:20120808183730p:image

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css">
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="c">
<div data-role="header" data-theme="b">
<h1>TOP</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">menu</li>
<li><a href="#about"><h3>about</h3></a></li>
<li><a href="#seminar"><h3>workshop</h3></a></li>
<li><a href="#access"><h3>access</h3></a></li>
<li><a href="#contact"><h3>contact</h3></a></li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="about" data-theme="c">
<div data-role="header" data-theme="b">
<h1>About</h1>
</div>
<div data-role="content">
<h2 class="h1">このサイトについて</h2>
<p>海外からのペットグッズを取り扱っています</p>
<h3 class="h1">ペットショップ○○について</h3>
<p>主に犬の輸入おもちゃ、服などを扱っています。</p>
<p>実店舗とネットでの販売を行っております。</p>
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 Smartphone</h4>
</div>
</div>

<div data-role="page" id="seminar">
workshop
</div>
<div data-role="page" id="access">
access
</div>
<div data-role="page" id="contact">
contact
</div>
</body>
</html>

●MEMO●

-classのつけ方について-
jQuery Mobileのようなフレームワークでは、フレームワークが定めるルールに沿ってマークアップする必要があるため、HTMLドキュメント内の見出し要素と、見た目上の見出しレベルを一致できない場合がある。
見た目としての見出しレベルをclass属性で定義し、CSSで記述したスタイルを適用している。
○参考サイト○ http://www38.atwiki.jp/hear_br0wn/m/pages/79.html?

2012-08-07 スマートフォン/Youtube,Map 挿入

Youtube動画を挿入

1,Youtubeの共有ボタンを押し、埋め込みコードをクリックする。
2,[動画が終わったら関連動画を表示する]を解除し、サイズをカスタムで[幅300×高さ169]設定する。
3,取得したコードを挿入して完了!

Googleマップ挿入
1,Googleマップで挿入したい住所を表示し、リンクボタンをクリックするとURLが表示。
2,下記内容を記述

/* Googleマップのスタイル */
.googlemap {
    border: none; /* borderを削除 */
}

2012-08-04 CSSのみでポップアップ画像を表示

CSSのみでポップアップ画像を表示


-SAMPLE-
f:id:ponkan7:20120831194005p:image

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<title>CSSでポップアップ画像を表示</title>
<style type="text/css">
<!--
#wrapper {
	margin: 50px;
	padding: 30px 0 0 15px;
	height: 508px;
	width: 910px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	font-size:12px;
}
.block1,
.block2 {
	display: inline;
	float: left;
	margin: 0 14px 0 0;
	height: 197px;
	width: 160px;
}
img {
	border: none;
}
.photo, .photo2 {
	position: relative;
	top: 0;
	left: 0;
	width: 160px;
}
.photo a .large {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
	z-index: -10;
}
.photo a.popup,
.photo a.popup:visited {
	display: block;
	left: 0;
	top: 0;
	width: 160px;
}
.photo a.popup:hover {
	background-color: #fff;
}
.photo a.popup:hover .large {
	display: inline;
	position: absolute;
	left: 0;
	top: -15px;
	height: 220px;
	width: 285px;
	z-index: 100;
}
.photo2 a img.large2 {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	width: 1px;
}
.photo2 a.popup:hover .large2 {
	display: block;
	position: absolute;
	left: -125px;
	top: -15px;
	height: 220px;
	width: 285px;
	z-index: 1000;
}
/*IE6 7*/
/*↓これを入れないとIE6,7Sでポップアップしないらしい*/
.photo a.popup:hover {
	background-color: #fff;
}
-->
</style>
</head>
<body>
<div id="wrapper">

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/01.jpg" width="160" height="138" alt="" /><img src="img/01.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Temperate Rainforest Olympic</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/02.jpg" width="160" height="138" alt="" /><img src="img/02.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Close-Up of Moth on Tree Bark Mont-Saint-Bruno</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/03.jpg" width="160" height="138" alt="" /><img src="img/03.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Koke</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/04.jpg" width="160" height="138" alt="" /><img src="img/04.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Understory plants in rainforest</p>
</div>

<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="img/05.jpg" width="160" height="138" alt="" /><img src="img/05.jpg" width="285" height="220" alt="" class="large2" /></a>
</div>
<p class="caption">Leaf</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/06.jpg" width="160" height="138" alt="" /><img src="img/06.jpg" width="285" height="220" alt="" class="large" /></a>
</div> 
<p class="caption">Clover</p>
</div>

<div class="block1">
<div class="photo">
<a href="shop/index.html#remontop2" title="" class="popup"><img src="img/07.jpg" width="160" height="138" alt="" /><img src="img/07.jpg" width="285" height="220" alt="" class="large" /></a>
</div>  
<p class="caption">Trillium Lyndeshores Conservation Area</p>
</div>

<div class="block1">
<div class="photo">
<a href="#" title="" class="popup"><img src="img/08.jpg" width="160" height="138" alt="" /><img src="img/08.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">Close-Up of Foliage </p>
</div>

<div class="block1">
<div class="photo">
<a href="shop/index.html#kakitop2" title="" class="popup"><img src="img/09.jpg" width="160" height="138" alt="" /><img src="img/09.jpg" width="285" height="220" alt="" class="large" /></a>
</div>
<p class="caption">sunagoke</p>
</div>

<div class="block2">
<div class="photo2">
<a href="#" title="" class="popup"><img src="img/10.jpg" width="160" height="138" alt="" /><img src="img/10.jpg" width="285" height="220" alt="" class="large2" /></a>
</div> 

<p class="caption">Cress</p>
</div> 
</div>
</div>
</body>
</html>

2012-08-03 JQuery 横スライド

JQuery 横スライド

JQuery/ 横スライド
-SAMPLE-

・下記サイトよりダウンロードjsファイルに入っている easySlider1.7.js のみ使用。)
Easy Slider 17 Numeric Navigation jQuery Slider

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jquery easySlider</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(function(){
  $("#slider").easySlider({
	controlsShow:false,
	speed:1200,
	auto:true,
	continuous:true
  });
});
</script>
<style type="text/css">
<!--
#slider ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
}
#slider li{
 width: 640px;
 height: 427px;
}
-->
</style>
</head>
<body>
<div id="slider">
<ul>
<li><img src="images/01.jpg" /></li>
<li><img src="images/02.jpg" /></li>
<li><img src="images/03.jpg" /></li>
<li><img src="images/04.jpg" /></li>
</ul>
</div>
</body>
</html>




JQuery NIVO_slider
-SAMPLE-

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<head>
<title>Nivo Slider</title>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen">
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen">
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen">
<link rel="stylesheet" href="demo/style.css" type="text/css" media="screen">
</head>
<body>
<div id="wrapper">

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/01.jpg" data-thumb="images/01.jpg" alt="">
<a href="http://dev7studios.com"><img src="images/02.jpg" data-thumb="images/02.jpg" alt="" title="This is an example of a caption"></a>
<img src="images/03.jpg" data-thumb="images/03.jpg" alt="" data-transition="slideInLeft">
<img src="images/04.jpg" data-thumb="images/04.jpg" alt="" title="#htmlcaption">
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
</div>
</div>

</div>
<script type="text/javascript" src="demo/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
	$(window).load(function() {
			$('#slider').nivoSlider();
	});
</script>
</body>
</html>

○nivoslider 参考サイト○
Nivo Slider
http://webhako.net/jquery/plugin-nivo_slider/

リンク集