キーワードノート

タグ: CSS

CSSに関する情報一覧へ

  • 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つめのフォントで対応する方法を紹介します。
    (さらに…)

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

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

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

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

    text-overflow: ellipsis;

    (さらに…)

  • HTML・CSS・PHPなど各種コードでのコメントタグ(コメントアウト)まとめ

    HTML、XHTML、CSSそれぞれのコメントタグのサンプルを一覧にしました。
    コメントタグで囲まれたテキストは、サイトを閲覧したときには見る事が出来ません。
    ただソースを見ればそのまま表示されていますので、見られてはまずい秘密を書くのではなくサイト運営上必要なコメントを書くようにして下さい(なお厳密に言うとタグではなく宣言です)。
    (さらに…)