少しのコードで実装可能なHTML小技集
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
How to create a checkbox with a clickable label?
Method 1: Wrap Label Tag Wrap the checkbox within a label tag: <label><input type="checkbox" name="checkbox" value="value">Text</label> Method 2: Use the for Attribute Use the for attribute (match the checkbox id): <input type="checkbox" name="checkbox" id="checkbox_id" value="value"> <label for="checkbox_id">Text</label> NOTE: ID must be unique on the page! Explanation Since the other answers don
ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法 - Qiita
Aさん「AjaxでCSVファイルを読み込んで動かすJavaScriptのプログラムを作りました」 Bさん「HTMLファイルをPC上で直接開いても動作しますか？」 上記のような場合、ブラウザのセキュリティ制約によりファイルの読み込みがブロックされてしまい、うまく動かすことができません。 この文書では、上記のような場合にどういう方法を用いればセキュリティ制約を回避できるかの例を紹介します。 ※基本的な対象ブラウザはIE11と2016/12時点のFirefox, Chrome, Edgeです。最後の方の方法は前提条件を満たさない方法になってしまっていますが、参考として記載しています。 読み込む外部ファイルをHTMLと同フォルダか同フォルダの下層に配置(Firefox) + Ajaxに Microsoft.XMLHTTP を使用する (IE) Firefoxでは、外部ファイルをHTMLと同フォルダ
JavaScript: window.open() 小窓の基礎
window.open()で小窓 いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。 各引数の文字列は一重引用符または二重引用符で括って指定します。 第１引数「URL」は生成されるウィンドウに表示するページのURLです。 ※ ウィンドウに表示するページ（別のファイル）は別途作成して用意しておきます。 第２引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。 ※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です) 例: window.open('example.html', null); 第３引数「オプション」はウィンドウの特徴を設定する文字列です。 こ
Simplicity
WordPressテーマ「Simplicity（シンプリシティー）」を作成しました。 Simplicityには主に、以下の7つの特徴があります。 シンプル 内部SEO施策済み 拡散のための仕掛けが施されている 端末に合わせた4つのレスポンシブスタイル 手軽に収益化 ブログの主役はあくまで本文 カスタマイズがしやすい 以下で詳しく説明します。 Simplicityは、とにかくシンプルなWordpressテーマを作ろうという考えの下作成しました。 テーマの名前「Simplicity」には以下の意味があります。 単純 簡単 容易 簡素 質素 飾り気のない よく言えばシンプル、悪く言えば地味なテーマです。 余分な飾り気をすべて取り除き、ユーザーが自ら自由なスタイルで後からカスタマイズしやすい土台となるように考えて作りました。 もちろんそのままでも十分使用できます。 検索エンジンへの最適化（SEO）
gitで管理しないファイルを無視させる .gitignore - misc - @OMAKASE
.gitignore とは名前からも分かるように git で無視するファイルを指定するファイルです。 .gitignore は通常トップディレクトリに置きますが git ではディレクトリのみを管理しないためルートディレクトリ下のサブディレクトリなどにも置く事が可能です。 .gitignoreで指定できる書式 ハッシュ記号で始まる行はコメントとして扱われる 空行は無視される ! マークで始まる行は残りのパターンを否定します スラッシュ/で終わる場合はディレクトリのみを表す スラッシュ/で始まる場合はルートディレクトリからを表す どこにもスラッシュ/が無い場合はシェルのglobパターンとしてファイル名のベース部分にマッチするか検査される 複数マッチするパターンがある場合は最後にマッチするものが優先される 設定できる.gitignoreパターン色々 *~ ファイル名の最後に ~ がある全てのファ
JavaScript側にPHP変数を簡単にまるごと渡す方法 #FuelPHPAdvent2013 - Blog::koyhoge::Tech
ハイ、昨日のオレに引き続きFuelPHP Advent Calendar 2013の6日目です。 今回の内容もまたTwig絡みです。実は昨日の記事は、本日の記事の前準備になっていたのでした。 JavaScript側にPHPのオブジェクトを渡したい 最近のWebアプリはUIのインタラクションが凝っていて、ブラウザ側のJavaScriptで色んな制御をすることも当たり前になってきました。jQueryや様々なjQueryプラグインを駆使して、ユーザに分かりやすく使いやすいサービスを提供することは、もはやウェブエンジニアとしては持っていて当然のスキルになっています。 そのようなUIを作っている際に、JavaScript側に動作パラメータの初期値を渡すのに値を一つ一つテンプレート記法で埋め込むのが面倒だったので、一発で渡せるTwig Extensionを作ったので紹介します。 data_bind関数
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事