//CSS & Html

クレジット: https://www.sitepoint.com/pure-css3-speech-bubbles/ 私が初めて画像なしのスピーチバブルを作成したのは何年も前のことです。その際、DOMに要素を挿入するための長ったらしいJavaScript関数が必要で、ひどいCSSを使っていて、見た目もあまり良くなく、IE5ではうまく動作しませんでした。 CSS3は私たちの生活をより良く変え始めています。現在、すべてのブラウザーで動作し、1つのHTML要素、数行のCSS3コード、画像なし、JavaScriptなしで素晴らしいスピーチバブルを作成できるようになっています。 最初に、HTMLを確認しましょう。1つの要素だけが必要なので、Pタグを使用しています： <p>SitePoint Rocks!</p> まず、外枠のボックスをスタイリングします： p.speech { position: relative; width: 200px; height: 100px; text-align: center; line-height: 100px; background-color: #fff; border: 8px solid #666; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 2px 2px 4px #888; -moz-box-shadow: 2px 2px 4px #888; box-shadow: 2px 2px 4px #888; } そこまで難しくはありません。唯一の重要なプロパティは、スピーチバブルのポインターに必要なposition: relativeです。また、すべてのCSS3ブラウザーで動作するように、border-radiusとbox-shadowにはMozillaおよびWebkitのベンダープレフィックスが必要です。IE8以下では角が四角く、影は表示されませんが、ボックス自体は表示されます。 次に、三角形のバブルポインターを作成します。画像を使う代わりに、CSSのボーダーを使用して三角形を作成できます。簡単な説明として、異なる色のボーダーを持つ要素を確認してみてください： 要素の幅と高さを0pxにして、異なるサイズのボーダーを使うと、さまざまな三角形が形成されることがわかります： したがって、スピーチバブルポインターには、上部と左のボーダーを実線にし、右と下のボーダーを透明にすることができます： しかし、このボーダープロパティをどこに適用すればよいのでしょうか？幸い、CSSの:beforeと:after疑似要素を使用して、さらに2つのコンテンツ項目を生成することができます。したがって、次のようにします： p.speech:before..

• 53 ビュー
• 0 コメント

クレジット: https://techtalk.virendrachandak.com/php-isset-vs-empty-vs-is_null/   CSSのスタイリングの中で最も混乱しがちな点の1つは、テキストスケーリングのためにfont-size属性を適用することです。CSSでは、Webブラウザに表示されるテキストのサイズを測定するための4つの異なる単位が提供されています。これらの4つの単位のうち、どれがウェブに最適なのか？ これは議論や批判が多く、答えを見つけるのが難しい質問です。 単位の紹介 「Ems」（em）： 「em」は、Webドキュメントメディアで使用されるスケーラブルな単位です。1emは現在のfont-sizeと等しくなります。例えば、ドキュメントのfont-sizeが12ptの場合、1emは12ptです。emはスケーラブルな性質を持っており、2emは24pt、.5emは6ptなどとなります。emはスケーラビリティとモバイルデバイスに適した性質から、Webドキュメントでの使用が増えています。 ピクセル（px）： ピクセルは画面メディアで使用される固定サイズの単位です（つまり、コンピュータ画面で表示されるもの）。1ピクセルはコンピュータ画面の1ドット（画面解像度の最小単位）に相当します。多くのWebデザイナーは、ブラウザにレンダリングされたサイトのピクセル完璧な表示を作成するためにピクセル単位を使用します。ピクセル単位の問題は、視覚障害のある読者やモバイルデバイスに合わせてスケーリングできないことです。 ポイント（pt）： ポイントは印刷メディア（紙に印刷するなど）で伝統的に使用されます。1ポイントは1インチの1/72です。ポイントはピクセルと同様に、固定サイズの単位であり、サイズ変更できません。 パーセント（%）： パーセント単位は、「em」単位と似ていますが、いくつかの基本的な違いがあります。まず、現在のfont-sizeは100%に等しいです（つまり、12pt = 100%）。パーセント単位を使用すると、テキストはモバイルデバイスやアクセシビリティに適してスケーラブルなまま維持されます。 それで、違いは何ですか？ これらのフォントサイズ単位の違いは、実際に動かしてみると簡単に理解できます。一般的に、1em = 12pt = 16px = 100%です。これらのフォントサイズを使用して、baseフォントサイズを（body CSSセレクターを使用して）100%から120%に増やすとどうなるか見てみましょう。 100%から120%に増加したときのフォントサイズ。 ご覧の通り、emとpercent単位はbaseフォントサイズが増えると大きくなりますが、ピクセルとポイントは変わりません。テキストの絶対的なサイズを設定するのは簡単ですが、どんなデバイスや機械でも表示できるスケーラブルなテキストを使う方が訪問者にはやさしいです。このため、emとpercent単位はWebドキュメントのテキストに好まれます。 Em vs. Percent ポイント単位とピクセル単位がWebドキュメントに最適でないことがわかったので、em単位とpercent単位が残ります。理論的には、em単位とpercent単位は同じですが、実際にはいくつかの重要な違いがあります。 上記の例では、baseフォントサイズとしてpercent単位（bodyタグに設定）を使用しました。もし、baseフォントサイズをpercentからemに変更（例：body { font-size: 1em; }）した場合、違いはほとんど感じられないでしょう。では、bodyフォントサイズが「1em」で、クライアントがブラウザの「テキストサイズ」設定を変更した場合（これは一部のブラウザ、例えばInternet Explorerで利用可能です）どうなるか見てみましょう。 クライアントがブラウザでテキストサイズを変更したときのフォントサイズ。 クライアントのブラウザのテキストサイズが「中」設定の場合、emとpercentに違いはありません。しかし、設定を変更すると、違いはかなり大きくなります。「最小」の設定では、emはpercentよりもかなり小さく、逆に「最大」の設定では、emはpercentよりもかなり大きくなります。em単位が本来のスケーリングのように機能していると言う人もいるかもしれませんが、実際にはemテキストは急激にスケーリングし、最小のテキストは一部のクライアントマシンでほとんど読めなくなります。 結論 理論的には、em単位はWeb上でのフォントサイズの新しい標準ですが、実際にはpercent単位の方がより一貫したアクセス可能な表示を提供するようです。クライアントの設定が変更された場合、percentテキストは合理的なスケーリングで、デザイナーが可読性、アクセシビリティ、視覚的デザインを保つことができます。 勝者：パーセント（%）。 付録（2011年1月） この投稿を書いてから数年が経ち、この間に行われた議論と討論をまとめたいと思います。一般的に、新しいデザインを作成する際には、body要素にパーセントを使用し（body { font-size: 62.5%; }）、その後、em単位を使用してサイズを決定します。bodyがパーセント単位で設定されていれば、その後、どのCSSルールやセレクターでもemまたはpercent単位を使用しても、パーセントを基準にしたフォントサイズの利点を維持できます。過去数年で、これはデザインの標準になっています。 ピクセルは現在、許容されるフォントサイズ単位と見なされており（ユーザーはブラウザの「ズーム」機能を使って小さなテキストを読むことができます）、ただし、非常に高密度のスクリーンを持つモバイルデバイスの影響でいくつかの問題が発生し始めています（AndroidやiPhoneの一部のデバイスでは1インチあたり200〜300ピクセルの解像度があり、11ピクセルや12ピクセルのフォントが非常に見づらくなっています！）。そのため、私は今後もWebドキュメントでの基準フォントサイズとしてパーセントを使用し続けます。常に議論と討論は奨励され、歓迎されます。過去2年間の素晴らしいコメントに感謝します！ クレジット: https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

• 64 ビュー
• 0 コメント

簡単な答え：　はい、もう一つ「static」があり、これはデフォルトです。はい、それぞれは大きく異なります。それぞれが非常に役立つものであり、どれを使用すべきかは、もちろん、求める結果に依存します。また、floatも重要な位置決めの要素ですので、忘れないでください。 中くらいの答え：　「長い答え」を書き直す必要はありませんが、「中くらいの答え」をここで書いてみましょう。各タイプを簡単に説明します。また、この10ステップのチュートリアルを参照することをお勧めします。これは、非常にうまく説明しています。 最初に理解すべき重要な概念は、Webページ上のすべての要素はブロックであるということです。実際にはピクセルの長方形です。これは、要素をdisplay: block;に設定した場合、またはデフォルトでdisplay: block;が設定されている場合に簡単に理解できます。これにより、幅と高さを設定でき、その要素はその設定を尊重します。しかし、spanのようにデフォルトでdisplay: inline;の要素は、実際には長方形ですが、ページ上で異なる方法で流れます。つまり、横並びに配置されます。 すべてのページ要素をピクセルのブロックとしてイメージしたので、次に位置決めを使用して、これらのピクセルブロックを正確に配置する方法について話しましょう。ボックスモデルに関する議論は省略しますが、それもこの概念に影響します… Static。これはすべてのページ要素のデフォルトです。異なる要素には異なるデフォルト値が設定されているわけではなく、すべてがstaticから始まります。Staticはあまり意味がありません。それは、要素が通常どおりにページに流れ込むことを意味します。静的に設定された位置決めがある場合に、位置決めを強制的に取り除くために要素にposition: static;を設定する理由があります。これが必要になることはまれで、位置決めはカスケードしません。 Relative。この位置決めタイプは、おそらく最も混乱し、誤用されがちです。実際に意味するところは「自分自身に対して相対的」です。要素にposition: relative;を設定しても、他の位置決め属性（top、left、bottom、right）を設定しない限り、何の効果もありません。つまり、position: static;のままにした場合と同じです。しかし、他の位置決め属性を設定すると、たとえばtop: 10px;のように設定すると、その位置が通常の位置から10ピクセル下にずれます。このように、通常の位置から要素を動かす能力は非常に便利です。私はしばしば、フォーム要素を整列させるためにこれを使用します。Relativeに設定された要素に2つの他の重要なことが起こります。一つは、その要素にz-indexを使うことができるようになることです。静的に配置された要素にはz-indexが効きません。z-indexを設定しなくても、この要素は他の静的配置された要素の上に表示されます。静的配置された要素にz-indexを設定しても、それを覆すことはできません。もう一つは、相対的に配置された要素の子要素に絶対配置を適用できることです。これは非常に強力な機能を提供します。詳細については、こちらで説明しています。 Absolute。これは非常に強力な位置決め方法で、ページの要素を完全に希望通りに配置できます。位置決め属性（top、left、bottom、right）を使用して位置を設定します。これらの値は、相対配置または絶対配置された親要素に対して相対的です。親要素がない場合、それは<html>要素自体に対して相対的に配置され、ページ自体に配置されます。絶対位置決めの最も重要なことは、これらの要素がページ上の他の要素のフローから除外されることです。絶対位置決めがされた要素は、他の要素に影響されず、他の要素にも影響を与えません。これは絶対位置決めを使用するたびに真剣に考慮すべきことです。過度に使用または不適切に使用すると、サイトの柔軟性が制限される可能性があります。 Fixed。この位置決めタイプはあまり一般的ではありませんが、確かに使用する場面があります。固定位置の要素は、ビューポート、つまりブラウザウィンドウ自体に対して配置されます。ビューポートはウィンドウをスクロールしても変更されないため、固定位置の要素はページをスクロールしてもそのまま位置が維持され、昔の「フレーム」のような効果を作り出します。例えば、このサイト（更新：リンク切れ、申し訳ありません）では、左側のサイドバーが固定されています。このサイトは、固定位置決めの良い点と悪い点を両方とも示す完璧な例です。良い点は、ナビゲーションが常にページに表示されていることと、ページに興味深い効果を生み出すことです。悪い点は、いくつかの使い勝手の問題です。私の小さなノートパソコンでは、サイドバーのコンテンツが切り取られており、残りのコンテンツを見るためにスクロールできません。また、フッターまでスクロールすると、フッターの内容と重なり、すべてを見ることができません。クールな効果ではありますが、非常にテストを行う必要があります。 クレジット: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

• 56 ビュー
• 0 コメント