タグ付けされた質問 「css」

カスケードスタイルシート(CSS)は、HTMLやXMLなどのマークアップの一般的なレイアウトと表示を指定するための言語です。

8
なぜ人々はdivでテーブルを作っているのですか?
現代のWeb開発では、このパターンに頻繁に出くわします。次のようになります。 <div class="table"> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> </div> CSSには次のようなものがあります。 .table { display: table; } .row { display: table-row; } .cell { display: table-cell; } *(クラス名は例示のみです。実際には、これらは要素の内容を反映した通常のクラス名です) 私も最近自分でこれを試してみました。なぜなら、みんながそれをやっているからです。 しかし、まだわかりません。なぜこれを行うのですか?テーブルが必要な場合は、ブラスト<table>を作成して完了です。はい、レイアウト用であっても。それがテーブルの目的です-ものを表形式でレイアウトします。 私が持っている最も良い説明は、今では誰もが「レイアウトにテーブルを使用しない」というマントラを聞いているので、彼らは盲目的にそれに従うということです。しかし、彼らはまだレイアウト用のテーブルを必要とします(他にテーブルの拡張機能がないため)、彼らは<div>(テーブルではないので!)作成し、とにかくそれをテーブルにするCSSを追加します。 すべての世界にとって、これはあなたのやり方で任意の不必要な障害物を置き、それらを回避するために余分な仕事をするようなものです。 レイアウトのためにテーブルから移動するための元の引数は、後で表形式のレイアウトを変更するのは難しいということでした。しかし、「フェイクテーブル」レイアウトの変更も同じ理由で同じくらい難しいです。実際、実際にはレイアウトの変更は常に困難であり、マイナーな調整よりも深刻なことをしたい場合は、CSSを変更するだけでは十分ではありません。あなたはします深刻な設計変更のためのHTMLの構造を理解し、変更する必要があります。そして、テーブルはdivよりも仕事を難しくしたり簡単にしたりしません。 実際、テーブルを使用してレイアウトを変更するのが困難になる可能性があると私が思う唯一の方法は、abを使用して、邪悪な混乱を作成した場合です。divでも同様です。 だから...これを暴言から首尾一貫した質問に変える試みで:私は何が欠けていますか?実際のテーブルよりも「偽物のテーブル」を使用する実際の利点は何ですか? 重複リンクについて:これは、別のタグなどを使用するための提案ではありません。これは<table>vsの使用に関する質問display:tableです。
269 html  css 

5
CSSやSVGで大量のマジックナンバーを使用できるのはなぜですか?
しばしば、私のようなホットネットワークの質問リスト上の質問を参照、この基本的には「私はCSSでこの任意の形状を描くんか」尋ねます。常に答えは、要求された形状を形成する一見ランダムにハードコードされた値の束を持つCSSまたはSVGデータのブロックです。 これを見ると、「うん!なんとcodeいコードブロックです。私のプロジェクトでこの種のものを見ないことを願っています。」しかし、私はこれらのタイプのQ&Aを非常に頻繁に、多数の賛成票で見ているので、明らかにコミュニティはそれらが悪いとは思わない。 しかし、なぜこれが受け入れられるのでしょうか?私のバックエンドの経験から来ると、これは私には意味がありません。では、なぜCSS / SVGで問題ないのでしょうか?

7
面接中に候補者のHtml / CSSの知識を評価するにはどうすればよいですか?[閉まっている]
私はHtml / CSSの仕事に来る人々の能力を評価するためにいくつかの良いインタビューの質問を決定しようとしていますが、そのトピックは非常に広範であり、誰かのHTML / CSSの知識。 面接中に候補者のHtml / CSS能力を評価するには、どのような質問をすればよいですか? 理想的には、いくつかの質問をしてから、実際の生活シナリオを提示して戦いたいと思います。

7
外部JavaScriptの参照と自分のコピーのホスト
jQueryを使用するWebアプリがあるとします。必要なjavascriptファイルをWebサイトのファイルと一緒に自分のサーバーでホストするか、jQueryのCDN(例:http : //code.jquery.com/jquery-1.7.1.min.js)で参照することをお勧めします? 私は両方の長所を見ることができます: サーバー上にある場合、外部依存関係は1つ少なくなります。jQueryがダウンしたり、ホスティング構造などを変更した場合、私のアプリは壊れます。しかし、私はそのようなことはあまり起こらないと感じています。これを行う多くの小規模なサイトが必要であり、jQueryチームはそれらを壊さないようにしたいと思うでしょう。 それが私のサーバー上にある場合、それは誰かがセキュリティの問題を呼び出すことができる1つ少ない外部参照です 外部で参照されている場合、ファイルを提供するための帯域幅を心配する必要はありません(それほど多くないことは知っていますが)。 外部で参照されており、すべてのファイルの独自のコピーを必要とする多くのサーバーにこのWebサイトを展開している場合、コピー/更新する必要があるファイルは1つ少なくなります。

8
HTML5の使用を開始するにはどうすればよいですか?[閉まっている]
HTML5を学習するための推奨ワークフローは何ですか?どのツールをインストールする必要がありますか?どのSDKですか?どこから始めれば?テスト方法 デバッグ方法 私は何を読みますか? 「HTML5開発」と呼ばれることが多いのは、実際にはHTML、CSS、JSなどの混合物であることを理解していますが、より大きなプロジェクトがメモ帳で開発されているとは思いません。だからこそ、ワークフローに関するヒントやコツを明らかにするようお願いしています。
42 javascript  html  css  ajax  html5 

6
グラフィックデザイナーと仕事をする正しい方法は何ですか?[閉まっている]
最近、グラフィックデザイナー(クライアントが手配)と協力して、作成したDjango + Bootstrapアプリケーションのスキンを提供しました。デザイナーは、いくつかの技術的属性(フォントサイズ、色、いくつかの寸法など)を説明するドキュメントとともに、新しいレイアウトの一連の静的画像を提供しました。 これを実装するには非常に時間がかかることが判明しました。サイト全体は基本的にフロントページ、インデックスページ、および6つの詳細ページでしたが、CSSとHTMLの変更を実装するだけで少なくとも5日間を費やしました。それで、私は手足に出て、これを間違った方法と呼びます。 私の基本的なアプローチは: 静的な画像と現在のレンダリングを比較して、違いに注目してください。 CSS / HTMLでどのような変更が必要かを推測します その変更を行う 手順1に進みます。 特定の問題のいくつかは、デザインに8列から12列への変更が含まれていることを理解していないことでした。ピクセルパーフェクトレンダリングなどを実現するために通常のCSSレスリングを使用します。また、特定の動作を得るために、HTMLテンプレートを再編成しなければならない場合がありました。 正しい方法は何ですか?

7
リンクする代わりにスタイル/スクリプトをHTMLに埋め込むのはなぜですか?
CSSファイルとJavaScriptファイルを連結してHTTPリクエストの数を減らし、パフォーマンスを向上させます。結果は次のようなHTMLです。 <link rel="stylesheet" href="all-my-css-0fn392nf.min.css"> <!-- later... --> <script src="all-my-js-0fn392nf.min.js"></script> これをすべて行うためのサーバー側/ビルドロジックがある場合は、さらに一歩進めて、連結されたスタイルとスクリプトをHTMLに埋め込みましょう。 <style>.all{width:100%;}.my{display:none;}.css{color:white;}</style> <!-- later... --> <script>var all, my, js;</script> HTTPリクエストは2つ少なくなりましたが、実際にはこの手法を見たことはありません。何故なの?

3
SASSがLESSより優れている点はありますか?[閉まっている]
私はこれらのCSSプリプロセッサの研究をしようとしています。 cssプリプロセッサとしてsassを使用するよりもsassを使用する利点はありますか?私が探している要因には、コミュニティの規模、ソフトウェアプロジェクトの成熟度などがあります。 これに関連する別の質問があったことは知っていますが、建設的に書かれて閉じられていませんでした。 更新 ブートストラップがSassを使用するようになったようです
36 css  less 

5
Javascript、HTML、およびCSS間の緊密な結合:より現代的なアプローチ?
要素を見つけ、データを保存し、イベントをリッスンするために、特定のセレクターにバインドされたJavascriptを見るのは非常に一般的です。これらの同じセレクターがスタイリングに使用されることもよく見られます。 jQuery(およびそのセレクターエンジンSizzle)は、CSSタイプの構文で要素を参照することにより、これをサポートおよび促進します。そのため、プロジェクトを構築するときに、この手法を「学習」(またはリファクタリング)することは特に困難です。 これはHTMLとJavascriptの開発の歴史の結果であり、この種のカップリングを効率的に消費/解析/レンダリングするためにブラウザーが構築されていることを理解するようになりました。しかし、Webサイトがますます複雑になるにつれて、この現実により、これらの個別のレイヤーを整理および維持するのが難しくなります。 私の質問は、これは現代のウェブサイトで回避できますか? 私がフロントエンド開発に不慣れで、「正しい方法」で学習したい場合、そのような依存関係を最初から切り離して回避することを学ぶ価値はありますか?これは、より分離された構造を促進するライブラリを支持してjQueryを避けることを意味しますか?
29 javascript  html  css  jquery 


6
HTML / CSSの命名規則に関する実用的な考慮事項(構文)[終了]
質問: 構文classおよびid値の実用的な考慮事項は何ですか? たとえば、このブログ投稿で説明されているように、セマンティクス、つまり使用されている実際の単語については聞いていないことに注意してください。命名規則のその側にはすでに多くのリソースがあり、実際には、さまざまな構文上のビットに関する実用的な情報の検索をあいまいにしています:大文字小文字の区別、インターパンクションの使用(特にダッシュ)、使用または回避する特定の文字など- 私がこの質問をしている理由を要約すると: 命名制限にIDとクラスが自然に任意の規則につながりません 命名規則のセマンティック側の豊富なリソースは、構文上の考慮事項の検索をあいまいにします これに関する信頼できる情報源が見つかりませんでした このトピックについては、SEプログラマーに関する質問はまだありませんでした:) 私が使用を検討した慣例のいくつか: UpperCamelCase、主にサーバー側のコーディングからのクロスオーバーの習慣として lowerCamelCase、JavaScript命名規則との一貫性のため css-style-classes、これはcssプロパティの命名と一致しています(ただし、Ctrl + Shift + ArrowKeyでテキストを選択すると迷惑になる場合があります) with_under_scores、私は個人的にあまり使用されていません alllowercase、覚えやすいが、長い名前では読みにくい UPPERCASEFTW、仲間のプログラマを困らせる素晴らしい方法として(おそらく読みやすさのためにオプション4と組み合わせる) そしておそらく、私はいくつかの重要なオプションや組み合わせも省略しました。命名規則にはどのような考慮事項があり、どの規則につながるのでしょうか?

3
LESSのようなネスト可能なスタイルシート言語を使用するよりもBEMが優れているのは何ですか?
私の同僚は、彼が手がけているプロジェクトでCSS のBEM(Block Element Modifier)メソッドを強く推し進めており、何年も書いてきたLESS CSSよりも優れているものを理解できません。 彼は「より高いパフォーマンス」を主張していますが、このコードショップで作成する種類のWebアプリにとって、パフォーマンスがどのように重要になるか想像できません。ここでは、TwitterやFacebookを作成していません。最も使用頻度の高いアプリが1か月に10000件以上ヒットし、ほとんどのアプリが1000件を大幅に下回っている場合、私は非常に驚きます。 彼は「読みやすさ」と「再利用」を主張していますが、私の意見では、LESSはすでにそれをはるかに上回っています。そして、BEMはこれらの非常に長いクラス名に特化した数十の余分な文字でマークアップをひどく壊し、読みやすさを根本的に低下させると感じています。 彼は「ネストされたCSSはアンチパターンである」と主張しています。「アンチパターン」とはどういう意味ですか?また、ネストされたCSSが悪いのはなぜですか? 彼は「誰もがBEMを使用する方向に動いているので、私たちもそうすべきだ」と主張しています。私のカウンターは「誰もが橋から飛び降りていたら、あなたはフォローしますか?」です。しかし、彼はまだこれについて完全に頑固です。 誰かがBEMをLESSより良くする理由を詳細に説明してもらえますか?私の同僚は完全に私を説得することに失敗しているが、私は選択肢に従うかどうかはわからない。私は、BEMを不承不承に受け入れるよりも、むしろむしろBEMに感謝することができます。
27 css  less 

1
ボックスモデル:Internet ExplorerとW3C
現在、Internet Explorerボックスモデルの問題はほとんど問題ではありません。ほとんどのWeb開発者は、<!DOCTYPE>標準への準拠を強制するためのタグを配置しますが、Internet Explorer 5.5のサポートを本当に気にする人はいません。 しかし、一部の開発者は、IEボックスモデルを防御するための主観的で概念的な議論を思いつきました。IEモデルはボックス自体を測定するのに対し、W3Cモデルはボックスのコンテンツを測定するため、IEボックスモデルはW3Cモデルよりも「直感的」であると主張しています。 私は彼らの視点を見ることができますが、それは基本的に主観的な議論であり、最も重要なことは標準への準拠です。 ただし、最近、深刻な実用上の理由からIEボックスモデルを好むようになりました。W3Cボックスモデルでは、要素を別の要素の正確な画面上のピクセル幅に動的にサイズ変更することは困難です。その理由はstyle.width、要素のプロパティが要素の画面上の合計サイズを考慮していないためです。追加の境界線とパディングも考慮する必要があります。両方の要素が同じCSSクラスを使用している場合、これは問題ではありませんが、異なる CSSクラスがある場合、これは非常に困難になる可能性があります。 AとBの2つのdivがあるとします。AはHTMLで400px divとしてハードコードされていますが、BはJavascriptを使用して動的に作成されます。視覚的には、BをAの正確な幅にする必要があります。古いIEボックスモデルでは、これは簡単です。私たちは単に言う:B.style.width = A.style.width、またはB.style.width = A.offsetWidth + "px"。 しかし、W3Cボックスモデルでは、これはそれほど単純ではありません。また、スタイルシートについても心配する必要があります。BがAと同じCSSクラスを持っている場合、単に言うことができますB.style.width = A.style.width。しかし、そうでない場合、そして美的理由でそれを望まないかもしれない場合、私たちは困っています。ここで、AとBの両方の境界線とパディングの合計ピクセルを考慮する必要があります。境界線とパディングが一貫性のない単位で指定されている場合、これは特に困難です(境界線は1px行であることが多いため、 emsで指定される場合があります)。次に、共通の単位(emからpxまたはpxからem)に変換する準不可能なタスクに直面しています。これはすべて、2つのdivを画面上に正確に並べるためです。 したがって、基本的に、W3Cボックスモデルでは、要素のサイズを設定するときにCSSの境界線とパディングの問題を考慮する必要がありますが、IEボックスモデルでは、幅がボックス全体のサイズを測定するため(エンドツー-end)、ボックスの内容ではなく。これにより、相互に関連して要素を動的にサイズ設定することが非常に簡単になります。 これはすべて、W3CモデルよりもIEボックスモデルを優先する非常に強力な理由のようです(少なくとも概念的には-もちろん、実際にはIEボックスモデルは死んでいます)。 質問:W3Cはなぜこのボックスモデルを選択したのですか?W3Cボックスモデルには、私には見られないいくつかの利点がありますか?または、ここで問題を単に誇張していますか?

12
Flash Webサイトからクライアントを話す方法は?[閉まっている]
閉じた。この質問はより集中する必要があります。現在、回答を受け付けていません。 この質問を改善したいですか?この投稿を編集するだけで1つの問題に焦点を当てるように質問を更新します。 5年前に閉鎖されました。 私は最近、口コミの推奨事項のみを通じて、多くのWebサイドプロジェクトを行っています。私はデザイナーというよりもプログラマーですが、私の設計スキルはひどくなく、多くのプログラマーのようにUIを扱うことを嫌いません。その結果、コンテンツ管理のための最小限のバックエンドは別として、ほとんどのプログラミングがフロントエンドインターフェイス(javascript / cssを読む)で行われるサイドプロジェクトに魅了されます。 私が経験した最大の不満は、クライアントがFlashを望んでいないことを納得させることです。Flashの「開発」が本当に好きではないという事実は別として、Flashが望ましくない多くの実用的な理由があります(デバイス間の互換性の欠如、クライアントのアクセシビリティの低下、プラグイン要件、開発時間の増加など)。クライアントに「フラッシュウェブサイトを構築しません」と言うのではなく、戦術を使用して、これが実際に望んでいるものではないことを納得/説明します。 / css / jsを使用して、ユーザーのコンテンツをそらします。 他の人はこれに関してどのような実体験をしますか?通常、javascript / css / AJAXがほとんどのWebサイトにとってより良い選択肢であることを誰かにどのように説明しますか?なぜ人々は最初からFlashを使いたくないのですか? この質問は、フラッシュを望む技術的な理由はないが、それがきれいなウェブサイトを作ると思うので、それが欲しいだけのクライアントに関係しています。
21 javascript  html  css  ajax  flash 

2
WebサイトにHTML / CSSレイアウトを使用する代替手段はありますか?[閉まっている]
この投稿を改善したいですか?引用や回答が正しい理由の説明など、この質問に対する詳細な回答を提供します。十分な詳細のない回答は、編集または削除できます。 ここで何が尋ねられているかを伝えるのは難しいです。この質問は曖昧、曖昧、不完全、過度に広範、または修辞的であり、現在の形式では合理的に答えることができません。この質問を明確にして、再開できるようにするには、ヘルプセンターに アクセスしてください。 7年前に閉鎖されました。 HTML / CSS以外のWebサイトのレイアウトを設計するためのマークアップまたはプログラム式を作成する既存の使用中の、または単なる概念的な試みはありますか? 他の人がいて、頻繁に使用されているように見えない場合。どうしてこれなの?

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.