20201006のCSSに関する記事は3件です。

投稿日：2020-10-06T23:04:40+09:00

メディアクエリを書いてレスポンシブ対応してみた話

【使用言語】

CSS

【きっかけ】

サンプルサイトを作成して行く過程で、PCとSP（スマホの略）を別々の表示にしたいと思った。
のでググってみると、メディアクエリなんちゃらというのがヒット。
試しにやってみることにした。

【解決策】

CSSにてメディアクエリを設定する
/* pc表示時のスタイル指定*/
@media screen and (min-width: 415px) {
　※ここにPC用のスタイル指定を記述
}
/* sp表示時のスタイル*/
@media screen and (max-width: 414px) {
　※ここにSP用のスタイル指定を記述
}
上記記述で
　画面サイズが415px以上と判定された場合→PC
　画面サイズが414px以下と判定された場合→SP
という意味でPC/SPの判別を行っている。

header部分で判別をさせる方法もあるが、こちらだと1つのCSSファイル上で
画面の表示を管理できるのでこちらを採用した。

参照サイト

レスポンシブの基本、メディアクエリの書き方

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-06T21:56:16+09:00

【デイトラ】初級ノートDAY5

◆悩んだとこ、後から気づいたとこをシェアしていきます。

デイトラをはじめました。
現在中級に入ったところですが、つまずくようになってきたので
初めて復習をしています。

復習にあたって、VSCodeでmarkdownを使ってノートをとるようにしました。
せっかくなので、同じ悩みの方に向けて投稿していきます。

単元を学習した後に読むのが良いと思います。

わたしも同様に初学者です。内容の正確性を保証することはできません。
訂正やより良い情報があればご教授お願いします。

✔この記事で解決できること

講義内容と課題の中でわからないことが解決できるかもしれない。

調べる時間を短縮できるかもしれない。

学習の仕方を効率化できるかもしれない。

◆DAY5 ゼロから作る ①

✔ VSCode の emmet を設定する

今後の作業効率化のためと忘れてもつまずかないように
emmetの設定をしてみました。

emmetの設定が書かれているjsonファイルを編集する必要があります。

VSCodeのウィンドウ左上Code

→基本設定

→ユーザースニペット

→html.json

参考サイトからコピーをさせていただくのが良いと思いますが、
私が今使っている設定を載せておきます。
 "html5": {
 "prefix": "!h",
 "body": "<!DOCTYPE html>\n<html lang=\"ja\">\n
  <head>\n
    <meta charset=\"UTF-8\">\n
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n
    <link rel=\"icon\" href=\"./favicon.ico\">\n
    <title>$1</title>\n
    <meta name=\"description\" content=\"\">\n
    <link rel=\"stylesheet\" href=\"./css/reset.css\" type=\"text/css\">\n
    <link rel=\"stylesheet\" href=\"./css/style.css\" type=\"text/css\">\n
  </head>\n
  <body>\n
  \n
    $2\n
  \n
  </body>\n</html>"
        },
解説
- !hを入力すると下記の"body":以下が出てきます。
- \nは改行です。\"はダブルクオートです。
- \$1に最初のカーソルが置かれます。入力すべき箇所を意味します。
- tabを押すと入力カーソルが$1から$2に移動します。

デフォルトのemmetから追加したこと
- html タグの lang を ja にした
- description を追加した
- favicon を追加した。

Bootstrapなど、新しいことを学んだ際に追加するようにしています。

参考サイト
https://keywordfinder.jp/blog/seo/favicon/
https://slash-mochi.net/?p=1978

✔ viewport について

viewportの詳しい説明がなかったので、調べてみました。

pxについて

CSS の px とは画素数ではなく長さの単位だそうです。(CSSピクセルとも言われる。)
画素数だと思ってましたが、画素数がどんどん細かくなっている今の時代は、
モニタによって1つの画素の大きさが違うそうです。

webページが表示される仕組み

HTMLファイルが viewport で下書きされ、デバイスに表示される。

この時、viewport の初期幅は一般的なデスクトップ画面である 980px です。
つまり、980px に収まるように下書きされる。
CSS で 980px を超えるように記述されたものははみ出てスクロールが必要になります。

次に、下書きがデバイスのブラウザに合わせて拡大もしくは縮小されて表示される。
具体的には、980px の下書きが、360px のスマホに縮小されて表示されます。
レイアウトがHTMLファイル通りだが、とても小さいwebページの出来上がり。

これを避けるために、width=device-width で、
下書きをする viewportの横幅をデバイスの画面と同じにします。
下書きの幅と同じ画面に表示してくれるので、
下書き後の拡大縮小は起こらないということのようです。

ちなみに、initial-scale はwebページ表示時に何倍に拡大するかという設定です。
下書きとデバイスの幅が一致しているなら1を設定すればよいのです。

参考サイト

https://www.youtube.com/watch?v=xdUjlpHRX0U

✔ reset.css の意味

CSSには、適用される優先順位があります。
最も高い優先度を持っているのが、user agentというスタイルシートです。

私達が記述した CSS の前に user agent という

ブラウザが設定している CSSのスタイルシートが適用されます。
このスタイルはブラウザごとに異なっているため、
想定通りの表示がされるように、
user agentのスタイルシートを
reset.css でを消します。

注意
まずはuser agentを消してからstyle.cssを読み込ませます。
<link rel="stylesheet" href="./css/reset.css" type="text/css">
<link rel="stylesheet" href="./css/style.css" type="text/css">
参考サイト
https://www.youtube.com/watch?v=aNnauB_PY3I

✔ font-size font-weight

親要素に指定しても子要素に反映されない。

最初の講義で、HTMLを親子にまとめて記述する理由の1つとして
親要素に指定したCSSが子要素に反映されるからと言っていましたが、
例外であるこれのルールについて説明している教材が少ないです。

講義ではなんとなく流してしまい、いざコーディングの時に気づきました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-06T19:18:05+09:00

エンジニアなら知らないと恥をかく！CSSでヘッダーを作る方法

概要

ヘッダーを作るにはFlexBoxを使う

リストマーク(・)を無効化するにはlist-style: none;

リンクの下線を無効化するにはtext-decoration: none;

ヘッダーの構成

こんなヘッダーを作っていきます。
まず、考えるべきことはレイアウトです。どんなHTMLで構成されているのでしょうか？
ヘッダー.html
<header class="header">
    <h1 class="header-title"><a href="#home">ヘッダータイトル</a></h1>
    <nav  class="header-nav">
        <ul class="header-nav">
            <li class="nav-list"><a href="#about">About</a></li>
            <li class="nav-list"><a href="#service">Service</a></li>
            <li class="nav-list"><a href="#contents">Contents</a></li>
        </ul>
     </nav>
</header>
大きな構成としては「ヘッダータイトル」と「ナビゲーション」の2つ。

そして、特徴的なのはナビゲーション内のそれぞれの項目(アイテム)がリストで構成されていることです。通常のHTMLでリストを表示するとリストマーク(・)が表示されますが、どうやって消すのでしょうか？
また、aタグのリンクによる下線も消されているのも気になります。

まとめると、CSSで実装するために課題となるのは以下の3つです。

項目を横に並べる方法

リストマークを消す方法

aタグの下線を消す方法

項目を横に並べるには？

まず1つ目は「ヘッダータイトルとナビゲーション」や「ナビゲーション内の項目」を横並びにする方法です。この2つは同じプロパティを設定します。

それはFlexBoxです。FlexBoxとは「Flexible Box Layout Module」の略で、簡単かつ柔軟にレイアウトを組むことができるボックスレイアウトのことです。

このFlexBoxを使うことでそれぞれのアイテムを横に並べることができます。
header.css
.header {
    display: flex;
}
このようにFlexBoxを使用します。displayプロパティで指定することでヘッダータイトルとナビゲーションが横に並びます。

しかし、今のままではヘッダータイトルとナビゲーションが左に寄っている状態です。サンプルのヘッダーを見てもらったらわかりますが、それぞれの項目が端に寄っている（タイトルが左端、ナビゲーションが右端）ヘッダーを作りたいのです。

そんな時に使えるのがjustify-content: space-between;です。justify-contentは横方向の並び順を指定するプロパティで、space-betweenを指定すればアイテム間のスペースを均等に割り当てます。そのため、2つしかない項目は両サイドによって並べられるのです。

水平方向はこれで大丈夫ですが、垂直方向がまだです。今のままだと上に寄っている状態です。中央に寄せるにはjustify-align: center;を使います。justify-alignでFlexBoxの垂直方向の設定を行います。

See the Pen RwRbMxq by swallow-enginer (@swallow-enginer) on CodePen.

次にナビゲーション内のアイテムも横並びにしましょう。こちらは右端に項目を寄せたいのでjustify-content: flex-end;を使います。このプロパティを使えばアイテムを末尾に寄せることが可能です。

また、アイテムの間隔を空けるためにそれぞれのアイテムにmargin-leftを設定します。

See the Pen oNLvdav by swallow-enginer (@swallow-enginer) on CodePen.

リストマークを無効化・リンクの下線の無効化

これでヘッダーのレイアウトの作成が完了しました。次にナビゲーションに表示されているリストマーク（・）を無効化します。
リストマークを無効化するにはlist-style: none;を使います。これを使えばリストについている「・」の表示を無効化できます。

最後はリンクの下線の無効化です。これは、aタグにtext-decoration: none;を設定するだけです。
これでヘッダーの完成です。

See the Pen RwRbyda by swallow-enginer (@swallow-enginer) on CodePen.

　 Tweet
Qiitaで続きを読む

20201006のCSSに関する記事は3件です。

メディアクエリを書いてレスポンシブ対応してみた話

【使用言語】

【きっかけ】

【解決策】

参照サイト

【デイトラ】初級ノートDAY5

◆悩んだとこ、後から気づいたとこをシェアしていきます。

✔この記事で解決できること

◆DAY5 ゼロから作る ①

✔ VSCode の emmet を設定する

✔ viewport について

pxについて

webページが表示される仕組み

✔ reset.css の意味

✔ font-size font-weight

エンジニアなら知らないと恥をかく！CSSでヘッダーを作る方法

概要

ヘッダーの構成

項目を横に並べるには？

リストマークを無効化・リンクの下線の無効化

日付別

タグ一覧