【CSS】テーブルの行と列を入れ替える
テーブルでは、行は横に列は縦に表示されますが、今回は図のように行を縦に、列を横に表示するようにしてみます。htmlはそのままで、CSSに数行追加するだけで行と列を入れ替えることができます。 最初に元のテーブルのhtmlとCSSを書いておきます。 .table1{ border: 1px solid #aaa; border-collapse:collapse; } .table1 th, .table1 td{ border: 1px solid #aaa; padding:4px; } .table1 th{ background-color: #ccc; } <table class="table1"> <tr><th>プラン</th><th>価格</th><th>容量</th></tr> <tr><td>X10</td><td>900円</td><td>200GB</td></tr>
htmlのmeta refreshを使ったリダイレクト設定 | サクラサクのSEO【SEO対策・コンテンツ制作なら】 あっ！サクラサクに相談しよう
『SEO会社が作った、今さら聞けないリダイレクト設定完全ガイド』 リダイレクトの基本から応用を分かりやすく解説！ 初心者から上級者まで実施できる内容を記載していますのでぜひご活用ください！ →無料ダウンロードはこちら リダイレクトとはリダイレクトという言葉は「向きを変える）という意味で、主にホームページを移転した場合や特定のページのURLを変更した場合に、新しいURLへアクセスを転送する事を言います。 リダイレクトの方法としては、HTTPレスポンスによるもの、HTMLのmeta refreshによるもの、javascriptによるものがあります。 それぞれのリダイレクトの方法には特徴や注意点があります。順番に見ていきましょう。 HTTPによるリダイレクト301リダイレクトや302リダイレクトなどで一般的に利用されている方法で、リダイレクトで最も良く使われるものです。 .htaccessやp
Rマーク（登録商標）とコピーライト（著作権記号）をHTMLで表す - Rollpie
Rマーク（登録商標）とトレードマークはHTMLで次のように表します。 Rマーク： 記号 ® 実体参照 ® 数値参照 ® トレードマーク： 記号 ™ 実体参照 ™ 数値参照 ™ セミコロンもつきます。 出力例 ® ® ™ ™ アンド記号とセミコロンの間に reg や trade を入れると記号が出力されます。数値参照ではアンドにシャープを続けます。 著作権記号（コピーライト） コピーライト（著作権記号）はHTMLで次のように表します。 記号 © 実体参照 &copy; 数値参照 &#169; セミコロンもつきます。ページUTF8に設定している場合、実体参照で記述する必要はありません。そのまま直打ちで©と入力しても表すことができます。 参考 2019年に学ぶべきプログラミング言語まとめ（web系） 学生の時からプログラミン
imgタグでエラー時の画像をonerror属性で設定する方法 - Qiita
onerror属性はjavascriptでも書くことができますが、今回はimgタグに直接うめこんでしまうことで1行でスマートにエラー時用の画像も含めてimgタグを実装します。 こんなかんじです
Contact Form7で自動挿入されるpタグを削除する | クロジカ
ホーム / ハック / Contact Form7で自動挿入されるpタグを削除する
Content-type:text/htmlのcharset指定はUTF-8,utf-8,utf8どれが正しいの？調べてみた。 · DQNEO日記
Home Subscribe UTF-8? utf-8? UTF8? utf8? 気になったので調べてみました。 結論 公式名称は "UTF-8" である。 UTF-8, a transformation format of ISO 10646 大文字小文字は区別されない。 UTF-8でもutf-8でもどちらでもいいようです。 " HTTP character sets are identified by case-insensitive tokens. " Hypertext Transfer Protocol -- HTTP/1.1 したがって、 Shift_JIS/shift_jis EUC-JP/euc-jp どちらでもＯＫということになります。 気になるあのサイトでは？ 世の中的にはこうなっていました。(2011/8/17現在)
HTML内でIDをつけた要素はJavaScriptのグローバル変数に格納される - Qiita
id属性に値を設定すると、設定した値の変数がwindowオブジェクトのプロパティとして作られてJSからアクセスできる。 <body> <div id="test">てすと</div> <div id="global">ぐろーばる</div> <script> console.log('test' in window); // true console.log('global' in window); // true console.log(test === window.test); // true console.log(global === window.global); // true </script> </body> こんな仕様になってたの知らなかった。 (HTMLの解析後に作られるのでDOMの準備が出来る前に参照するとエラーになる) Command Line APIとかで人様の
動画をページに埋め込む方法 | HTML解説
メトロ版のIE10はプラグイン非対応のため、ここで紹介する方法では動画を表示できません。よってデスクトップ版による表示を促すため、次のタグを<head>内に記述します。 <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" /> Developer guidance for websites with content for Adobe Flash Player in Windows 8 (Internet Explorer) | MSDN または、HTML5からサポートされるvideo要素を使用します。 object要素のみで記述する方法 <object data="URL" type="MIME Type" width="" height=""> <param name="movie" value="URL"
SELECT～OPTIONにIMG表示 - ぱぱろぐのこころぐ
Firefoxでは意図した通りに動いていますが、他は微妙。IEでは選択肢に画像が表示されません。Chromeでは画像は一切表示されません。 実は今まで知らなかったのですが、HTMLでは、素のままでは画像を選択する選択肢って作れないのですね。OPTION要素の中にIMGを置いてもまったく表示されないようで。これってどうしてできなくしてあるんだろ？セキュリティ的にも問題なさそうなんだけど。。。 対処法は、javascriptを使う必要がありますけれど、割と単純。 こんな感じ↓ 各選択肢をあらわすOPTION要素それぞれに背景画像を使えばよろしい（スタイルの指定でコチョコチョしますが）。 単一選択のドロップダウンリストの形式では、ドロップダウンが閉じた後は選択画像が表示されませんから、(SELECT要素の)onchangeで、選択されたOPTIONの背景画像をSELECT要素へ設定してやります。
HTML5のApplication Cacheを使う - Qiita
HTML5のApplication Cache機能を使って見ました。いろいろややこしいところもあったのでふりかえり。 情報が少ないと思ったら・・・（2015/10/26追記） どうも情報が少ないと思ったら、非推奨の仕様になっていたようですね。実際にFirefoxでは廃止が決定しています。 https://www.fxsitecompat.com/ja/docs/2015/application-cache-api-has-been-deprecated/ 記事内に書いてある「Service Workers」というのを使うと良さそうです。 Application Cacheとはなんぞや？ HTML5のApplication Cache機能とは、あらかじめ定義ファイルで指定したファイルをブラウザのローカル領域に保存し、オフライン時でもサイトの機能を利用することができるようにするための仕組みです
idセレクタを1つの要素に複数使ってはいけない理由 - console.lealog();
ふだん何気なく書いてるこいつらですが。 <div id="wrap" class="grid_24">hogehoge</div> どういう時にidをつけて、どういう時にclassを振るのか、いまいち意識してませんでした。 1つの要素にidって2つとか、複数指定したらあかんとは聞くけど、 なんであかんのかっていう疑問が生まれたので調べてみた。 基本的なおさらい idはhtmlファイルの中で一意の存在 <div id="top_sec"> <p>IDセレクタはhtmlファイル中、一回しか登場しません。</p> </div> <!--中略--> <div id="top_sec"> <p>↑のこういうのはNGということ。</p> </div> CLASSセレクタは何度でも書ける <div id="top_sec"> <p class="text">CLASSセレクタはhtmlファイル中、何度で
HTML5 で省略できるタグ - Qiita
の和訳 <html> はその最初の内容がコメントでなければ省略できる </html> は直後にコメントが続かなければ省略できる <head> は内容が空か、最初の内容が要素なら省略できる </head> は直後に空白文字かコメントがなければ省略できる <body> は内容が空か、最初の内容が空白文字かコメントでなければ省略できるが、最初の要素が meta, link, script, style, template なら省略できない </body> は直後にコメントが続かなければ省略できる </li> は直後に li 要素が続くか、親要素にそれ以上内容がなければ省略できる </dt> は直後に dt, dd 要素が続けば省略できる </dd> は直後に dt, dd 要素が続くか、親要素にそれ以上内容がなければ省略できる </p> は直後に address, article, aside,
プルダウンメニューの初期値 (ユーザビリティ実践メモ)
選択肢の多いプルダウンメニューから目的の項目を選び出すのは、ユーザにとって面倒な作業です。 今回はこの負担を少しでも軽減するために、今すぐできる改善施策をご紹介します。 例えば、あるサイトには昭和10年から平成19年の中から、自分の生まれた年を選択するプルダウンメニューがありましたが、プルダウンメニューの初期値を設定していなかったため、上記の中からスクロールを繰り返し、自分の生まれた年を探し出さなければなりませんでした。 改善策として、このサイトは若年層をメインターゲットとしていることに着目し、初期値を昭和61年とし、ユーザの負担を軽減しました。 【ご参考】プルダウンメニューの初期値を設定するhtmlタグ「selected」 <select name="XXX"> <option value=“59”>1984/昭和59年 <option value=“60”>1985/昭和60年 <op
新人コーダーに知っておいて欲しいリダイレクトの基本｜クロノドライブ
サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。 そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの設定方法と、代表的なリダイレクトの種類やその実装方法をご紹介します。 リダイレクトの種類 リダイレクトには、HTMLやJavaScriptといったクライアントサイドプログラム、PHPやPerlといったサーバサイドプログラム、あるいは.htaccessの設定変更を行う等、様々な対応方法があります。そのうちのいくつかを、実際のサンプルソースとともに解説します。 metaタグによるリダイレクト hea
(JavaScript)jQueryで選択した要素のタグ名を取得したい | old_3流プログラマのメモ書き
jQueryでidやnameを使って要素を選択しますが、選択した要素のタグを知る方法です。 以下のようにすればいいようです。 ●HTML側 <select id="hoge" name="hoge"> <option value="1"> hoge1</option> <option value="2"> hoge2</option> <option value="3"> hoge3</option> </select> <input type="button" onclick="return getTagName()" value="タグゲット"> ●JavaScript側 function getTagName(){ alert( $("#hoge")[0].nodeName ); } 実行結果は "SELECT" となります。 参考： javascript or JQuery でタグ
HTML5でルビ付き表示を行う方法（FirefoxとChromeのルビの扱い） - 結城浩のはてなブログ
ケイクスでのWeb連載『数学ガールの秘密ノート』が始まりました。ところで記事の中で、ルビの扱いがブラウザで微妙に違うことにお気づきでしょうか。まずはこちらをご覧ください。 第1回 文字と恒等式（前編） はじめの方に、女子高生テトラちゃんのセリフ「……先輩は恒等式（こうとうしき）のお話をしてくださいましたよね」が出てきます。この「恒等式」の部分は、以下のようにマークアップしています。 <ruby> 恒等式 ←1. 単語 <rp>（</rp> ←2. カッコ開き <rt>こうとうしき</rt> ←3. ルビ <rp>）</rp> ←4. カッコ閉じ </ruby> ルビに対応していないブラウザ(Firefox)では、上記の1,2,3,4が表示されます。 ルビに対応しているブラウザ(Chome)では、上記の1,3を使ってルビ付きで表示されます。 その結果、以下のように表示されます。Firefox
[HTML5]アウトラインで迷わない！ sectionと見出しについて
webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。 皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。 HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。 これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。 厳密な解説はこの記事を読まずとももっと信頼できる文
![[HTML5]アウトラインで迷わない！ sectionと見出しについて](https://cdn-ak-scissors.b.st-hatena.com/image/square/a579b466a9d9646edbe9cc1cec01abca7601b9fc/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fhtml5-section-outline-150x150.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
aタグでPDFなどの外部ファイルをダウンロードさせるときに使うdownload属性 | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
formのinput valueを配列で受け取りたい場合のname属性 - Qiita
CheatSheets - zen-coding - Cheat sheets for Zen Coding syntax and abbreviations - Project Hosting on Google Code