2015-07-08
Webフォント。
このサイトはWebフォントを使用しています。
通常、インターネット上で表示されるテキストのフォントは、
閲覧しているそれぞれのパソコンにインストールされているフォントに左右されますが
こちらのWebフォントはワードプレスに直にインストールして使用しているので
閲覧環境に関係なく、表示されます。
手書きのようなこちらのWebフォントがお気に入りです^^
2015-02-20
2015-02-10
「win7」32bitから「win8.1」64bitへ引っ越しして
サクサク動くようになり、それはそれは快適なのですが
数点、win8でのデフォルト設定が不便に感じましたので、システム変更した点をメモします。
win8でのデフォルト設定が不便に感じた箇所を変更
文字がぼやける
厳密に描くと、文字ではなく 画像がぼやけて見えます。
原因はブラウザの表示幅拡大に伴い、デフォルト設定ではディスプレイが125%になっています。
デイスプレイ⇒小100%⇒すべてのデイスプレイで同じ拡大率を変更するにチェックをいれる
ファイル名が同じだと 上書きされてしまう
ファイル名が同じですと デフォルトでは上書きされてしまいます
①エクスプローラウィンドウを開き、表示タブをクリックし、フォルダオプションを選択
②フォルダオプションウィンドウの表示タブをクリック
➂フォルダの結合の競合を非表示にする」のチェックマークを外す(デフォルトではチェックが入っているはずです)
「適用」>「OK」をクリック
これで警告ダイアログが表示されるようになります。
警告なしでごみ箱へ
ファイルをゴミ箱に捨てようとしても、警告がでません。
もちろん「ごみ箱」に一時保存されますが、やっぱり警告にはでてほしいです。
①ごみ箱のプロパティを開きます。
②「削除の確認メッセージを表示する」を選択します。
これで警告ダイアログが表示されるようになります。
Windows 8.1で、起動時にデスクトップ画面を表示する方法
私は起動時はスタート画面に設定しており、デスクトップ画面ではないのですが、とりあえずメモします。
①タスクバーの上で、右クリック>プロパティ>ナビゲーション で
「スタート画面」の中の
「サインイン時、または画面上のすべてのアプリを終了したときに、スタート画面ではなくディスクトップに移動する」
にチェックをいれます。
ちなみにwin8の場合は、Windows 8.1にアップデートすることで起動時にデスクトップ画面を表示することができます。
・アップデートサイト>>
winバージョンに関係なく便利に変更した点
拡張子を表示させる
私は起動時はスタート画面に設定しており、デスクトップ画面ではないのですが、とりあえずメモします。
拡張子を表示させる
エクスプローラー>コントロールパネル>ディスクトップのカスタマイズ>フォルダオプション>表示
「詳細設定」から「登録されている拡張子は表示しない」のチェックを外して、「OK」をクリックします。
よく使用するソフトについて
よく使用するソフトを スタートアップ画面の下部から
ディスクトップおよびタスクバーにピン止め
・エクスプローラー
・メモ帳
・ペイント
・その他 いろいろなソフト
2014-11-26
位置を移動
位置移動でござる
位置移動でござる
--[ html ]-----------------------
<section>
<h1 class="ugokasu1">位置移動でござる</h1>
</section>
--[ CSS ]------------------------
.ugokasu1{
animation: ugokuzo 8s;
animation-iteration-count: 5;
-webkit-animation: ugokuzo 8s; /* Safari & Chrome */
-webkit-animation-iteration-count: 5;
background: #ff3366;
border-radius: 10px;
color: #ffffff;
font-size: 14px;
margin-bottom: 30px;
padding: 10px;
width: 200px;
}
@keyframes ugokuzo {
0% { transform: translate(0px, 0px); }
50% { transform: translate(300px, 0px); }
100% { transform: translate(0px, 0px); }
}
@-webkit-keyframes ugokuzo {
0% { -webkit-transform: translate(0px, 0px) ; }
50% { -webkit-transform: translate(300px, 0px); }
100% { -webkit-transform: translate(0px, 0px) ; }
}
2014-11-26
こちら、ベンダープレフィックスの記載必要
それでもIE9では利用できないようです
未対応ブラウザのために 単色の背景も設定すること。
・linear-gradient 線形グラデーション
・radial-gradient 円形グラデーション←あまり使えそうにないのでお試し省略
ピンクでグラデーション
--[ html ]-----------------------
<section>
<h1 class="gurade1">ピンクでグラデーション</h1>
</section>
--[ CSS ]------------------------
.gurade1{
background:#fd9eb2;
background: -webkit-linear-gradient(
#eb7e95 0%,
#fd9eb2 100%
);
background:linear-gradient(
#eb7e95 0%,
#fd9eb2 100%
);
border-radius: 10px;
color: #ffffff;
font-size: 14px;
margin-bottom: 30px;
padding: 10px;
width: 200px;
}
--[ CSS 失敗]------------------------
.gurade1{
background:#fd9eb2;
background: -webkit-linear-gradient(
0deg,
↑どうやらPCとスマホとでは読み込みが違うらしい。書かないとデフォルトで上(0%)から下(100%)へグラデがかかる
#eb7e95 0%,
#fd9eb2 100%
);
background:linear-gradient(
0deg,
↑どうやらPCとスマホとでは読み込みが違うらしい。書かないとデフォルトで上(0%)から下(100%)へグラデがかかる
#eb7e95 0%,
#fd9eb2 100%
);
border-radius: 10px;
color: #ffffff;
font-size: 14px;
margin-bottom: 30px;
padding: 10px;
width: 200px;
}
2014-11-17
波とイルカ
--[ html ]-----------------------
<div id="hani">
<span class="animation-nami"></span>
<span class="iruka2"></span>
</div>
--[ CSS ]------------------------
{animation:キーフレーム名 再生時間 補間方法 ディレイ 繰り返し 方向}
@keyframes キーフレーム名{~}
#hani{
height: 100px;
overflow: hidden;
position: relative;
width: 100%;
}
#hani span {position:absolute;}
.animation-nami{
width:100%;
height:30px;
z-index:10;
left:0;
bottom:0;
background-image:url(images/nami.png);
}
.animation-nami {
-webkit-backface-visibility: hidden;
-webkit-animation: ugokunami 15s linear infinite 0s;
-moz-animation: ugokunami 15s linear infinite 0s;
-o-animation: ugokunami 15s linear infinite 0s;
-ms-animation: ugokunami 15s linear infinite 0s;
animation: ugokunami 15s linear infinite 0s;
}
@keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
.iruka2{
background-image:url(images/iruka1.png) ;
width:160px;
height:160px;
z-index:5;
bottom:-110px;
-webkit-animation:irukamawaru2 6s linear infinite normal;
animation:irukamawaru2 6s linear infinite normal;
}
@keyframes irukamawaru2{
0% {}
100% {transform: rotate(360deg);}
}
2014-11-26
角丸
--[ html ]-----------------------
<section>
<h1 class="midasi1">角丸でござる</h1>
</section>
--[ CSS ]------------------------
.midasi1{
background: #ff3366;
border-radius: 10px;
color: #ffffff;
font-size: 14px;
margin-bottom: 30px;
padding: 10px;
width: 200px;
}
角丸とテキストに影
--[ html ]-----------------------
<section>
<h1 class="midasi2">角丸とテキストに影でござる</h1>
</section>
--[ CSS ]------------------------
.midasi2{
background: #ff3366;
border-radius: 10px;
color: #ffffff;
font-size: 14px;
margin-bottom: 30px;
padding: 10px;
width: 200px;
box-shadow: 20px 20px 10px 0px black;
text-shadow: 1px 1px 3px #000;
}
見出しを斜めに
--[ html ]-----------------------
<section>
<h1 class="midasi3">見出しを斜めにでござる</h1>
</section>
--[ CSS ]------------------------
.midasi3{
background: #ff3366;
border-radius: 10px;
color: #ffffff;
font-size: 14px;
margin-bottom: 30px;
padding: 10px;
width: 200px;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
2014-11-17
@keyframes キーフレーム名{
0% { transform: rotate(角度deg);}
100% { transform: rotate(角度deg);}
}
個別表示
・transform:rotate() ()要素を回転表示する
補間方法 animationn-timing-function
・normal 順方向(時計回り)初期値
・alternate 奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す
・reverse 逆回り ←一部動かないなどの不具合有
・alternate-reverse 初回のアニメーションは逆方向に実行し、次は順方向
角度 deg
・deg 角度
補間方法 animationn-timing-function
・rotate(回転角度) rotate()関数では、角度によって2D回転を指定します。
・rotateX(回転角度) X軸を軸とする角度によって時計回りの回転を指定します。
・rotateY(回転角度) Y軸を軸とする角度によって時計回りの回転を指定します。
・rotateZ(回転角度) Z軸を軸とする角度によって時計回りの回転を指定します。
・rotate3d(数値, 数値, 数値, 回転角度)
回る
© 引用サイト⇒nemuchan.comさまサイトより
--[ html ]-----------------------
<div class="anime01a"></div>
--[ CSS ]------------------------
.anime01a{
background:#000;
color:#fff;
width:100px;
height:10px;
margin:40px 0;
-webkit-animation:anime01a 5s infinite alternate;
animation:anime01a 5s infinite alternate;
}
@-webkit-keyframes anime01a{
0% {}
100% {-webkit-transform: rotate(360deg);}
}
@keyframes anime01a{
0% {}
100% {transform: rotate(360deg);}
}
回るイルカ
--[ html ]-----------------------
<div class="iruka"></div>
--[ CSS ]------------------------
{animation:キーフレーム名 再生時間 補間方法 ディレイ 繰り返し 方向}
@keyframes キーフレーム名{~}
.iruka{
background:url(images/iruka1.png);
width:160px;
height:160px;
margin:40px 0;
-webkit-animation:irukamawaru 5s linear infinite normal;
animation:irukamawaru 5s linear infinite normal;
}
@-webkit-keyframes irukamawaru{
0% {}
100% {-webkit-transform: rotate(360deg);}
}
@keyframes irukamawaru{
0% {}
100% {transform: rotate(360deg);}
}
2014-11-17
animation:キーフレーム名 再生時間 補間方法 ディレイ 繰り返し 方向
{animation:キーフレーム名 再生時間 補間方法 ディレイ 繰り返し 方向}
@keyframes キーフレーム名{~}
個別表示
・キーフレーム名 animation-name
・再生時間 animation-duretion
・補間方法 animationn-timing-function
・ディレイ animation-delay(アニメ開始を遅らせる時間)
・繰り返し animation-iteration-count
・方向 animation-direction
補間方法 animationn-timing-function
・ease 最初と最後を滑らかに変化
・linear 一定の速度で変化
・ease-in 最初をゆっくり変化
・ease-out 最後をゆっくり変化
・ease-in-out 最初と最後をゆっくり変化
繰り返し animation-iteration-count
・infinite デフォルトの回数は1だがこちらを指定すると永遠に繰り返し実行される
・回数
方向 animation-direction
・normal 順方向(時計回り) 初期値
・alternate 奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す
・reverse 逆回り
・alternate-reverse 初回のアニメーションは逆方向に実行し、次は順方向
ゆっくり傾く
© 引用サイト⇒nemuchan.comさまサイトより
--[ html ]-----------------------
<div class="anime11"></div>
--[ CSS ]------------------------
.anime11{
background:#003d84;
color:#fff;
margin:25px 0;
width:100px;
height:10px;
-moz-animation:anime11 5s infinite alternate linear;
-webkit-animation:anime11 5s infinite alternate linear;
animation:anime11 5s infinite alternate linear;
}
@-webkit-keyframes anime11{
0% {}
100% {-webkit-transform: skewY(-15deg);}
}
@keyframes anime11{
0% {}
100% {transform: skewY(-15deg);}
}
応用・・・波
--[ html ]-----------------------
<div class="animation-nami"></div>
--[ CSS ]------------------------
.animation-nami{
width:100%;
height:30px;
z-index:10;
left:0;
bottom:0;
background-image:url(images/nami.png);
}
.animation-nami {
-webkit-backface-visibility: hidden;
-webkit-animation: ugokunami 15s linear infinite 0s;
-moz-animation: ugokunami 15s linear infinite 0s;
-o-animation: ugokunami 15s linear infinite 0s;
-ms-animation: ugokunami 15s linear infinite 0s;
animation: ugokunami 15s linear infinite 0s;
}
@-webkit-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-moz-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-o-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-ms-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
2014-11-14
transition:再生時間 プロパティ 補間方法 ディレイ
{transition:再生時間 プロパティ 補間方法 ディレイ}
個別表示
・再生時間 transition-duretion
・プロパティ transition-property
・補間方法 transition-timing-function
・ディレイ transition-delay
補間方法
・ease 最初と最後を滑らかに変化
・linear 一定の速度で変化
・ease-in 最初をゆっくり変化
・ease-out 最後をゆっくり変化
・ease-in-out 最初と最後をゆっくり変化
角を丸く
© 引用サイト⇒nemuchan.comさまサイトより
--[ html ]-----------------------
<div class="anime01"></div>
--[ CSS ]------------------------
.anime01{
background:#003d84;
color:#fff;
padding:10px;
width:200px;
height:10px;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.anime01:hover{
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
複数のプロパティを同時に変更
■リンクを貼ってみました
--[ html ]-----------------------
<div id="anime06"><a href="/contact/">お問い合わせはこちら</a></div>
--[ CSS ]------------------------
★背景色とテキスト色と幅が1秒で変化するCSS
div#anime06 {
background-color: #003d84;
width: 150px;
padding:10px;
-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
transition: background-color 1s linear, color 1s linear, width 1s linear;
}
div#anime06 a{
color: #fff;
}
div#anime06:hover{
background-color: #ffeb00;
color: #000;
width: 300px;
}
div#anime06 a:hover{
color: #000;
}
2014-11-14
CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、
それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などの
ベンダープレフィックスを付ける必要があるようです。
© 引用サイト⇒ベンダープレフィックスさまサイトより)
★動くCSS3を書くにあたって、必ずHTML5で書くこと!
■ 主要ブラウザのベンダープレフィックス
-moz- …… Firefox
-webkit- …… Google Chrome、Safari
-o- …… Opera
-ms- …… Internet Explorer
■ border-imageプロパティで画像ボーダーを機能させるには、
FirefoxやGoogle Chromeなどのそれぞれのブラウザ向けのベンダープレフィックスを付ける必要があるようです。
-moz-border-image: url("bg_dot.png") 15 round; // Firefox向け
-webkit-border-image: url("bg_dot.png") 15 round; // Google Chrome、Safari向け
CSS3が勧告されるまでには、まだ時間がかかりそうですし、
動くデザインはとても魅力なんですが、
Firefoxなどのブラウザでは一部がベンダープレフィックス無しで動作するようになっている一方、
新しいブラウザではベンダープレフィックスが付いていると、逆に動作しなくなっている機能もあるようです。
ベンダープレフィックスを付けないと現状では動作しないプロパティや値を指定する際にも、
今後の仕様策定の進展やブラウザのバージョンアップに備えて、
ベンダープレフィックス無しの指定を併記しておくほうが良いようです。
border-image: url("bg_dot.png") 15 round; //ベンダープレフィックス無し(標準)も併記する
-moz-border-image: url("bg_dot.png") 15 round; // Firefox向け
-webkit-border-image: url("bg_dot.png") 15 round; // Google Chrome、Safari向け
う~~~~ん。。動くデザインはかっこいいんだけれど、
ちょっと面倒かなあ。
すべてのブラウザで同じ動作がみられないと、クレームきそうだし。。悩む。。
2014-09-27
methodがPOSTの場合 パラメーターがつかず、URLが出力結果によってかわらない
同一ページ内にて出力させるときはPOSTが便利
【POST】はURLがかわらない。
・入力フォームページ http://odaseika.seika-office.com/taiwa2/
・出力ページ http://odaseika.seika-office.com/taiwa2/
同一ページ内で表示させるときはaction=””という風に中身は記入しない。
仮にaction=”php-form2″といれると http://odaseika.seika-office.com/taiwa2/php-form/となり「ページがありません」となる
名前(ハンドルネームでも何でもOK)を入力して送信ボタンを押してみて下さい
★同一ページ内にて結果表示
<form action="" method="POST">
<input type="text" name="age">
<input type="submit">
</form>
<php
$age = $_POST["age"];
$age2 = htmlspecialchars($age);
echo "こちらに表示されます⇒{$age2}";
?>
methodがGETの場合 出力結果にパラメーターが付きURLがかわる
【GET】はパラメーターが出力結果URLにつくため、結果次第でURLが変更になる
・入力フォームページ
http://odaseika.seika-office.com/taiwa2/
・出力ページ
http://odaseika.seika-office.com/php-form2/?age=小田
http://odaseika.seika-office.com/php-form2/?age=上田
※ちなみにPOSTで別ページに出力させるとしたら階層は現在のページの1つ下になる。ので1つ下にしたら出力可能かも。
例:入力フォーム http://odaseika.seika-office.com/taiwa2/
出力ページ http://odaseika.seika-office.com/taiwa2/php-form2/
名前(ハンドルネームでも何でもOK)を入力して送信ボタンを押してみて下さい
・http://odaseika.seika-office.com/taiwa2/に入力ページ
<form action="php-form2" method="GET">
<input type="text" name="age">
<input type="submit">
</form>
・http://odaseika.seika-office.com/php-form2/に出力ページ
<?php
$age = $_GET["age"];
$age2 = htmlspecialchars($age);
echo "{$age2}さん、ようこそ!";
?>
2014-09-26
入力した文字を返すプログラムを使ってみる
入力した文字を返す対話型は、2つのページが必要のようです。
.phpにフォームを記入して.phpで出力も動きますし
.htmlにフォームを記入して.phpで出力でもOKのようです。
ちなみにこちらは↓.phpと.phpで動かしています
名前(ハンドルネームでも何でもOK)を入力して送信ボタンを押してみて下さい
<form action="php-form/index.php">
<input type="text" name="age">
<input type="submit">
</form>
//こちらは別ページ(例:php-form/index.php)に
<?php
$age = $_GET["age"];
echo $age;
?>
★タグのHTML化(こちらを記載)
<?php
$age = $_GET["age"];
echo htmlspecialchars($age);
?>
※HTMLに変換せずに出力するのは危険なようです。
なので、画面出力時には必ずhtmlspecialchars()を使うことを忘れずに。
2014-09-26
出力タグ 「echo」を使ってみた
<?php
echo "こんにちは";
?>
PHPで自動で計算をさせてみた
<?php
echo "1+2×3=";
echo (1+2*3);
?>
変数を使ってみた
<?php
$price = 3000;
$price2 = $price*1.05;
echo "{$price}円の税込金額={$price2}円";
?>
改行コードを使ってみた\n
<?php
echo "ああああああ \n";
echo "いいいいいい \n";
echo "うううううう \n";
?>