ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

HTML

HTMLの誤った記述で指摘された内容

HTML5 バリデータを使って、HTMLをチェックしています。 最近のチェックで指摘されたのが、以下の3パターンです。 &ltinput type="image">のときは、valueは設定できない 指摘されてMDN Web Docsを見たら、 値 <input type="image"> 要素は value 属性を受け付けません。表示する…

タイムテーブルをHTMLで作る方法

依頼元からログイン画面、および認証後のタイムテーブルの画面の作成の相談をされました。 タイムテーブルは2日分あり、4つの会場において、時間ごとにどんなことが行われているのかを表示するのが希望です。 作れるだろうと判断して、作成可能と回答して、…

HTML5 バリデータで指摘されないところ

HTML5 バリデータを使って、HTMLを継続してチェックしています。 ajya.hatenablog.jp ajya.hatenablog.jpHTML5として、ここは直すべきだろうな、という点は、チェックする前に修正しています。 修正していないから、ここは指摘されるだろうな、という部分が…

HTML5 バリデータで修正を指摘される文字と対処方法

HTML5 バリデータを使って、HTMLをチェックしています。 ajya.hatenablog.jp指摘された内容は、大概はすぐわかるのですが、わからない指摘がありました。 その指摘以外を修正して、改めて指摘内容を確認しました。指摘のメッセージは、 Text run is not in U…

HTML5 バリデータを使って、HTMLを少しでもきれいにする

以前利用していたシステムを一部修正して再利用する案件が、たびたびあります。 以前利用していたので、正常に動作しているはずですし、表示も問題ないはずです。一部修正のためにソースコードを見ると、不要な部分がコメントアウトで残されていたり、未使用…

areaタグの順序で、思い通りにクリックできるようにする

mapタグとareaタグを使って、画像をクリックすると、Lightboxのように、クリックした画像を表示するようにしました。 developer.mozilla.org developer.mozilla.org動作を確認していると、areaタグとareaタグの座標が重なっている場合、重なった位置をクリッ…

HTML:ファイルのアップロード機能を追加するときに忘れがちなこと

Webサイトにファイルのアップロード機能を追加することがこれまで何度かありました。 その際、いつも追加を忘れていて悩むんでしまうことがあり、今回も同じことの追加を忘れていた悩んでいました。ファイルがアップロードされない以下のようなHTMLのフォー…

jQueryプラグインChosenで検索機能をオフする方法

昨日の記事でselectボックスで長い文字列を折り返してくれるjQueryプラグインのChosenを取り上げました。ajya.hatenablog.jpChosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxesその中で 検索機能をオフする方法は、Hide Search on Single Se…

selectボックスで、長い文字列を折り返して表示するjQueryプラグイン

selectタグのoption要素として、ある名称を使ったところ、文字数が多すぎてはみ出す結果になりました。 文字数減らせばいいのですが減らすのも難しいので、なにか方法はないかと検索したところ、jQueryのプラグインのChosenを見つけました。 Chosen: A jQuer…

inputタグの幅は、sizeではなくCSSで指定しよう

Mozilla Firefoxが40.0.2にアップデートされた後にあるサイトを見たら、テキスト入力欄の幅が広くなっていて、レイアウトがおかしくなっていました。 ソースコードを見てみると、 <input type="text" size="30" name="val1"> と指定されていました。Firefoxのバージョンがあがって解釈が変わったんだと…

釈然としない修正依頼

実際入力する人はいないはずなので、必要なのか疑問を持ったままです。 photo credit: MS FrontPage Markup Art via photopin (license)改行されない?お客さんから入力内容の確認画面で、入力された文字が改行されていないと連絡がありました。 日本語と英…

Windows 8.1のInternet Explorer 11で、フォントを指定しないとどのフォントが使われているの?

フォントのサイズだけを指定して、書体はブラウザの設定に任せて表示していたら、書体をメイリオにして欲しいとの要望がありました。 *{ font-size:14px; }MacではOfficeが入っていないとメイリオで表示できないことも理解してもらったうえで、適用しました…

HTML:画像の上に文字を載せる方法

文字を載せた画像を作ってもよかったのですが、文言が変わる可能性と、背景とする画像がセンスないと却下される可能性があるので、画像の上に文字を載せて表示したいと思いました。方法今まで作ったことがないので調べたところ、画像を囲う要素にposition: r…

ボタンを画像にすると、Internet Explorer 8では、期待通りの動作をしない

formタグ内のボタンが、最終的には画像にする予定で、開発初期は <input type='submit' name='next' id='next' value='next'> として、submitのボタンとしていました。 予定通りの動作をするようになったので、見た目の調整の一環として、ボタンを予定通り画像にするために、 <input type='image' name='next' id='next' src='./next.jpg' value='next'> としました。 現象 Google Chromeでは動…

optgroupタグを初めて使いました。

お客さんからセレクトボックスで、大項目に該当する項目は選択できず、小項目に該当する項目のみ選択できるようにしたいと言われました。 optgroupを利用 optionタグでdisabledを設定すればいいかと思って調べたら、optgroupタグの存在を知りました。 セレク…

HTML:iframeでフッターを共通化できるか試している その2

困ったときのjQueryプラグイン。 photo credit: Rodrigo Baptista via photo pin cc 前回iframeでフッターを共通化できないか試していることを書いたが、その続き。 HTML:iframeでフッターを共通化できるか試している - ソフトウェア開発者の日常 heightを…

HTML:iframeでフッターを共通化できるか試している

なかなか思った通りにはいかないな。 photo credit: linh.ngan via photo pin cc 状況 お客さんから、ホームページの更新方法の相談を受けている。 HTMLで書かれた静的ページが何ページかあるが、フッター部分に手を加えようとすると、今は全てのページを変…

Webサイトのページの表示および動作の高速化手法まとめ

// 今回いろいろな方法を取り入れたので、まとめておく。 効果がわかったもの ページャーを導入する修正前は、ページャーなしで全件を一度に表示していたが、修正後は、1ページ最大100件までのページャーを入れた。 class指定を止めて、id指定をする修正前は…

チェックボックスがOFFでも値を送信する方法

チェックボックスの困ったところ tableの中の1列にチェックボックスがあり、保存処理で行ごとのチェックあり/なしの値をPOSTしたいが、チェックなしだと値がPOSTされず、どの行の値が POST されたのか分からずに困った。 対処方法 調べたところ、 <input type="hidden" name="check[0]" value="0"> <input type="checkbox" name="check[0]" value="1"> のよう…