どうも7noteです。よく見かける上部に固定されているヘッダーをHTMLとCSSだけで作る方法を解説。

まずは実際に固定ヘッダーを使っているサイトを紹介。

• SUUMO
• TECHACADEMY
• アップル

こんな感じで上部に固定されているヘッダーを作っていきます。

position:fixed;で固定できる

今回のヘッダーにはposition: fixed;を使うのですが、position: fixed;について簡単に説明しておきます。
まずpositionには主に以下の4種類があります。

• static （初期値）
• relative （相対指定）
• absolute （絶対指定 -relative基準-）
• fixed （絶対指定 -ウィンドウ基準-）

positionは位置関係を指定するプロパティなのですが、fixedはウィンドウを基準とした絶対位置になります。
絶対位置は左から、上からなどの位置を指定できるので、たとえば左上から0pxの位置から幅いっぱいの要素を配置すると、スクロールしても上部に固定されたヘッダーが作れます。
実際に作ってみましょう。

上部固定ヘッダーの作り方

index.html

<header>
    <h1>WEB-STUDIO</h1>
    <nav class="gnav">
        <ul class="menu">
            <li><a href="">○○について</a></li>
            <li><a href="">仕事</a></li>
            <li><a href="">採用</a></li>
            <li><a href="">お知らせ</a></li>
            <li><a href="">お問い合わせ</a></li>
        </ul>
    </nav>
</header>

<main>
    <p>こんにちは！</p>
</main>

style.css

body {
    padding-top: 90px; /* ヘッダーの後ろに要素が隠れないようにするため */
}

header {
    width: 100%; /* 幅いっぱいを指定 */
    height: 50px; /* 高さを50pxに指定 */
    background: #CCC; /* 背景色にグレーを指定 */
    padding: 20px 50px; /* ヘッダーに上下左右それぞれ余白を指定 */
    box-sizing: bordre-box; /* padding分を含んで幅を100%にするため */
    position: fixed; /* ウィンドウを基準に画面に固定 */
    top: 0; /* 上下の固定位置を上から0pxにする */
    left: 0; /* 左右の固定位置を左から0pxにする */
    display: flex; /* 中の要素を横並びにする */
    align-items: center; /* 中の要素を上下中央に並べる */
}

header .gnav .menu {
    display: flex; /* 中の要素を横並びにする */
}

header .gnav .menu li {
    list-style: none; /* リストの[・]を消す */
}

header .gnav .menu li + li {
    margin-left: 40px; /* メニューそれぞれに間隔をあけるため */
}

main {
    height: 100vw; /* スクロールの演出を見れるようにmainに高さを指定 */
}

簡単に解説

headerに高さ90px(heightの50px + paddingの20px)があるので、予めbodyの上にpadding90pxを取ります。
これがないとヘッダーの後ろに他の要素が隠れてしまうので、忘れずにcssを指定します。

そしてheaderにposition: fixed;を指定して、leftとtopに0を指定することでウィンドウの左上を基準として固定されます。
これでページをスクロールしても常に上部にヘッダーが固定されます。
他のcssは見た目を調整するために入れただけのものなので解説は省きます。

まとめ

HTMLとCSSだけで簡単に上部固定ヘッダーを作りました。
たとえばスクロールしたらヘッダーの形が変わるとか、別のヘッダーが出てくるなどはjavascriptを使う必要があるので、もっといろいろやりたい！という方はjavascriptの基礎を数日～数週間勉強して、サンプルのヘッダーを参考に作ってみるといいかもしれません。

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

100日チャレンジの386日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
386日目は、

おはようございます
昨日の作業⇩

●就寝前筋トレ5分、キンドル読書 10分
●ブログ1記事作成
●プログラミング学習386日目 2h
・メンターの課題
・スライドショーの、背景画像の調整#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ

— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 29, 2020

:-webkit-full-screen,:fullscreen {
  height: 100%
}

一見問題なさそうじゃん？
ところがこれ、Firefox( :fullscreen, :-moz-full-screen には対応してる）でも
Safari( :-webkit-full-scree には対応してる)でも動かないんだな

ちなみにIEは -ms-fullscreen らしい

CSS セレクタ、グループ化の落とし穴: 我的春秋

グループ化したセレクタ群の中に、ひとつでも閲覧中のブラウザが未対応のセレクタを含むと、グループ化したほかのセレクタまで無効化されてしまって、グループ化したブロックのスタイルが適用されなくなってしまうみたいです。

なんか仕様らしい。

:-webkit-full-screen {
  height: 100%
}

:fullscreen {
  height: 100%
}

こう直しましょう。

余談: ベンダープレフィックス付きのスタイル一緒にしてたよ？

セレクタじゃなくてスタイルは対応してないものについては無視されるので大丈夫

.hoge{
  -webkit-transition:all 0.2s ease 0s;
  -moz-transition:all 0.2s ease 0s;
  -o-transition:all 0.2s ease 0s;
  transition:all 0.2s ease 0s;
}

:-webkit-full-screen,:fullscreen {
  height: 100%
}

一見問題なさそうじゃん？
ところがこれ、Firefox( :fullscreen, :-moz-full-screen には対応してる）でも
Safari( :-webkit-full-scree には対応してる)でも動かないんだな

ちなみにIEは -ms-fullscreen らしい

CSS セレクタ、グループ化の落とし穴: 我的春秋

グループ化したセレクタ群の中に、ひとつでも閲覧中のブラウザが未対応のセレクタを含むと、グループ化したほかのセレクタまで無効化されてしまって、グループ化したブロックのスタイルが適用されなくなってしまうみたいです。

なんか仕様らしい。

:-webkit-full-screen {
  height: 100%
}

:fullscreen {
  height: 100%
}

こう直しましょう。

余談: ベンダープレフィックス付きのスタイル一緒にしてたよ？

セレクタじゃなくてスタイルは対応してないものについては無視されるので大丈夫

.hoge{
  -webkit-transition:all 0.2s ease 0s;
  -moz-transition:all 0.2s ease 0s;
  -o-transition:all 0.2s ease 0s;
  transition:all 0.2s ease 0s;
}

この記事は

いつも文頭にアイコンがあるときのやり方を忘れて若干慌てるので覚書き

See the Pen text-indent by mame_hashbill (@mayu-mameuda) on CodePen.

テキスト側にpadding-leftとtext-indentを入れる

padding-leftで左側にアイコン分の空白を作り、
text-indentでマイナスすることで、1行目のみ文字を左に1文字分ずらす。

もっとアイコンとの距離を空けたいときは

アイコン側にmargin-rightを指定。
テキスト側にpadding-leftとtext-indentをpxで指定。
両者の絶対値は同じにしないと（padding-left:30px,text-indent:-30pxなど）左にアイコンがはみ出ちゃうので注意。

See the Pen
text-indent2 by mame_hashbill (@mayu-mameuda)
on CodePen.

はじめに

いつの間にか「アンテク技術ブログ」が公開されていたので、ﾎｴｰ、っと眺めていたら、 cssの拡張言語scssが面白くて便利だった(初級編) という記事がありまして、SCSSへの感動が溢れかえっており心を打たれたんですけど、はじめ方が割愛されていたので、せっかくだからワイが書くかと補足記事的に書くことにしました。

SCSSって何？

もともとは中括弧大嫌いなRuby界隈で爆誕した「インデント構文で書けるCSS」である、Sassというスタイルシート言語の拡張版です。セレクタをネストさせて書けたり、変数が使えたり、mix-inという機能で関数的に記述を使いまわせたり、それは大変便利なものなのでした。（どう便利なのかは cssの拡張言語scssが面白くて便利だった(初級編) を読んでください）

Sass自体はこれまたインデント記法で書けるHTMLテンプレート構文であるHamlの相棒みたいなもんです。（更にそれのJavascript版が謎にアンチの多いCoffeeScriptですね）
要はもともとは そうまでして死んでもブロック構文書きたくない というお気持ちが爆発している人たちのものでした。彼らの気持ちは大変よくわかります。。。

ですが、いかんせん インデント記法が非プログラマには敷居が高すぎる ということでSCSSが生まれました。というか、Sass側がライバル的なスタイルシート言語 LESS の構文をガツッとパクってきただけ、というのはあるのですが、これと Compass というCSSフレームワークの台頭によりSass勢は一気に利用者を増やすことになりました。

Compassが流行ったのはIEとFirefoxとSafariとChromeとOperaでそれぞれCSSの記述方法が微妙に違う（ベンダープレフィックスを付けないといけない）という地獄の時代があったからです。それについてはこちらの記事を読むといいでしょう。 今はベンダープレフィックスはいらないです。
CSSが超絶便利になる！Compassについてまとめてみた

始め方は2つある

Ruby on Rails以外ではSCSSはコンパイル（やってることはトランスパイズなんだけど）しないとCSSとして使えないので、そのコンパイラというのを入れるわけですが、実装はいくつかあるわけなのです。今回はよく使われているであろう2種類を紹介します。

• Rubyのsassというgemを使う
• Node.jsのnode-sassというパッケージを使う

Rubyのsassというgemを使う

RubyはMacだと最初からインストールされているのですが、Windowsだと自分で頑張ってインストールする必要があります。
https://www.ruby-lang.org/ja/downloads/

そしたらこのコマンドをターミナルで実行したら sass コマンドが使えるようになっています。
参考: https://rubygems.org/gems/sass

$ gem install sass

インストールできたら、ターミナルで以下のコマンドを実行するとSCSSをCSSに変換できるようになっているはずです。

$ sass [input.scss] [output.css]

細かいコマンドの使い方はこちらをご参照ください。
Ruby Sass Command-Line Interface

watchオプションとかは変更を自動検出してコンパイルしてくれるので便利ですよ！

Node.jsのnode-sassというパッケージを使う

Node.jsはMacでもWindowsでもインストールしないといけません。
まあ、でも難しくはないのでここからダウンロードしてきましょう。
https://nodejs.org/ja/download/

そしたらこのコマンドをターミナルで実行したら node-sass コマンドが使えるようになっています。
参考: https://www.npmjs.com/package/node-sass

$ npm install -g node-sass

インストールできたら、ターミナルで以下のコマンドを実行するとSCSSをCSSに変換できるようになっているはずです。

$ node-sass [input.scss] [output.css]

細かいコマンドの使い方はこちらをご参照ください。
Command Line Interface

watchオプションとかは変更を自動検出してコンパイルしてくれるので便利ですよ！（デジャヴュ）

エディタ側

エディタ側は色々あるのですが、PhpStormを入れれば特になんにもしなくても使えるので買うのが一番早く、生産性が高いと思われます。PHP使わないならお安い版のWebSrormというのもあるのでぜひご検討ください！
https://www.jetbrains.com/ja-jp/phpstorm/
https://www.jetbrains.com/ja-jp/webstorm/

VSCodeだと「Live Sass Compiler」というプラグイン入れたらそれで終わりのようですね。これ入れたらさっきのgem入れたりnode module入れたりすらいらなさそう。。。
VS CodeでScssを書くための環境構築方法

なぜ記事を書いたのか

ポートフォリオ サイトに、動画を埋め込もうとした際に備忘録として残しておきたかったからです。

　方法

OOO.html

<video src="video.mov" controls></video>

といった形の記述をして動画ファイルをvscode内に取り込めば

このような形でコントロールパネル付きで動画が表示されるようになります。
以上です。