2016-11-01から1ヶ月間の記事一覧
フレキシブルボックスレイアウト（flexible Box Layout Module） flexboxはWebページを柔軟にレイアウトするために作られたもので、 親要素（Flexboxコンテナ）の中に子要素（Flexboxアイテム）を並べていくという考え方でレイアウトします。 flexboxの特徴 …
positionを使って表示位置を指定 表示位置の指定方法の種類 static ポジションレイアウトを行わない relative 通常の表示位置を基点にした位置指定 absolute 親要素を基点にした位置指定 fixed ブラウザ画面を基点にした位置指定 page ページボックスやリー…
positionを使って表示位置を指定 表示位置の指定方法の種類 static ポジションレイアウトを行わない relative 通常の表示位置を基点にした位置指定 absolute 親要素を基点にした位置指定 fixed ブラウザ画面を基点にした位置指定 page ページボックスやリー…
Mozilla Firefoxで画像をダウンロードする手順 １．Firefoxでダウンロードしたい画像があるページを表示 ２．表示したページ上でマウスを右クリック ３．「ページの情報を表示」を選択 ４．「メディア」を選択し、「すべて選択」をクリック ５．「名前を付け…
レスポンシブWebデザインでマージンは可変させないで一定にし、コンテンツのみ可変にしたい場合があります。そんな時に便利な calc 関数の使い方についてまとめます。 参考Webページ developer.mozilla.org calc関数の書式 width:calc( boxSize% － fixedVal…
スマホ用画像とPC画像を、スマホ画像のサイズ(640px)を境に切り替えます。 スマホ用画像 01_sp.png 640px×300px PC用画像 01_pc.png 960px×300px スマホ用画像（画面幅は640px） 画像ファイルは、スマホ用の ”01_sp.png” が使用されています。 PC用画像（画…
今後のために、学習に役立つサイトを記述しておきます。 developer.mozilla.orgMozilla Developer Centerの日本語訳サイト。分かりやすいかは別にして、情報量は一番だと思います。 一撃必殺JavaScript日本語リファレンスサンプルが充実しているので理解しや…
2017年1月のカレンダーをつくる 作成したカレンダー PHPソース h1 { font-size: 28px;}table { border-top: solid 1px black; border-collapse: collaose; border-spacing: 0;}td { border-bottom: solid 1px black; padding: 6px; margin: 0;}</style>__STYLE; echo…
2017年まであと何日かを求める PHPソース 2017年まで、あと {$days}日です。</p>"; 実行結果 翌週水曜日の日付を求…
URLを入力して変換ボタンをクリックすると、入力したURLのQRコードが表示されます。サイズは大(300x300)、小(150x150)を選択できます。 PHPソース
ボタンを100個表示し、ボタンをクリックするとボタンの番号を表示するプログラムをPHPで作成しました。 ソース "; for($i=1; $i <= 100; $i++){ echo "<input type='submit' name='btn' value='{$i}' style='width:48px;' />"; } echo "</form>"; //ボタンが押されていれば、押された番号を表示 if(isset($_GET["btn"])){ $btn = intval(…
マウスをクリックするとボタンが作成されます。作成されたボタンをクリックすると、アラートウィンドウ [ cliked:button 番号 ] が表示されます。 アラートウィンドウ ソース <html lang="ja"><head> <meta charset=UTF-8"> <title>ボタンを作成</title> <style> html,body,h1 { margin: 0; padding: 0; } h1{ width:490px; fon</meta></head></html>…
移行元の作業 データベースをエクスポートする xamppのコントロールパネルを起動してMysqlをstartさせ、mySQLの「Admin」を起動します。 データベース「0708_wp」を選択して全てのテーブルをチェックし、チェックしたものを「エクスポート」します。 データ…
WordPressをダウンロードしてデータベースの作成と設定を行い、WordPressを使用できる状態にします。ダウンロードはWordPress日本語サイトで可能です。 ja.wordpress.org WordPressのダウンロード ダウンロードボタンをクリックしてWordPressをダウンロード…
画像を縮小するのに使用したサイトをログに残しておきます。 画像ファイルをアップロードして縮小された画像ファイルをダウンロードするというものです。簡単な手順を箇条書きにします。 縮小したい画像ファイルをアップロード（Max２０ファイル） 縮小サイ…
犬がカーソルを追いかけるプログラムを作成します。 ソース <html lang="ja"><head> <meta charset="UTF-8"> <title>犬がカーソルを追いかける</title> <style> #area{ position:absolute; background-color:#fff; left: 0px; top: 10px; width: 1600px;/*犬が動く範囲 横*/ height: 700px;/*犬が動く範囲 縦*/ } #dog{ position</meta></head></html>…
第一印象 メラビアンの法則 最初にあった1秒以内で93%の印象が決まる。 敬語の練習
英語を日本語に変換する 英語を日本語に変換する簡単なプログラムをPHPで作成しました。 ”apple”と入力して「変換」ボタンをクリックします。 日本語で「リンゴ」ですと表示されます。 登録されていない英語を入力すると、「登録されていません」と表示され…
PHPを使ったフォームの演習 SELECTを使ったFORMの演習をしました。 入力する前のフォームの画面 入力した後のフォームの画面 受信した内容を表示した画面 フォーム側（送信側）ソース <html lang="ja"><head><meta charset="utf-8"><title>フォームの内容を取得する</title><style>h1, p { margin-left: 50px;}dl {/* overflow: </meta></head></html>…
フォームの送信と受信 valueにテキストを入れる場合 送信側 <input type="checkbox" id="meet" name="food" value="ステーキ"><label for="steak">ステーキ</label><input type="checkbox" id="cake" name="food" value="ケーキ"><label for="cake">ケーキ</label> 受信側 foreach( $_POST['food'] as $value ){ //valueは"ステーキ"、"ケーキ" echo "{$value} ";} valueに数字を入れ…
時間はサーバー側の時間を取得するので、タイムゾーンの設定をしておく必要があります。 タイムゾーンはphp.iniファイルを以下のように記述します。
九九の表を作成 PHPを使って９×９の九九の表を作ってみました。 PHPソース <html lang="ja"><head><meta charset="utf-8"><title>九九表</title><style>table { border-collapse: collapse; border: solid 2px #000; font-size: 24px; width: 500px; height: 500px; text-align: center;}tr:first-child, th:first-child { backg</meta></head></html>…
スパムかどうかのチェック方法 サイトにスパム対策がされているかどうかのチェックは、サーチコンソールの「手動による対策」で行えます。また、以下URLからもチェックできます。 www.google.com Googleの 品質に関するガイドライン 以下、”品質に関するガイ…
スパムとは？ 不当な方法を用いて検索エンジンの上位に表示させようとする行為のことです。 スパムの種類 上位表示の目的で以下のことを行うとスパムになります。 隠しテキスト・隠しリンク スタイルシートやstyle属性を使ってHTMLソース上のテキストをブラ…
検索ロボット 検索エンジンにはロボット型とディレクトリ型があり、Googleは全文検索ができるロボット型です。検索ロボットは、テキスト、写真、動画、音楽などのコンテンツを読み込みます。 検索順位を決定するアルゴリズム 検索エンジンの表示順を決定する…
データベースの参照 データベースの参照にはSELECT文を使います。 SELECT * FROM テーブル名; テーブル名：参照するテーブルの名前 *：すべての行のすべての列 SELECT 列名 FROM テーブル名; テーブルから指定した列だけを取り出す。 特定の列を取り出すこと…
form.phpでフォームに入力して、結果をshowname.phpで受け取り表示します。 PHP演習 2のフォームに「好きな色」を追加しています。色は複数選択可能であるため、受信して表示する側では配列を使用しています。 実行結果 入力フォーム フォームの内容を受信し…
配列 ソースファイル（PHP） <html lang="ja"><head><meta charset="utf-8"><title>PHPの配列</title></head> <body>";echo "$color[1]<br>";echo "$color[2]<br>";echo "<br>";foreach($color as $value){ echo "$value<br>";}?> </body></html>
実行すると1秒後にAXELAという文字の描画が始まり2秒かけて描画し、最後の状態を保持して終了します。 実行してすぐの画面 AXELAという文字を破線にして、その間隔を表示されない間隔(下記のソース内stroke-dasharray: 2000;/*破線の間隔*/)まで広げているた…
CSS3によるアニメーションは大きく分けて、トランジションとアニメーションの2つに分けられます。 transitionとanimationとの比較 transition 動かすために:hoverなどのきっかけが必要 トランジションでは実行後に元のプロパティ値に戻る 比較的簡単な記述で…
