キーワードノート

カテゴリー: WEBサイト運営 / 各種コード

WEBサイト運営に関する情報やHTMLやCSSなどの各種コードの記事です

  • HTMLタグで平方メートル(m2)と立方メートル(m3)を書く方法

    HTMLタグで平方メートル(m2)と立方メートル(m3)を書く方法

    ウェブサイトやブログに平方センチメートルや立方メートルをテキスト表記させる方法をまとめました。

    いざ上付き文字が必要な場面になると意外とわからなかったり忘れてしまう事ありますよね。
    平方を「m2」とか立方を「m3」と表記しても不自然に見えますし、画像で表示させる場面もときどき見かけますが、手間がかかりますし文字の大きさを調整するのも面倒です。

    これらはHTMLや特殊記号などを使ってテキストで表示する事が出来ますのでご覧ください。

    supタグを使う

    上付き用文字のタグですので、まさにこのための使い方です。
    機種依存もなく、モバイル含めほとんどすべてのブラウザに対応しているためオススメです。
    もちろんHTML5でも仕様の変更はないため引き続き使用できます。

    単位 記述 実際の表示
    平方ミリメートル mm<sup>2</sup> mm2
    平方センチメートル cm<sup>2</sup> cm2
    平方メートル m<sup>2</sup> m2
    平方キロメートル km<sup>2</sup> km2
    立方ミリメートル mm<sup>3</sup> mm3
    立方センチメートル cm<sup>3</sup> cm3
    立方メートル m<sup>3</sup> m3
    立方キロメートル km<sup>3</sup> km3

    目次に戻る

    特殊タグを使う

    HTMLの特殊タグを使う方法です。
    これも同じくおすすめです。

    単位 記述 実際の表示
    平方ミリメートル mm&sup2; mm²
    平方ミリメートル
    (10進文字使用)     		mm&#178; mm²
    平方ミリメートル
    (16進文字使用)     		mm&#xB2; mm²
    平方センチメートル cm&sup2; cm²
    平方センチメートル
    (10進文字使用)     		cm&#178; cm²
    平方センチメートル
    (16進文字使用)     		cm&#xB2; cm²
    平方メートル m&sup2; m²
    平方メートル
    (10進文字使用)     		m&#178; m²
    平方メートル
    (16進文字使用)     		m&#xB2; m²
    平方キロメートル km&sup2; km²
    平方キロメートル
    (10進文字使用)     		km&#178; km²
    平方キロメートル
    (16進文字使用)     		km&#xB2; km²
    立方ミリメートル mm&sup3; mm³
    立方ミリメートル
    (10進文字使用)     		mm&#179; mm³
    立方ミリメートル
    (16進文字使用)     		mm&#xB3; mm³
    立方センチメートル cm&sup3; cm³
    立方センチメートル
    (10進文字使用)     		cm&#179; cm³
    立方センチメートル
    (16進文字使用)     		cm&#xB3; cm³
    立方メートル m&sup3; m³
    立方メートル
    (10進文字使用)     		m&#179; m³
    立方メートル
    (16進文字使用)     		m&#xB3; m³
    立方キロメートル km&sup3; km³
    立方キロメートル
    (10進文字使用)     		km&#179; km³
    立方キロメートル
    (16進文字使用)     		km&#xB3; km³

    目次に戻る

    1文字記号を使う

    2バイトの記号を使う方法ですが、これは機種依存文字ですので環境によってはクエスチョンマークや文字化けの原因になりますので、できる限り使わない方がいいでしょう。

    単位 記述 実際の表示
    平方ミリメートル &#13215; ㎟
    平方センチメートル &#13216; ㎠
    平方メートル &#13217; ㎡
    平方キロメートル &#13218; ㎢
    立方ミリメートル &#13219; ㎣
    立方センチメートル &#13220; ㎤
    立方メートル &#13221; ㎥
    立方キロメートル &#13222; ㎦

    目次に戻る

    「^」を使う

    「^」は上付きの意味があるので、「^2」とすれば平方を表現できます。
    ただしこれは技術者など一部の人にしか通じないと思いますので、使わない方がいいです。

    単位 記述 実際の表示
    平方ミリメートル mm＾2 mm＾2
    平方センチメートル cm＾2 cm＾2
    平方メートル m＾2 m＾2
    平方キロメートル km＾2 km＾2
    立方ミリメートル mm＾3 mm＾3
    立方センチメートル cm＾3 cm＾3
    立方メートル m＾3 m＾3
    立方キロメートル km＾3 km＾3

    目次に戻る

  • HTMLタグで省略表記の基になっている語句と意味を解説

    HTMLタグで省略表記の基になっている語句と意味を解説

    a href 、img src 、p 、div等など、HTMLでは様々なタグを使いますが、これらは基本的に何かの語句を省略した表記になっている…のは何となく理解出来ますが、その基(元)となっている単語は一体何なんだろうと思い調べました。

    デザイナーやコーダー、ブロガーなどウェブサイト制作に関わっている方は普段何気なく使っているHTMLですが、レイアウトだけを考えてタグを使うのではなく、意味を理解した上で適切な使い方をすると、しっかりと検索エンジンにも内容の意図が伝えられますので「SEOフレンドリー」なサイトが作れそうですね。

    ただ、W3CのHTML仕様書に何を略しているかの公式な定義はないので、用途から予測したり他のプログラムでも使われているコードから判断しています。

    なお、「HTML」は何の略かというと「HyperText Markup Language」(ハイパーテキスト マークアップ ランゲージ)。

    「URL」は「Uniform Resource Locator」(ユニフォーム リソース ロケーター)です。
    (さらに…)

  • Googleアナリティクスでリアルタイム解析の数値が極端に少なく表示される現象の対応方法

    時々、グーグルアナリティクスのリアルタイム解析で表示されている数値がおかしくなる不具合があるようです。
    本日1月7日にも確認し、現在もこの現象が継続している状態です。
    リアルタイム解析以外の「ユーザー」「集客」「行動」などの項目で表示される数値には異常はありません。

    全ユーザなのか一部だけなのかは不明ですが、ツイッターでも何人かの方がこの件についてのつぶやきを見かけましたので、該当ユーザは少なくはなさそうです。

    去年12月上旬頃にも同様の現象があり、その後同月中旬にも起こっているので、少なくとも今回で3回目と思われます。
    いずれも20時間ほど続いた記憶があるので、今回もそのくらいになるのでしょうか。

    この不具合の対応ですが、実は正しいと思われる数値を見る方法があります。
    (さらに…)

  • CSSの「word-break: break-all;」と「word-wrap: break-word;」で改行したときの違い

    英字が指定した範囲で改行されないのを修正する方法として使われるCSSとして以下の2つが使われます。

    1. word-break: break-all;
    2. word-wrap: break-word;

    両方とも確かに改行してくれるんですが、どのような違いがあるか実際に表示して確認してみます。

    (さらに…)

  • 「○(マル)」「□(四角)」などの記号や特定の文字だけが小さく表示される原因と対処方法

    ウェブサイトやブログで、他の文字と比べて「○」「●」「□」「■」などの記号だけが小さく表示されてしまう事があります。
    他にもあるかもしれませんが、確認できた原因としては以下のような条件下で発生するようです。

    • Unicode(UTF-8など)を宣言していてフォントを指定していない
    • 英字フォントを指定している

    IE7でのみ発生するとの情報が多かったんですが、僕の環境だとChromeやFirefoxなど他のブラウザでも小さい表示でした（他の条件や環境が絡んで違って表示されたのかもしれません）。

    解決方法は2つあって、1つめは文字コードをUTF-8以外にする事、2つ目はフォントを指定(変更)する事です。
    1つ目は業界の流れ的にも今後の事を考えた場合にもあまり現実的ではないので、2つめのフォントで対応する方法を紹介します。
    (さらに…)

  • HTMLタグ「ol,li」のリスト番号を逆から ＆ 指定した数字を表示せる方法

    HTLMの順序付きリスト「<ol><li>」は番号を順に表示してくれるタグですが、これを逆に数字の大きい順から表示されてくれる方法と、開始の数字を指定する方法。
    そして、例えば5番目のリストの数字を10に変更するなど、指定した数字に変更する方法をご紹介します。

    (さらに…)

  • CSSで出来る！決められた文字数を超えた場合に「…」を表示させるコード

    jQueryなどJavaScriptを使わず、指定した文字数やピクセル幅を超えてしまいはみ出た部分を「…」と表示させる事がCSSコードのみで可能です。

    例えばワードプレスのテーマを紹介しているこのサイトで使っています。
    スタイルシート「text-overflow ellipsis;」のサンプル
    リンク：WordPressテーマギャラリー
    オレンジ色の枠にあるテーマの名前が長い場合は、枠からはみ出たり2行になってしまいます。
    そうすると全体のレイアウトが崩れるため文字数を制限しています。

    コードはこちらを使います。

    text-overflow: ellipsis;

    (さらに…)

  • Google Analyticsで「拡張リンクのアトリビューション分析」の設定方法

    昨年2012年の暮れ頃に開始されたGoogle Analytics（以下GA）での「拡張リンクのアトリビューション分析」の設定方法のご紹介です。

    どんな機能かというと、通常GAでは同一ページ内の同じ飛び先のリンクについては同じものとして認識されるため、例えば「サイドメニューにあるトップページへのリンク」も「フッター部分にあるトップページへのリンク」も同じものとして計測され、どちらがどれだけクリックされたかの判別が不可能です。
    (さらに…)

  • ブログやウェブサイトで使われる用語「パーマリンク」とは？

    パーマリンク(permalink)は「不変、恒久、永久的」などと訳される「パーマネント(permanent)」と、「リンク(link)」を組合わせた「URLが変わる事のないリンク」という意味をもつ造語です。

    WEBサイトやブログの個々に割り当てられたページのURLを指します。
    (さらに…)

  • 「blink」を使わずPCからでも文字を点滅させるHTMLタグ「marquee」

    HTMLで文字を点滅させるタグといえばblinkタグが有名ですが、これは今すでにサポートが終了しているブラウザ「Netscape(ネットスケープ)」が採用していた独自タグでした。

    その後日本の大手携帯電話会社のいわゆるフィーチャーフォン(ガラケー)のブラウザにも採用され「携帯ホムペ」で頻繁に使われました。

    しかしInternet Explorerはじめその他主要のパソコンのブラウザではblinkで点滅させることが出来ませんので、別の方法を使う事になります。

    JavaScriptなどを使えばPCブラウザからも点滅文字を実現できますが、ここではHTMLでblinkの代替となるタグをご紹介します。

    (さらに…)