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

この記事のカテゴリ
WEBサイト運営 / 各種コード
この記事に付けられたタグ

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

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

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

hrefやaは何の略?各種HTMLタグで省略表記の基になっている語句一覧

この記事のカテゴリ
WEBサイト運営 / 各種コード
この記事に付けられたタグ

a href… 、img src… 、p… 、div等など
何気なくHTMLを使っていて「そもそもこれらの意味や元になっている用語って何なんだろう」って思う事はありませんか?
ここでは各種HTMLタグが何を略したものなのか、どんな意味なのかをまとめました。

レイアウトだけを考えてタグを使うのではなく、意味を理解した上で適切な使い方をすると検索エンジンにも優しいサイトが作れそうですね。

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

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

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

この記事のカテゴリ
WEBサイト運営 / 各種コード
この記事に付けられたタグ

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

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

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

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

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

この記事のカテゴリ
WEBサイト運営 / 各種コード
この記事に付けられたタグ

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

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

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

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

この記事のカテゴリ
WEBサイト運営 / 各種コード
この記事に付けられたタグ
,

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

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

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

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

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

この記事のカテゴリ
WEBサイト運営 / 各種コード
この記事に付けられたタグ

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

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

この記事のカテゴリ
WEBサイト運営 / 各種コード
この記事に付けられたタグ

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

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

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

text-overflow: ellipsis;