あちあち情報局 - programs 趣味や日曜プログラムなどを書いています https://www.achiachi.net/blog/ 2026-07-08T00:07:33+00:00 あちあち情報局 https://www.achiachi.net/blog/ https://www.achiachi.net/blog/_media/wiki/dokuwiki.svg text/html 2018-04-26T06:00:20+00:00 Anonymous (anonymous@undisclosed.example.com) CSS 片側可変・片側固定の2カラムレイアウト https://www.achiachi.net/blog/programs/css_2column?rev=1524722420&do=diff CSS 片側可変・片側固定の2カラムレイアウト htmlで片側可変・片側固定の2カラムレイアウトにする2つの方法。 ---------- PR floatとネガティブマージン デモ ソースコード CSS部 .wrap{overflow:hidden;background:#eee;width:100%;min-width:500px;} .main{float:left;width:100%;margin-right:-180px;background:#eff;} .mainin{margin-right:180px;word-break:break-all;background:#efe;} .side{float:left;width:180px;word-break:break-all;background:#ffe;}… text/html 2018-05-14T12:20:29+00:00 Anonymous (anonymous@undisclosed.example.com) CSS span要素の折り畳み(アコーディオン) https://www.achiachi.net/blog/programs/css_accordion?rev=1526300429&do=diff CSS span要素の折り畳み(アコーディオン) CSSだけでspanなどインライン要素の折り畳みができるアコーディオンメニューみたいなのを考えてみました。 デモ コード html部 <p> <label for="join01">タイトル(クリックすると開閉)</label> <input type="checkbox" id="join01" class="accordion" /><span>開閉内容</span> </p> <p> <label for="join02">初期状態が開いた状態(クリックすると開閉)</label> <input type="checkbox" id="join02" class="accordion" checked="checked" /><span>開閉内容</span> </p>… text/html 2018-04-03T09:52:19+00:00 Anonymous (anonymous@undisclosed.example.com) CSS DIVを横並びにする方法 https://www.achiachi.net/blog/programs/css_divyoko?rev=1522749139&do=diff CSS DIVを横並びにする方法 DIVを横並びにするために、簡単そうな3つの方法、どれも一長一短あり。 ---------- 共通部分 3つの方法すべてで使用するHTMLとスタイルシート <style> /* わかりやすいように色と線をつける*/ .b_gray{background:#eee;} .boder1{border:solid 1px #777;background:#fff;} </style> text/html 2018-04-03T09:52:33+00:00 Anonymous (anonymous@undisclosed.example.com) CSS メディアクエリ@mediaの設定方法 https://www.achiachi.net/blog/programs/css_media?rev=1522749153&do=diff CSS メディアクエリ@mediaの設定方法 スクリーンサイズによってCSSを切り替えるメディアクエリの使い方。 書き方 共通のCSSを書いた後に、各端末用に変更の必要がある部分のみ@mediaに記述する。@mediaの指定の状態になった時のみCSSを「上書き」するので共通のCSSに書いてある内容をもう一度書く必要は無いが、共通のCSSの一部設定を無効にする事は出来ないため無効化したい場合は打ち消すような設定で上書きしなければならない。… text/html 2018-03-30T13:27:51+00:00 Anonymous (anonymous@undisclosed.example.com) GoogleMaps APIv3 地図の表示 https://www.achiachi.net/blog/programs/gmap3_1?rev=1522416471&do=diff GoogleMaps APIv3 地図の表示 DokuWiki に Google Maps Javascript API v3 の地図を表示します。 Google Mapsのスタートガイドを参考に地図を表示してみます。 デモ PR サンプル * 【YOUR_API_KEY】の部分を各自で取得したKEYに書き換えて、このコードを挿入して下さい。 text/html 2018-05-14T09:00:31+00:00 Anonymous (anonymous@undisclosed.example.com) HTML5のひな形(下書中) https://www.achiachi.net/blog/programs/html_start?rev=1526288431&do=diff HTML5のひな形(下書中) proguram html5 最低限必要そうなの構文 UTF-8/日本語環境時 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> </head> <body> <h1>見出し</h1> <p>段落</p> </body> </html> text/html 2018-03-30T13:26:45+00:00 Anonymous (anonymous@undisclosed.example.com) 外部CSSを任意のタイミングで読み込むJavaScript https://www.achiachi.net/blog/programs/js_cssload?rev=1522416405&do=diff 外部CSSを任意のタイミングで読み込むJavaScript 外部CSSを使う場合、DokuWikiなど一部CMSはページごとhead要素を変更できないため全部のページでCSSロードしなければなりませんが、この方法を使えばBody要素内の任意の場所でCSSで読み込みを開始できます。 text/html 2018-03-30T13:25:28+00:00 Anonymous (anonymous@undisclosed.example.com) textフォーム値の取得するJavaScript https://www.achiachi.net/blog/programs/js_getform?rev=1522416328&do=diff textフォーム値の取得するJavaScript Javascript でtextフォームから文字列を取得する方法。 取得方法は複数あるので代表的な物を3つ紹介します。3番のid属性での取得する方法が使いやすい。 text/html 2018-03-30T11:25:14+00:00 Anonymous (anonymous@undisclosed.example.com) 現在のページアドレスを取得するJavaScript https://www.achiachi.net/blog/programs/js_getlocation?rev=1522409114&do=diff 現在のページアドレスを取得するJavaScript Javascriptで現在表示しているページのアドレスを取得する方法。 デモ 下記のボタンをクリックするとこのページのアドレスをアラートダイアログに表示します。 このページではportなど一部の項目は表示されません。 text/html 2018-03-30T13:26:21+00:00 Anonymous (anonymous@undisclosed.example.com) aタグでページリロードせずjavascriptを実行する方法 https://www.achiachi.net/blog/programs/js_void0?rev=1522416381&do=diff aタグでページリロードせずjavascriptを実行する方法 下記のようにaタグにhrefを空にしてonclickでjavascriptを実行しようとするとページリロード発生しページ中間にスクロールしてるなら最上部に移動します。（※hrefを書かなければリロードしなくなりますが、下線が無くなりマウスアイコンも指型に変わりません） text/html 2018-04-01T02:16:26+00:00 Anonymous (anonymous@undisclosed.example.com) JavaScriptのクロスサイトスクリプティング対策について(下書き) https://www.achiachi.net/blog/programs/js_xss?rev=1522548986&do=diff JavaScriptのクロスサイトスクリプティング対策について(下書き) クロスサイトスクリプティング(以下XSS)はJavascriptなどのWebアプリケーションの脆弱性の一つ、Webアプリケーションへの入力に対して攻撃者(*)が脆弱性のある文字列を入力する事で管理者やWebアプリケーションが想定しない行動が可能となり情報漏洩・データの書き換えや破壊・任意のスプリクトの実行など可能となる危険性があります。（*攻撃の意図が無くても脆弱性のある文字列を入力すればXSSが発生します）… text/html 2018-04-03T09:23:47+00:00 Anonymous (anonymous@undisclosed.example.com) OpneStreetMapについて https://www.achiachi.net/blog/programs/osm_0?rev=1522747427&do=diff OpneStreetMapについて OpenStreetMap(OSM)(公式サイト)はオープンデータベースライセンス(ODbL1.0)で利用できる地図です。GoogleMap APIのように自分のWebサイトでコントロールできる地図を使う事ができます。また地図の基盤となるデータをダウンロードして使用できるので自分専用の地図サーバーを構築する事もできます（高性能なサーバーとシステム構築するための高度な知識が必要です）… text/html 2018-03-30T13:29:30+00:00 Anonymous (anonymous@undisclosed.example.com) LeafletでのOpenStreetMapの表示 https://www.achiachi.net/blog/programs/osm_lf1?rev=1522416570&do=diff LeafletでのOpenStreetMapの表示 OpenStreetMapをLeafletライブラリーを使って表示します。 Ver1.3.1時点のクイックスタートガイドを参考にDokuWiki用にアレンジしています。 <http://leafletjs.com/examples/quick-start/> デモ PR ソースコード text/html 2018-03-30T13:28:58+00:00 Anonymous (anonymous@undisclosed.example.com) OpenLayersでのOpenStreetMapの表示 https://www.achiachi.net/blog/programs/osm_ol1?rev=1522416538&do=diff OpenLayersでのOpenStreetMapの表示 OpenStreetMapをOpenLayersライブラリーを使って表示します。 Version4.6.5時点のクイックスタートページを参考にDokuWiki用にアレンジしています。 <http://openlayers.org/en/latest/doc/quickstart.html> デモ PR ソースコード text/html 2018-05-13T15:57:12+00:00 Anonymous (anonymous@undisclosed.example.com) PHPについて https://www.achiachi.net/blog/programs/php_about?rev=1526227032&do=diff PHPの勉強(下書) PHPについて PHPはWebプログラミング言語のひとつ、特徴はHTMLファイル中にプログラムを埋め込む事ができる点で、HTMLの表示したい位置に直接記述できるので視覚的にわかりやすくメンテナンス性が良いです。またWebで頻繁に登場する処理が関数化されているので開発者は少ないコードでプログラミングでき楽できます。 text/html 2018-04-15T06:57:10+00:00 Anonymous (anonymous@undisclosed.example.com) PHPの基礎 https://www.achiachi.net/blog/programs/php_basic?rev=1523775430&do=diff PHPの勉強(下書) PHPの基礎 PHPの動作させるには PHPの実行にはPHPの動作しているWebサーバーが必要です。 さすがに本格的なWebサーバーを立ち上げるとなると高度な知識と時間が必要になるので、無料でPHPの動作環境をつくるならXAMPPやMAMPで簡易的なテスト環境をローカルに作るのが比較的簡単なようですのググってみてください。 text/html 2018-04-15T12:38:12+00:00 Anonymous (anonymous@undisclosed.example.com) PHPで計算 https://www.achiachi.net/blog/programs/php_calc?rev=1523795892&do=diff PHPの勉強(下書) PHPで計算 算術演算子 PHPでは算術演算子を使って四則演算などの計算ができます。 <?php $a1=10+3; echo '<p>加算(+)結果 '.$a1.'</p>'; $a2=10-3; echo '<p>減算(-)結果 '.$a2.'</p>'; $a3=10*3; echo '<p>乗算(*)結果 '.$a3.'</p>'; $a4=10/3; echo '<p>除算(/)結果 '.$a4.'</p>'; $a5=10%3; echo '<p>余剰(%)結果 '.$a5.'</p>'; $a6=10+3-3*3/3%3; echo '<p>組み合わせ結果 '.$a6.'</p>'; ?> text/html 2018-04-17T11:41:42+00:00 Anonymous (anonymous@undisclosed.example.com) PHP処理の分岐・比較(下書き) https://www.achiachi.net/blog/programs/php_fork?rev=1523965302&do=diff PHPの勉強(下書) PHP処理の分岐・比較(下書き) PHPは2つの値(式の結果・数値・文字列)を比べて正しいか正しく無いかで処理を分ける事ができます。 if命令とswitch命令で分岐します。ifでは比較のため比較演算子を使います。 text/html 2018-04-15T09:14:43+00:00 Anonymous (anonymous@undisclosed.example.com) PHPで文字を表示 https://www.achiachi.net/blog/programs/php_printecho?rev=1523783683&do=diff PHPの勉強(下書) PHPで文字を表示 PHPで文字を表示するには、echo を使用します。(print命令やecho短縮構文などでも出力できますがあまり差異はないので、一般的なecho命令のみ紹介します) 使い方 echoに続きシングルクォーテーションで出力したい文字列を囲みます。複数行の出力も可能ですが出力に改行が入いっているため文字間に隙間ができます。 text/html 2018-04-18T02:02:58+00:00 Anonymous (anonymous@undisclosed.example.com) PHPの勉強(下書) https://www.achiachi.net/blog/programs/php_start?rev=1524016978&do=diff start PHPの勉強(下書) * PHPについて * PHPの基礎 ・・・書き方や“Hello World”など * PHPで文字を表示・・・ブラウザに文字を表示する複数の方法 * PHPの変数と代入・・・変数の使い方 * PHPで計算 - 算術演算子(四則演算)の使い方 * PHP処理の分岐・比較(下書き) - 分岐 * php_repeat - 繰り返し text/html 2018-04-16T02:53:09+00:00 Anonymous (anonymous@undisclosed.example.com) PHPの変数と代入 https://www.achiachi.net/blog/programs/php_variable?rev=1523847189&do=diff PHPの勉強(下書) PHPの変数と代入 変数とは文字や数字や式の結果を保持しておくため入れ物です。半角$で始まる文字列です。 数値などを変数に格納する場合は「=」を使って代入します。一般的な数学の計算式では「1+1=?」などのように「=」に左辺に式を書き結果を右辺に答えを代入しますが、PHPでは「$x=1+1;」のように右辺に式を書き左辺に格納する変数を書きます。また文字列を「=」で変数に代入する事ができます。… text/html 2018-03-29T23:22:47+00:00 Anonymous (anonymous@undisclosed.example.com) Yahoo!Map API メモ https://www.achiachi.net/blog/programs/yolo_tips?rev=1522365767&do=diff Yahoo!Map API メモ Yahoo! JavaScriptマップAPI(YOLP)の豆知識や小技など DokuWikiで地図が表示されない場合 DokuWikiの標準テンプレートの場合、img要素css(スタイルシート)「max-width」が標準値以外になっているためYahoo!マップが表示されません。下記のコードをスタイルシートの最後に挿入し標準値(none)に戻すと表示されます。 text/html 2018-03-30T13:27:09+00:00 Anonymous (anonymous@undisclosed.example.com) Yahoo!Map API 地図の表示 https://www.achiachi.net/blog/programs/yolp_1?rev=1522416429&do=diff Yahoo!Map API 地図の表示 DokuWiki に Yahoo! JavaScriptマップAPI の地図を表示します。 デモ PR サンプル 【アプリケーションID】の部分を各自で取得したIDに書き換えて、このコードを挿入して下さい。