HTML5 と CSS3 の使用 idiom_html/css_WEB-ITnose

HTML5、CSS3、さらには Bootstrap を使用して Web サイトをデザインする場合、フォント サイズ、タイトル サイズ、行間隔、1 行あたりの単語数、フォント、色、背景画像とテキストのマッチング、アイコン、空白とレイアウト...これらはすべてカジュアルなものではなく、特定の原則に注意を払っています。この記事では、HTML5 と CSS3 を使用した Web サイトのデザインの一部をまとめます。

HTML5 と CSS3 でよく使用されるリファレンス Web サイトは何ですか?

● ブラウザのレンダリングは HTML5 標準に準拠しています: http://necolas.github.io/normalize.css/
● Google フォント: ttps://www.google.com/fonts
● ラスター: http:// www.ownedgridsystem.com/
● フラット カラー: http:// flatuicolors.com/
● カラー値の選択: http://www.0to255.com/
● アイコン: http://ionicons.com/
● css : https://css-tricks.com/
● js CDN: http://www.jsdelivr.com/
● さまざまなブラウザでの CSS プロパティの互換性: http://caniuse.com/
● ファビコンの作成: http://realfavicongenerator.net/
● 画像サイズの圧縮: http://optimizilla.com/
● CSS ファイルの最小化: www.minifycss.com
● JS ファイルの最小化: hTp:// www.minifyjavascript.com/
● HTML コードの検出: http://validator.w3.org/

活版植字?

● テキストフォントサイズ: 15px-25px の間で制御
● タイトルサイズ: メインタイトル 60px、90px、サブタイトル 32px
● 行間隔: 120%-150%
● 1 行あたりの単語数: 漢字約 40 文字、約 80 種類の英語
● フォント: ナチュラル、シンプル、モダン

色?

● メインカラーを 1 つ使用します
● カラーツールを使用します
● 目を引く色を使用します
● 純粋な黒は使用しないでください
● 赤: パワー、熱意、興奮、エネルギー; オレンジ: ポジティブ、注目を集める、ハッピー、革新的、友好的、自信、勇気; 黄色: 幸福、好奇心、明るさ; 緑: 調和、自然、生命、健康; 紫: 自由、エネルギー、富、誠実、神秘的、高貴な; ピンク: 思いやり、平和、女性的; ブラウン: 自信、リラックス、快適、信頼できる。
● ウェブサイトのプロジェクトで使用される色のリストを作成します

背景画像とテキスト?

● 画像にテキストを配置します
● グレーと黒の背景に白のテキスト
● 画像内の長方形の背景領域にテキストを配置します
● 背景をぼかした画像
● 背景画像の下部が徐々に茶色くなり、そして下は白いフォント

アイコン?

● 機能や手順を説明するときはアイコンを使用します
● メニューとリンクでアイコンを使用します
● アイコンはページ内で主役ではなく脇役としてのみ使用できます
● 画像よりも解像度が高いため、アイコン フォントを使用します

余白とレイアウト?

● ホワイトスペースは呼吸しています
● ホワイトスペースは必要ですが、ページ要素の関連性を失うことはできません
● ホワイトスペースはページ要素間の関係を反映できます
● ユーザーの閲覧の開始点、コンテンツの流れは一致しますコンテンツそのものへ、そして空白は

ユーザーエクスペリエンスへの流れを導くことができますか？

● ページのコンテンツは表示だけでなく感情でもあります
● ユーザーエクスペリエンスとビジネスロジックの交差点を考えてみましょう

インスピレーション?

● インスピレーションを集める
● 理解する
● 理由をもっと尋ねる
● 良いデザインの共通点は何ですか？
● HTMLとCSSはどうやってデザインするの？

ウェブサイトを構築するには 7 つのステップ?

1. 独自の Web サイトプロジェクトを定義する

● 目的は製品と視聴者を販売することであることを明確にする
● 視聴者を理解する
● デザイン、常に目的と視聴者を考慮する

2.素材を準備する

● テキスト情報、写真、動画、アイコンなど
● コンテンツファースト
● ナビゲーション方法を検討する
● Web サイトのファイル構造、サイトマップを検討する

3. プロトタイプのデザイン

4. デザインステージ

5 、最適化

パフォーマンス、SEO 最適化など

6. ホスト

7. ウェブサイトのメンテナンス

ブラウザのレンダリング要素は最新の標準を満たしていますか?

→http://necolas.github.io/normalize.css/

Web フォント?

→https://www.google.com/fonts

ラスター?

→ 参照: http://www.sensitivegridsystem.com/

flat ui color?

→ 参照: http:// flatuicolors.com/
→ 形式を選択
→ 背景をクリックすることと同等対応する色の値をコピーしました

類似した色の色の値?

→ 参考: http://www.0to255.com/
→ [色の選択] をクリックします
→ 値を入力し、[色の選択] をクリックします
→ 類似した値のリストから色を選択します

アイコン?

→ 参考: http://ionicons.com/
→ ダウンロードした ionicons.css ファイルを現在のプロジェクトにコピーし、ダウンロードしたフォント フォルダー内のすべてのファイルを現在のプロジェクトの fonts フォルダーにコピーします
→ ionicons の参照ページ内の .css ファイル

レスポンシブ デザイン?

● 流​​動グリッド: すべてのページ要素はパーセントなどの相対単位です
● 柔軟な画像: 画像サイズの単位もパーセントなどの相対単位です
● メディア クエリ: 端末ごとに異なる CSS を設定します

要素の状態変化に対する遷移効果?

div{
width:100px;
}

div:hover{
width:300px;
}

divの元の状態とホバー状態の間に遷移効果を追加したい場合は、次のように設定する必要があります:

div{
width:100%;
transition:width 2s;
}

div は丸くできますか?

--なるほど、本当に納得です。

.someclassname div{
color: #e67e22;
border: 2px Solid #e67e22;
display: inline-block;
border-radius: 50%;
height: 55px;
width: 5 5px;
text - align: center;
padding: 5px;
float: left;
font-size: 150%;
margin-right: 25px;
}

インライン要素を中央揃えにしますか? / /負の数はスペースを取り除くことを意味します

}

要素に設定された CSS は無効ですか?



要素の CSS 設定が、どのように設定しても無効になる場合があります。1 つの可能性としては、要素タグの名前が間違って記述されていることが考えられます。たとえば、セクションをセクションと書きます。

繰り返しになりますが、大きな背景画像をセクションや div などの特定の領域に完全に表示するにはどうすればよいでしょうか?

background-image:linear-radient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url();

background-size:cover;

background-position :center;

height:100vh;//vh はページビューの高さを表します

ブロックレベルの要素を円形にしますか?

height: 50px;
width: 50px;

要素を絶対配置しますか?

まず、その親要素が相対配置に設定されていることを確認します。

position:relative;

次に、要素を絶対配置に設定します。

position:Absolute;

top: -5px;

left: -5px;

幅を適応的に考慮する必要があるノードの数は何ですか?

0、480px、768px、1024px、1200px、幅の大きいものから小さいものまで、それぞれの幅の範囲に応じてデザインし、目に不快な点があれば修正します。

/*大きなタブレットから 1200 ピクセル、幅は 1140 ピクセルより小さい*/
@media のみの画面と (max-width:1200px){

}

/*小さなタブレットから 768 ピクセルから 1023 ピクセルの大きなタブレットへ*/

@media のみの画面と (max-width:1023px){

}

/*481 ピクセルから 767 ピクセルの小型携帯電話から小型タブレットまで*/

@media のみの画面と (max-width:767px){

}

/*0 ～ 480px の小型携帯電話*/

@media のみの画面と (max-width:480px){

}

また、head セクションに以下を忘れずに追加してください:

適応するにはどのような側面を考慮する必要がありますか?

● 幅と高さのパーセンテージまたはサイズをリセットします

● パディングのパーセンテージまたはサイズをリセットします

● マージンのパーセンテージまたはサイズをリセットします

● フォント サイズまたはパーセンテージをリセットします

● 画像を非表示にするかどうかを検討します

●画像のサイズを変更するかどうかを検討してください

● 特定の要素が表示されるかどうかを検討してください

Chromeで繁体字が表示され、簡体字が表示されない問題を解決するにはどうすればよいですか？

その他のツール→コーディング→自動検出


幅と高さを表示しながら Chrome ブラウザのサイズを変更しますか?

→ 開発者ツールを開きます
→ 「元に戻す」ウィンドウをクリックします

→ Chrome ブラウザの境界線をドラッグして、右上隅に現在のブラウザのサイズを表示します

これを通じて、特定のことを簡単に観察できます幅が変更されたときに要素に対応するスタイル。 (前提条件は、この要素に異なる幅のスタイルを設定することです)

どのブラウザとプレフィックスがありますか?

● Android: -webkit-
● Chrome: -webkit-
● IE: -ms-
● Firefox: -moz-
● Safari: -webkit-
● Opera: -o-

例:

-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;

これってすごく面倒じゃないですか？ ?はい、Brackets には、この問題の解決に役立つ「Autoprefixer」と呼ばれるプラグインがあります。

→ 特定のページ上のすべての CSS ファイルを選択します
→ 編集 -- プレフィックスの自動選択
→ すべての CSS にプレフィックスが付いていることがわかります

Autoprefixer が十分に賢く、プレフィックスを必要とするものだけができることがわかりますプレフィックスを追加します。

ファビコンを作成しますか?

→ http://realfavicongenerator.net/
→ 画像ファイルをアップロードし、保存する相対パス (例: resource/favicons) を入力します
→ [Favicon package] ボタンをクリックします
→提供されたリンクをページのheadセクションに配置してください

Webサイトプロジェクトをスピードアップするための対策は何ですか？

● 鮮明さを確保しながら画像サイズをできるだけ小さくするには、ツールを使用できます: http://optimizilla.com/
● CSS ファイルと JS ファイルを最小化するには、ツールを使用できます: www.minifycss.com とhTp://www.minifyjavascript.com/

基本的な SEO のヒント?

● メタのコンテンツ

各ページのヘッダーに追加しますか?

常識ですか？

● text-rendering: optimizeLegibility はブラウザにテキストのレンダリング方法を指示します。これは CSS3 の標準ではなく、ブラウザによってデフォルトのレンダリング設定が異なります。厳密に言えば、text-rendering は、ブラウザ上で期待どおりにテキストをレンダリングすることを完全には保証できません。ユーザーのブラウザ。

● ブロックレベルの要素のみが float、display:block でき、デフォルトで幅の 100% を自動的に占有します

● header ヘッダー部分

● height: 100vh は 100% ビューポートの高さを意味します

● 背景画像は、div、セクションなどの領域全体をカバーします

● 背景画像は中央に配置されます

● サイズはどれくらいですか大きな背景画像?幅は 2700px ～ 3000px、高さは 1500px ～ 2000px です。

● 変形。要素の操作、傾斜、回転、平行移動、拡大縮小に使用されます。たとえば、transform: translation(-50%,-50%); 要素の幅の 50% を左に移動し、要素の高さの 50% を上に移動します

● 要素を絶対的に配置する場合、従来のルーチンは次のとおりです:position:absolute ;width:1000px;top:50%;left:50%;

● 背景画像にグラデーションカラーなどの色のレイヤーを追加します:background-image:linear-gradient( rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(img/h.jpg);

● フォントサイズとフォントウェイトの相対性。フォント サイズが大きくなると、それに応じて font-weight 値を減らす必要があります。

● 文字間隔

● 単語間隔

● リンク a のいくつかの状態: .classname:link、.classname:visited、.classname:hover、.classname: active

● トランジション、要素の状態変化に対するトランジション効果

● ナビゲーション ナビゲーション バー

● 画像のスケーリング: 幅と高さの特定の値を固定し、他の値を自動に設定できます (例:height:) 100px;width:auto;

● :after、要素の後にコンテンツを追加します

● 表示: ブロック、新しい行を開始、デフォルトの幅は 100% です

● Figure、html5 要素タグ、ページ要素全体に影響を与えることなく削除できるチャート、画像、表示、コード スニペットなどが含まれるコンテンツ ユニットを表します

● 不透明度を設定します。不透明度: 0.7 注: この背景色は関連しています

;

● .someclassname:first-child 最初の someclass; .someclassname:last-child 最後の someclass、.someclassname:last-of-type も使用できます

● background-attachment: 背景画像が固定されます。フォローしません ページの残りの部分が移動します。デフォルト値のスクロールは、ページの残りの部分がスクロールすると背景画像も移動することを意味します

● blockquote は cite タグとともに使用されます

● CSS を使用して追加します要素の前後にいくつかの単純なコンテンツ:.someclassname:before、someclassname:after