🍕

🍕ウェブサイトの作成🍕

2022/12/05に公開5件

CSS

🌟ウェブサイトの作成

HTMLとCSSの実践！

新しいトピックについても実践を交えながら
コーディングに利用することで効率的に学習できた🙆🏻‍♀️

Webサイトの実践

🌱html5リセットシート

CSSをリセットするためのCSSファイル

ブラウザがデフォルトのCSSを持っている場合があるので
それをリセットし、レイアウトへの影響を減らすためのもの。
予期しないトラブルを減らすことができる！

CSSをリセットするためのファイルは自分で書いても良いが公開されている実績のあるものを使っても◎

CSSフォルダ内に入れる
⚠️CSSフォルダより上に配置

    <link rel="stylesheet" href="css/html5reset-1.6.1.css">
    <link rel="stylesheet" href="css/base.css">

CSSは原則上から下に向かって解釈されるので、
自分で記述したスタイルの反映が消えてしまわぬよう順序が重要！

🌱HTMLのマークアップ

マークアップ
HTMLタグを使って、文章を構造化する作業のこと
ブラウザがこれを認識することで、見出し・リスト・リンクなどが画面上にわかりやすく表示される
コーディング
HTMLだけでなく、JavaScriptやPHP、Python、Rubyなどのさまざまなプログラミング言語を用いて、ソースコード全体を記述していく作業のこと
つまり、ソースコードを記述するコーディングの中にマークアップを行う作業がある、という考え方になる

φ(･･
ページごとに違うスタイルを当てたい時にidを振っておくと便利
idやクラスをつけるタイミングは特に決まりはないが、
講師の方はHTMLを記述する段階である程度付けてしまい
CSSを記述する段階で不足する場合は付け足すといったことが多いらしい！

🌱ダミー画像の設定

実務では開発を始めても画像などの素材が出来上がっていないことがよくあるらしい
他の作業を進められるようにダミーの画像を入れて、
素材が出来上がれば差し替えればOK！！

ダミー画像を挿入できるサイトの一つ👇
https://placeholder.com/

入力例）
https://via.placeholder.com/100x90
横x縦

CSSによるスタイルの設定

φ(･･

header nav ul li a:hover,
header nav ul li a:active,
header nav ul li.current a {
  color: #8c6239;
}

a:link { color: blue; } /* 未訪問リンク */
a:visited { color: purple; } /* 訪問済みリンク */
a:hover { background: yellow; } /* ホバー時 */
a:active { color: red; } /* アクティブなリンク */
p:active { background: #eee; } /* アクティブな段落 */

Rem
rem（レム）は「root em」の略で、名前のとおり「最上位階層の『em（エム）』」を意味する
（emは活字で用いられていた大文字「M」の大きさを基準に１文字分の大きさを表す単位）

メリット

親要素の指定の影響を受ける「%」や「em」に比べて、個々の要素の文字サイズの設定がしやすい
HTML要素の文字サイズを調整することでサイト全体の文字サイズ変更にも対応しやすい

#info dd {
  width: calc(100% - 7em);
}

calc() はCSSの関数で、CSSのプロパティ値を指定する際に計算を行うことができるもの
<length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer>
が利用できる場所ならば使用できる

footer ul li a:hover,
footer ul li a:active {
  opacity: 0.7;
}

opacity はCSSのプロパティで、要素の不透明度を設定できる
不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆

🌱レスポンシブ対応

端末のサイズによって見やすい表示に切り替え
スマートフォンなど横幅の小さい端末で見た場合に縮小され見づらい

viewport

viewportとは、 PCやモバイル（スマホ、タブレット）といったデバイスごとに
コンテンツの表示領域を設定するためのHTML属性値（meta要素のname属性の属性値）のこと
直訳すると「表示領域」を意味し、読み方は「ビューポート」

meta要素のviewportで指定することで、PC・モバイルなどの表示領域を指定できる

<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>

φ(･･
Googleは、現時点でこの記述を推奨している
表示領域の幅を指定する方法もあるが、現在は端末画面の幅に合わせることを推奨
「width=device-width」を記述することで、表示領域の幅を、PCやスマホなどの端末画面の幅に合わせられる
また、「initial-scale=1」は初期のズーム倍率を表し、1に設定することで、初めに表示された時の違和感をなくす

🌱viewportで設定可能な要素

width（横幅）
height（縦幅）
initial-scale （初期倍率）
maximum-scale（最大倍率）とminimum-scale（最小倍率）
user-scalable （ズーム操作の可否）

参考サイト

🌱メディアクエリーの使用

メディアクエリーは、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトやアプリを変更したいときに便利

例）横幅が600px以下の時の{}に記載したCSSが適用される

@media (max-width: 600px) {
  html {
    font-size: 87.5%;
  }

  .header_logo {
    width: 60px;
  }

  .contents {
    flex-direction: column;
    margin-top: 10px;
  }

  #main_content,
  #sidebar {
    width: 100%;
  }
}

🌱メタデータの設定

ページの付加的なデータ
Description:コンテンツに関する簡潔で正確な概要
SEOの観点で重要、検索されたいページに入れる

例

<meta
      name="description"
      content="CSS Cafeの公式ウェブサイトです。商品情報、店舗紹介、アクセス、会社情報など"
    />

昨日進めた分のまとめをサクッと！
完璧を求めすぎるといけないな何においても！
少しずつでも諦めないことが大事！
今週も頑張ろう💪🏻パワー

Discussion

記憶より記録

SEOが気になりますね

Airichan

横からコメント失礼します！
自分もわからないなと思って調べてみました！
＜seo(検索エンジン最適化)に強いとは＞
＝google検索エンジンが情報を認識しやすい最適なコーディングであり、
　ユーザーファーストであること。
　→具体的には
　　・見出しタグの正しい使用
　　・imgタグにalt属性をつける(＝画像ないテキストの読み上げ)
　　・リンクの最適化(<a>タグにアンカーテキスト、キーワードの挿入など)　etc

ちなみにHTMLのMarkupの意味は、
”文書構造（テキスト）や視覚表現（装飾）などの情報を、
コンピューターが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくこと”
と、ここにも正しく認識できるようにという意味があることにも気づきました！

Airichan

そのリセットCSS初めてみた！私はsanitize.cssを使ってた！

そこで違いを調べてみたよ！
＜HTML5 Doctor CSS Reset＞
・余白や文字の設定を全てリセットするので、イチから自分でデザインできる。
まっさらな状態から、全て自分でデザインを調整したい方にオススメ。

＜sanitize.css＞
・有用なCSSのみを残し、デフォルトでそれなりにデザインが整っているため手軽に使える。
スマホなどのモバイルに対応していることもsanitize.cssの特徴の一つ。

みたいな感じだった！
HTML5 Doctor CSS Resetとsanitize.cssの2つは両方とも他のリセットcssよりおすすめで、
自分で全部やりたいか、少し楽にやりたいか、って感じ。笑

saya

めちゃくちゃ分かりやすい説明ありがとう！！！
使い分けできるように覚えておく！🥹💛💛

jonsoku

ふたりともすごいですね🥺