HTMLとCSSでチェックボックスの色と形をカスタムデザインする方法を現役デザイナーが解説【初心者向け】
チェックボックスのデフォルト表示を見てみよう まず、チェックボックスのデフォルト表示を見てみましょう。コードはこのようになります。 <input type="checkbox" />ここをチェックするよ これが基本的なチェックボックスのHTMLコードとなります。 HTMLとCSSでチェックボックスの色と形を変える方法 チェックボックスの色や形を変えたい場合はデフォルトのチェックボックスを非表示にし、疑似要素であるbeforeとafterを使うのが一般的ですが、inputタグには疑似要素が使えません。なので、labelタグにfor要素を使い、 <input type="checkbox" id="check1"> <label for="check1">ここをチェックするよ</label> cssは input#check1[type="checkbox"]+label{ /*ここにcssを
HTML5のCanvasを使ったお絵かきツールまとめ
昔、お絵かき掲示板というものをよく閲覧していたのですが、最近はめっきり見なくなりました。今考えると結構すごい機能があったけど、FlashやJAVAアプレットだからiPadとかでは使えないんだよなぁ。なんて思っているとCanvasでお絵かきアプリ (全8回) – プログラミングならドットインストールというレッスンがあるのを見て、突然HTML5のCanvasで作ったお絵かき掲示板を作ってみたいと思うようになりました。 いや、でもそもそもすでにCanvasで作られたお絵描きツールはあるんじゃないかと思い、調べてみたらすでにいろいろある模様。以下、見つけたもののリスト。 イラストブック – 無料レンタルお絵かき掲示板 今回見つけたもののなかで最もお絵かき掲示板っぽかったもの。普通にChromeで見てみるとかなり高機能なFlashを使ったお絵かきツールになるのですが、ChromeのUserAgent
javascript 文字実体参照をそのままhtml上に表示する
文字実体参照をそのままhtml上に表示 文字実体参照（エンティティ参照）をそのままhtml上に表示するには、「textContent」を使用します。 <h1 id="bar"></h1> <script> 'use strict'; document.getElementById("hoge").textContent = '<>&"'' </script> 実行結果を確認すると、文字実体参照のまま表示されていることが確認できます。 「innerHTML」だと「特殊文字」のまま表示されます。 document.getElementById("hoge").innerHTML= '<>&"'' 実行結果 また、以下のコードを、 document.getElementById("hoge").textContent =
TK-80のHTML5によるエミュレーター » Jeans & Development
先月、HTML5を用いてMZ-80Kのエミュレーターを作成した記事を書いた。 キモの部分は、CPUのエミュレーションとディスプレイの表示なので、そこがクリアできていればいろいろと応用が利く。CPUは当時の流行のZ80で、PC-8001・PC-8801などがそれに相当する。 また、Z80は、8080という当時の主流だったCPUのアッパーコンパチブルなので、そういったコンピューターにも応用可能である。 そんな中に、TK-80という、３０年以上前に発売されていた１ボードマイコンがある。 TK-80といえば、私が中学生だったか高校生だった頃、雑誌の広告に載せられていたのを見て、購入寸前の所まで行っていたマイコンである（実際には、TK-80E）。触ったことはないのだが、どんな物なのだろうかという興味はずっとあった。 で、手元にZ80 CPUのエミュレーターがある。TK-80の仕様も、小松さんのNEC
HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」
はじめに HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。 Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。 線（直線、曲線） 図形（四角形、円） 色とスタイル（単色、グラデーション、影） 文字の描画（サイズ、フォント、色の指定） 変形（拡大、回転、マトリクス変換） しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。 今回紹介するjCanvasは、HTML5 Canvasの機
rel=preload - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
【CSS】display:noneで消した画像を読み込ませない方法とは？
レスポンシブ対応ということで、PCとスマホで画像を切り替える場面は多いです。その時、デバイスによって表示しない画像をdisplay:noneして消すのが古い習わしです。 ブロックエディタやビジュアルエディタで画面サイズで表示のON・OFFを切り替えるのもdisplay:noneを使っているのが普通です。 しかし、dipslay:noneで消した画像が実は読み込まれてしまうことはご存じでしょうか？ diplsplay:noneで消した画像が実は読み込まれていたというのは、Page Speed Insightなどで警告されて気が付いている人も多いでしょう。 ではどうしたら、表示していない画像を読み込まずに済むでしょうか？というのをこの記事でまとめています。 loading=”lazy”とdisplay:noneを組み合わせるdisplay:none（imgタグの親要素でもOK）とimgタグにl
独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル
CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！ 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います！ レスポンシブ対応の柔軟なレイアウトはもちろ
特定のタグだけを許可したい PHP
PHPで特定のタグだけを許可したい場合 サイト運営をしていると、コメント欄などで「特定のタグだけを許可したい場合」がたびたびあると思います。 例えば・・・・・ <b>タグや<u>タグ<strong>タグなんか許可したい場合があると思います。 PHPには、タグを取り除く「strip_tags関数」なる便利な物があるのですが・・・・ strip_tags関数 ＨＴＭＬタグおよびＰＨＰタグを取り除く strip_tags($text); strip_tags($text,'<a><b>');//'<a>タグと<b>タグだけ許可 //上のように第二引数で使用可能なタグを指定できるが //脆弱性があるので使わないように・・・ 詳しくは書きませんが、strip_tags関数には、虚弱性がありまして 第２引数で、指定したタグ以外を取り除く事ができるんですが 第２引数を使用した場合「ＸＳＳ（クロスサイトス
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
【PHP関連】「&」（アンパサンド）をエスケープしなければならない実例 - WEBプログラミング NOW!
ここ最近、htmlspecialchars関数について調べていて、いろいろ記事にしていたのですが、コメントをいただいた。参照となるページを教えていただいたのですが、実はそのページは、この記事を書く前に既に読んでいました。コメントに書かれていたページのURLをここに記させていただくと、 ●「サニタイズ言うなキャンペーン」私の解釈(2006/11/29) http://kmaebashi.com/zakki/zakki0042.html です。で、私の文章の書き方が悪かったのかもしれませんが、私はこの方の解釈とほぼ一緒（のつもり）です。ただ、このページで例として挙げられている「Taro&Jiro's castle サウスポール」の「&」は別に「&」とエスケープしなくても「Taro&Jiro's castle サウスポール」と表示されます。 そのため、そもそも「&」を「&」とエス
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
inputに対するlabelタグが効かないiOS版のSafari。これを回避するには…。
なんとなく html を書いているときに気がついたのでメモメモ。 例えば「チェックボックスを設置したとき、説明文をクリックしても反応する」ようにするためには、
HTML minifier
Case-sensitive Treat attributes in case sensitive manner (useful for custom HTML tags) Collapse boolean attributes Omit attribute values from boolean attributes Collapse inline tag whitespace Don't leave any spaces between display:inline; elements when collapsing. Must be used in conjunction with collapseWhitespace=true Collapse whitespace Collapse white space that contributes to text nodes in a d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML input type submit 送出表單按鈕 - HTML 網頁設計筆記 :: Branbibi Blog