ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡PHPカンファレンス 2021 1週間前イベント 〜 帰ってきたPHP勉強会@東京 の発表資料です。 https://phpcon.connpass.com/event/224128/
2021年だから人類はHTMLを手打ちしろ
youkoseki.com 2021年だから人類はHTMLを手打ちしろ 新しい年だ。人並に新しいことを始めようなどと考える人もいるだろう。しかし、なにを始めればいいのか？ 僭越ながら一つ提案をさせてもらえるなら、私はこう言いたい。HTMLを手打ちしろ。ハイパーテキストマークアップランゲージを学べ。なぜなら、個人がコツコツとタグを手打ちしたウェブページには暖かみがあるからだ。 私は中学一年生のとき、はじめてパーソナルコンピュータを買ってもらった。中学受験がうまくいったら買ってもらえるという約束で、受験には失敗したのだが、買ってもらったのだ。中学時代、ほとんどずっとパソコンと向かいあっていたが、CONFIG.SYSとAUTOEXEC.BATを書き換えてメモリ残量の上下に一喜一憂していた記憶しかない。あとA列車で行こう4や、ルナティックドーンのようなアートディンクのPCゲーム。Windows 3
軽視されがちだが重要なalt属性の適切な設定とは
１．はじめに alt属性は軽視されがちな要素です。 設定しても通常はどこにも表示されることがないため、いい加減に設定するあるいはまったく設定されないこともしばしばあります。 Webサイトの制作会社ですらalt属性の意味がわかっていないことがしばしばであり、一般的にはほとんど理解されていないといっていいと思います。 しかし、後述のように重要であるため理解した上で必ず適切に設定する必要があります。 ２．alt属性とは <img src=”tarabagani.png” alt=”ゆでたタラバガニの裏側” width=”360″ height=”120″ /> 一般的にはimgタグの中での属性指定として使われます。 画像の内容そのものを文字情報として定義したものがalt属性です。この赤文字部分がalt属性によって定義された部分で、定義された赤文字部分の文字を代替テキストと呼びます。 この例であれ
パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0 [/html] css[css] body { height: 5000px; } .num { margin: 0; posit
サービス終了のお知らせ
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
ミケネコ研究所
ミケネコはあなたの猫い頭脳を求めています いらっしゃいませ。あなたは 人目の訪問者です 当研究所は、いわゆるホームページ作成支援系のサイトです。インターネットの面白さを追求する研究などを行っており、得られた成果の一部を公開しています。みなさんのホームページ作成などのお役にたてることが出来れば幸いです。 [2004/11/27] mikeneko.ne.jp ドメイン管理人の小塚 敦さんが死去されたため、 mikeneko.ne.jp ドメインは閉鎖されました。 サーブルくんはもう本コンテンツを更新することができませんが、 友人一同としても彼の活躍の片鱗を少しでも残したく、 また多くの読者の方からいただいたご要望にお応えして、 ご遺族のご了解を頂いた上で、 ミケネコ研究所の一部コンテンツに限って復活掲載することになりました。 サーブルくんのご冥福をお祈りいたします。 新しいURLはこちら ⇒
音楽ホームページ作成のステップアップガイド
ステップアップガイド 音楽ホームページ作成の為の最低限の情報を集めました。このステップアップガイドで音楽ホームページの作成を知って、その後より詳しい解説などを左のメニューからご覧下さい。 基礎編 ホームページ作成の基礎です。必要なものの用意や何を使用するかの選択 まず始めに～目的 何のために音楽を使うの？ 最低限必要なソフトなどの準備 HTMLエディタやファイルを作るためのソフト、波形編集ソフトなどを用意 音楽ホームページを作る方法 実際にどうやってホームページを作るかの概要 HTML, ホームページ作成の基礎編 WEB作成のメイン、HTMLの記述を例に沿って紹介していきます HTMLを作成する テキストエディタやHTMLエディタを使ってHTMLファイルを作ってみよう 音を再生するための方法 どうやって音楽ファイルを再生？ストリーミング、埋め込み再生って何? サーバーにアップロード インタ
JavaScript/フォーム/自動計算フォームAタイプ（消費税あり） - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 var tax = 10; // 消費税率 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.
JavaScript/フォーム/数字の入力をチェックする - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始（チェックする項目を設定してください） if(document.form1.post1.value.match(/[^0-9]+/)){ flag = 1; } else if(document.form1.post2.value.match(/[^0-9]+/)){ flag = 1; } // 設定終了 if(flag){ window.alert('数字以外が入力されています'); // 数字以外が入力された場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 }
HTMLタグ/フォームタグ/データの送信形式と送信先を指定する - TAG index
form要素にはaction属性が必須となります。 データの送信先ついて 一般的には、CGI等のプログラムへ送信することになります。 POSTとGETについて method="" には、post または get を指定します。これは、データの送信形式を指定するもので、用途に合わせてどちらかを指定することになります。（この指定を省略した場合は get が適用されます） POST形式 … フォームのデータを本文として送信します（一度に大量のデータを送信することができます） GET形式 … フォームのデータをURLの末尾に追加して送信します（送信できるデータ量には制限があります） メールフォームなどの一般的なフォームでは、POST形式がよく使用されています。また、検索エンジンのフォームではGET形式が使用されているようです。 使用例 POST形式で formmail.cgi というCGIに送信す
JavaScript/フォーム/テキストフィールドの入力をチェックする - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始（必須にする項目を設定してください） if(document.form1.field1.value == ""){ // 「お名前」の入力をチェック flag = 1; } else if(document.form1.field2.value == ""){ // 「パスワード」の入力をチェック flag = 1; } else if(document.form1.field3.value == ""){ // 「コメント」の入力をチェック flag = 1; } // 設定終了 if(flag){ window.alert('必須項目に未入力があ
JavaScript/フォーム/自動的にフォーカスを合わせる - TAG index
<html> <head> <title>TAG index Webサイト</title> </head> <body onLoad="document.form1.field1.focus()"> <form action="#" name="form1"> <p>お名前：<input type="text" name="field1" size="25"></p> </form> </body> </html> フォーカスを合わせたい入力欄を、以下の方法で設定してください。 document.フォーム名.フィールド名.focus() フォーム名 … formタグの name="" で指定した名前（上記の例では form1） フィールド名 … フィールドの name="" で指定した名前（上記の例では field1） ページを表示したときに自動的にフォーカスを合わせるので、bodyタグに
正しい知識を得たい人の爲のCSS2リファレンス
正しい知識を得たい人の爲のCSS2リファレンス 簡易目次 概要 CSS2の構文 基本データ型 セレクタ 値わりあて，カスケード処理，継承 メディアタイプ HTML文書へのスタイルシート適用 プロパティの定義 テキスト 色と背景 フォント ボックスモデル 視覚整形モデル テーブル 生成内容 リストとマーカー ユーザインタフェイス 附録 CSSに関するアクセシビリティ技術 CSS2.0のプロパティ一覧表 CSS2.1のプロパティ一覧表 CSS2.1の視覚整形モデル詳細 詳細目次 概要 CSSの概要 HTMLの経緯とCSSの役割 CSSの正式勧告水準について 改訂版CSS2.1と次世代CSS3 CSS2.1 vs CSS2 CSSの設計原則 CSS2の処理モデル カンヴァス（The canvas） わりあてモデル（addressing model） 用語の定義 CSS2の構文 構文（Syntax
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
Alertbox: ページ内リンクの使用は避けよう（2006年2月21日）
ウェブ上のユーザたちは、ハイパーテキスト・リンクは別のページを読み込むべきだという、明確な思考モデルを持っている。ページ内リンクはこの思考モデルに反するため、混乱を招く。 Avoid Within-Page Links by Jakob Nielsen on February 21, 2006 最近、同じ日に同じことについて 2 つの質問をされた。普通、このようなことが起こるということは、この話題にはもっと幅広い関心があるということなので、これについてのコラムを書こうと決めた。 質問その 1： 今、リンクをクリックして「名前付きアンカー」（同一ドキュメント内の別の場所）に移動する、「ジャンプ・リンク」についての議論に関わっています。私は、ジャンプ・リンクが新規ウィンドウを開くリンクと同等に、あまりよくないものだということを、貴方の書いた 2 つの記事で裏付けようとしています。 質問その 2
あれこれポップアップ
ウェブページ (HTML) にて、マウスポインタの下にある任意の箇所（要素）の情報（属性値）あれこれをポップアップに出す、 JavaScript と CSS のセット。 Web サイトの製作運営者向けの一種の「素材」。 HTML に「あれこれポップアップ」の外部 JavaScript と 外部 CSSを適用するだけで、すぐ機能します。そのはず。 多くの典型的なブラウザでは、 title 属性に何か書いてある要素部分にマウスポインタをかざすと、その title 属性値がツールチップとしてポップアップしますよね。あれのゴージャス版と思ってもらえればよいです。典型ブラウザ本来のポップアップとの違いは、ポップアップするのが title 属性だけではない点。それと自分で言うのも何だけど、見てくれがカコイイ事（笑） 適用サイト利用者向け FAQ だうんろーど他 お持ち帰り用アーカイブをダウンロード 2
メモ：MacIE5バグつぶし
MacIE5のCSSバグ対策。とりあえず、検索画面でとんでもない表示になっていたのを修正完了（多分）。 ほかに気になっていた2つのバグも、バグ辞典で対策方法を見つけたので一応対策してみた。直ってるといいけど。 インラインボックス化したブロック要素の背景が左方に広がる(5.x) :hoverへの設定が適用されるたびにa要素がずれてゆく あと明らかにおかしいのは、フロートに後続する通常フローのブロックボックスの幅が短くなってること。 WinIE6のフロートに後続するボックスの幅がフロートに合わせて短縮されるに似た症状。 バグ辞典にはフロート化したh1要素に続くdiv要素が回り込んで表示される(5.x)というのがあるけど、 フロートがh1要素でなくてもこのバグは発生するようだ。 MacIEのバグはバグ辞典にも回避法があまり載っていなくて、自宅にMacもないので修正が大変。サポートも打ち切られたこ
Alternative Design Project
ルジョー（lujo）ニードルセラムは目に見えないほど小さいマイクロニードルが入った針美容液です。肌につけると直接角層まで美容成分を届けてくれる次世代エイジングケア用品です。 ルジョー ニードルセラムはその効果の高さから口コミサイトでも評判の商品です。 私もルジョー ニードルセラムの愛用者ですが、新感覚の使い心地の美容液で癖になりますし、しっかり肌に馴染むので効果も実感しやすいです。 ルジョー ニードルセラムはいつまでも美しい肌を維持していきたいという方に本気でオススメです。 ▼初回税込3,278円▼ ※送料無料！ ※いつでも解約できるので安心 公式サイト：https://store.minorie-shop.com/ でも、どんなに高級なコスメでも実際に効果を実感できなきゃ意味が無いですよね。
トップページだけでもなんとかしたいのよ
ホームページデザインに悩んだら試してみましょ。スカスカで薄っぺらいトップページだけでも、かっこよくする情報が、ここにあります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSによる段組（マルチカラム）レイアウト講座