HTML/CSS

[HTML/CSS]Googleマップを自分のWebサイトにカスタムサイズで埋め込む方法

2015年8月18日 yellow

※2015年8月12日現在の手順です
※Googleがメニューを更新した場合はこの通りの手順では進めません

[操作手順]
→Googleマップで「東京駅」を検索する
https://www.google.co.jp/maps/place/%E6%9D%B1%E4%BA%AC%E9%A7%85/

→キーワード入力窓の左にある、三本線アイコン（ハンバーガーアイコン）をクリックしてメニューを呼び出す

→「地図を共有または埋め込む」（クリップのようなアイコン）をクリックする

→「地図を埋め込む」をクリックする

→窓の左上より、「中 ▼マーク」をクリックして「カスタムサイズ ▼」へ変更する

→地図を埋め込む予定のスペースの縦横ピクセルサイズを入力する

→iframeのコードをコピーする
※以下「東京駅」「400x400px」の例です

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8221076594486!2d139.766084!3d35.68138199999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x443025838b0ce6c6!2z5p2x5Lqs6aeF77yI5p2x5Lqs77yJ!5e0!3m2!1sja!2sjp!4v1439376461429" width="400" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>

→iframeのコードを自分のWebサイトへ貼り付ける

未分類

Acrobatでpdf文書を回転する方法（上書き保存）

2015年8月12日 yellow

「ページの回転」を実行後にCtrl＋S（上書き保存）を行います
この方法では、以後は回転操作を行う必要がありません

[ショートカット]
Shift＋Ctrl＋R　　　　ページの回転
※画面上部メニューより、文書＞ページの回転　の順にアクセスしても同様です

[確認環境]
Windows 7 SP1 64bit
Adobe Acrobat 8 Professional（バージョン8.1.0）

未分類

Acrobatでpdf文書を回転する方法（表示のみ）

2015年8月12日 yellow

表示のみの回転操作です
pdf文書に上書き変更はしません
この方法では、pdf文書を開く度に回転操作を行う必要があります

[ショートカット]
Shift＋Ctrl＋＋　　　　右90°回転
Shift＋Ctrl＋－　　　　左90°回転
※画面上部メニューより、表示＞表示を回転　の順にアクセスしても同様です

[確認環境]
Windows 7 SP1 64bit
Adobe Acrobat 8 Professional（バージョン8.1.0）

HTML/CSS

[HTML/CSS]ブラウザの窓サイズによらず、フッターを常に最下部に表示するレイアウト

2015年8月10日 yellow

[要点]
・td 二つのテーブルでページ全体を覆う
・table width=”100%” height=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″
・td valign=top にフッター以外を入れる
・td valign=bottom にフッターを入れる

テーブルで覆う前

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無題ドキュメント</title>

</head>

<body>

</body>

</html>

テーブルで覆った後

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>
<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign=top>
      <div id="header"></div>
      <div id="nav"></div>
      <div id="main"></div>
    </td>
  </tr>
  <tr>
    <td valign=bottom>
      <div id="footer"></div>
    </td>
  </tr>
</table>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無題ドキュメント</title>

</head>

<body>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

HTML/CSS

[HTML/CSS]テキストの折り返しを制御するCSSプロパティ

2015年8月10日 yellow

プロパティ white-space、値 normal、pre、nowrapを使います
要素に含まれる半角スペース、タブ文字、改行の扱いを指定して、折り返しを制御できます
※全角スペースは含まれないようです

[参考]
http://www.htmq.com/style/white-space.shtml

未分類

[MySQL]phpMyAdminで既存のデータベースの複製を作成する手順

2015年8月5日 yellow

XAMPPがインストールされている環境を前提にしています

[確認環境]
→XAMPP Control Panelを起動する

→ApacheとMySQLを起動する

→phpMyAdminにログインする
http://localhost/phpmyadmin/

→左メニューより、複製対象のデータベース名を選択する

→上部メニューより、「操作」を選択する

→Copy database to:　に注目する

→以下の通りにする
◎ 構造のみ
◎ 構造とデータ　←これが選択されている（デフォルト）
◎ データのみ

□ コピーの前に CREATE DATABASE する：ON（デフォルトON）
□ DROP TABLE / DROP VIEW を追加する：OFF（デフォルトOFF）
□ AUTO_INCREMENT 値を追加する：ON（デフォルトON）
□ 制約を追加する：OFF（デフォルトOFF）
□ コピーしたデータベースに切り替える：OFF（デフォルトOFF）

→テキストボックスに新しいデータベース名を入力して、実行を押す

→以下の通りダイアログが現れる
「データベース XXXXXXXX を YYYYYYYY にコピーしました。」

[確認環境]
Windows 7 SP1 64bit
XAMPP 5.6.8 [PHP: 5.6.8]

Dreamweaver