Javascript：ボタン押下時、確認メッセージを出力

Posted on by
返信

submitボタンを押したときに確認のメッセージボックスを出力し、「OK」が押された時のみサブミットしたい場合があります。
Javascriptを使用してsubmitボタン押下時に確認メッセージを出力する方法をメモします。

いつも忘れてしまいます。。。

■ onclick時にconfirm()を使用し、ダイアログを出力

<input type="submit" value="実行" onclick="return confirm('実行しますか？');">

「OK」をクリックした時はtrueを返し、「キャンセル」をクリックした時はfalseを返します。

■ 「OK」と「キャンセル」で処理を分岐する

【Javascript】

<script type="text/javascript">
function submitbtn() {
    // 「OK」ボタン押下時
    if (confirm('実行しますか？')) {
        alert('OK');
    }
    // 「キャンセル」ボタン押下時
    else {
        alert('キャンセル');
    }
}
</script>

【HTML】

<input type="submit" value="実行" onclick="submitbtn();">

「OK」と「キャンセル」で別の処理を追加することが可能です。

Linux：シンボリックリンクの所有者を変更する

Posted on by
返信

シンボリックリンクの所有者や所有グループをchownコマンドで変更しようとしたのですが、何度実行しても所有者や所有グループを変更することができませんでした。

下記にその時のコマンドを記載します。
※シンボリックリンク「img」の所有者や所有グループを「hoge」に変更する場合です。

# ls -la
lrwxrwxrwx 1 root root   41  5月 15 20:26 img -> /var/www/html/hoge/img
-rw-r--r-- 1 hoge hoge 1600  5月 15 17:25 index.php
# chown hoge:hoge img
# ls -la
lrwxrwxrwx 1 root root   41  5月 15 20:26 img -> /var/www/html/hoge/img
-rw-r--r-- 1 hoge hoge 1600  5月 15 17:25 index.php

所有者や所有グループが変更されませんでした。

シンボリックリンクの所有者や所有グループを変更する場合はオプションで「-h」を付けないと変更できないそうです。

-hオプションはシンボリックリンクを変更する場合に使用します。
リンク自身の所有者、所有グループを変更します。

-hオプションを使用して変更した際のコマンドを下記に記載します。

# ls -la
lrwxrwxrwx 1 root root   41  5月 15 20:26 img -> /var/www/html/hoge/img
-rw-r--r-- 1 hoge hoge 1600  5月 15 17:25 index.php
# chown -h hoge:hoge img
# ls -la
lrwxrwxrwx 1 hoge hoge   41  5月 15 20:26 img -> /var/www/html/hoge/img
-rw-r--r-- 1 hoge hoge 1600  5月 15 17:25 index.php

シンボリックリンクの所有者、所有グループを変更することができました。
また、下記のように末尾に「/」を付けて実行すると変更されませんでした。

# chown -h hoge:hoge img/

php：phpで301リダイレクトする方法

Posted on by
返信

WEBサイトのドメインを変更した場合など、前のドメインにアクセスした際に新しいドメインに転送したい場合があります。
その場合は301リダイレクトし、現在のサイトにリダイレクトします。

301リダイレクトは永久的にサイトの引越しをする場合に使用します。
検索エンジンに引越ししたことを伝えるのでSEOを考慮してリダイレクトをすることができます。

.htaccessでリダイレクトする方法もありますが、今回はphpで301リダイレクトする方法をメモします。

■ phpで301リダイレクト

リダイレクト元のページの先頭に下記のソースを記述します。
Locationにリダイレクト先のURLを書きます。

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: http://raining.bear-life.com/");
exit();
?>

前のドメインにアクセスすると、指定したURLにリダイレクトされます。
ページごとにリダイレクトを指定したい場合などはいいと思います。

HTML：HTMLで並べた画像の余白を取り除く方法

Posted on by
返信

HTMLで画像を並べて表示しようとしたのですが、画像と画像の間に余白が入ってしまい、ぴったりくっつかないということがありました。

image_yohaku_1

その時のHTMLのソースコードは以下のように記述しています。

<img src="image_1.jpg" />
<img src="image_2.jpg" />

調べてみるとソースコード内で<img>タグを改行して記述していたり、半角のハイフンなどが入っていると画像の間に余白が入ってしまうようです。

なので、画像の間の余白を取り除く場合の解決策をメモします。

■ 並べた画像の余白を取り除く方法

ソース内で<img>タグの間に改行や空白を入れないで記述した場合、余白はできないので下記のように記述します。

<img src="image_1.jpg" /><img src="image_2.jpg" />

また、ソース内の記述を見やすくするために改行したり空白を入れたい場合があります。
その場合は画像に「float: left;」を指定し余白をなくします。

<img src="image_1.jpg" style="float: left;" />
<img src="image_2.jpg" style="float: left;" />

上記の方法を使用すると下記のように複数の画像がぴったりくっついて表示されます

image_yohaku_2

CSS：text-shadowを使用し、文字に影や縁取りをする

Posted on by
2

CSS3のtext-shadowを使用すれば、画像で作ったように文字を装飾することができます。
text-shadowを使用して、文字に影を付けたり、縁取り（アウトライン）をする方法をメモします。

text-shadowは文字に影を付けるプロパティです。

[text-shadow]

text-shadow: 横方向 縦方向 ぼかし 影の色;

使用例は下記のように指定します。

text-shadow: 5px 5px 1px #999999;

text-shadow1

設定する値を複数指定したい場合は下記のように’,’区切りで指定します。

text-shadow: 5px 5px 1px #999999, -5px -5px 1px #999999;

text-shadow2

noneを指定した場合、影は付きません。

■ 文字に影を付ける場合

【CSS】

.test {
	color: #000;
	font-size: 50px;
	font-weight: bold;
	text-shadow: 5px 5px 1px #999999;
}

【表示例】

text-shadow1

■ 文字に縁取りをする場合

【CSS】

.test {
	color: #FFF;
	font-size: 50px;
	font-weight: bold;
	text-shadow: 2px 2px 1px #00F,
	-2px 2px 1px #00F,
	2px -2px 1px #00F,
	-2px -2px 1px #00F;
}

【表示例】

text-shadow3