投稿日：2020-07-30T22:15:21+09:00

【初心者でもわかる】HTMLとCSSだけで上部固定ヘッダーを作る方法（position: fixed;）

どうも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の基礎を数日～数週間勉強して、サンプルのヘッダーを参考に作ってみるといいかもしれません。

おそまつ！

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T21:21:43+09:00

【打倒！阿部寛のサイト】高校生が本気でサイト読み込み速度の最適化に取り組んでみた

さっそくですが、皆さん、阿部寛さんのサイトをご存知ですか？
エンジニア界隈の中では、ページ読み込みが早すぎると定番のサイトです。

http://abehiroshi.la.coocan.jp/

でも、ほぼHTMLのサイトだし、まあ早いのは当たり前。。
うちのサイトでページ読み込みをここまで早くするのは無理。
なんて思っていませんか？まだ最適化のためにできることがあるかもしれません。

この記事では、阿部寛さんのサイトを目指して、高校生が本気でサイトの読み込み速度を上げるためにやった施策を公開します。

今回最適化したサイト

今回、サイトの読み込み速度を爆速化したのはこちら。
静的サイトジェネレータのJekyllを使用して開発したサイトです。

子ども向けプログラミング学習サイト「メクルン」
https://mekurun.com/

GitHubレポジトリ(良ければFork、Starをぜひ)
https://github.com/Mekurun/mekurun.com

開発&制作メンバー
https://qiita.com/organizations/mekurun/members

GTmetrixでの計測結果

色んな計測サイトがありますが、どれが正確かなどはわからなかったので、
なかでも有名なGTmetrixで両サイトを計測してみました。

※日本のリージョンがなかったので一番近い中国のリージョンで計測

阿部寛さんのサイト

読み込み速度 1.4秒
ページサイズ 40.5KB
リクエスト数 6

メクルン

読み込み速度 1.5秒
ページサイズ 331KB
リクエスト数 24

Fully Loaded Timeという数値がページの読み込み速度なのですが、なんと0.1秒しか変わりません...！
さらに、メクルンは画像やライブラリなども色々と使用しているので、ページサイズは約8倍、リクエスト数も4倍近いです。

もうこれは互角..いや勝った(多分)

やったこと

メクルンの読み込み速度を爆速にするために行った施策をすべて書いてみました。
ここまで最適化するのはけっこう大変ですが、できるところからやってみてもいいかもしれません。

ひとつひとつの細かい説明に関しては省いている部分があります、ご了承ください。

極力ローカルから読み込む

Font Awesomeなど、外部CDNから読み込んでいるスクリプトやスタイル、Webフォントの中で、
ローカルから読み込んでも問題ないものは極力そうするようにしました。

外部CDNは読み込まれるまで時間がかかったり、キャッシュがされなくて速度低下につながったりすることがあります。

JSを非同期で読み込む

使用するJSは基本的に非同期で読み込むようにしました。
asyncやdeferをタグに入れることで対応ブラウザで非同期読み込みが可能です。
<script src="script.js" async></script>
<script src="script.js" defer></script>
asyncとdeferの違いはこちら
https://qiita.com/FeET/items/9445b0518d7e66fa2a26

スクリプト読み込みをFooter部分に移動

後から読み込んでも問題ないJSやCSSなどはbodyの閉じタグの後に読み込むようにしました。
HTMLは上から順番に読み込まれていくので、最後に読み込まれることになります。

画像はLazyLoad

画像は遅延読み込み(LazyLoad)するようにしました。
LazyLoadの対応はimgタグにloading属性を与えることで可能です。
<img src="image.png" loading="auto">
<img src="image.png" loading="lazy">
autoにすると相手の通信状況に応じて読み込むか読み込まないかをブラウザが自動で判断します。
メクルンでは、記事のサムネイルなどファーストビューにないものは遅延ロードするようにlazyにしています。

一部のブラウザには対応していないので、全ブラウザに対応させるためにはライブラリなどで実装する必要があります。

TinyPNGにかける

TinyPNGは画像を圧縮できるサービスです。
ローカルから読み込むFaviconやOGPなどは全てTinyPNGにかけました。
地道な作業ですが、確実に読み込み速度を向上させることができます。

https://tinypng.com/

Cloudinaryを使う

メクルンでは、画像の配信をCloudinaryというサービスを使って行っています。
Cloudinaryはサイトで読み込む画像を自動で最適化して配信してくれるサービスです。

Cloudinaryで行ったのは
- 画像圧縮の自動化
- 各ブラウザにあった画像ファイルの配信(WebP,JPEG HR,JPEG 2000など)
- 画像のリサイズ

の3つです。

Cloudinaryは各ブラウザに合わせて画像のファイル形式が最適なものを自動で選んで配信してくれます。
WebPなどにも対応しているので、Google Page Speed Insightsでも怒られることがなくなります。

画像のリサイズや圧縮などもパラメータだけで行うことができるのでとても便利です。

CloudinaryのFetch機能を使えば、画像URLを後ろにつけるだけで利用できるので、こんな感じに設定して使っています。w_{size}で画像のwidth指定、q_autoで画像圧縮を自動設定、f_autoでファイル形式を自動設定、c_fitは比率の設定です。次のようなURLを、imgタグのsrcに入れるだけで簡単に導入できます。

https://res.cloudinary.com/{{UserId}}/image/fetch/w_{size},c_fit,q_auto,f_auto/https://example.com/assets/images/image.png

無料枠があるので、月数万PVを超えなければ十分に無料で使えます。
こちらの招待リンクから登録していただくと、無料枠が増えますので、宜しければ是非。
https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/bjsk4z1eoyrp7mxw16hk

メクルンでは、Jekyllのビルドプラグインでビルド時にパスをCloudinaryのリンクに変換しています。
実装方法については友人の@yuki384が別記事で紹介していますので、ぜひご覧ください。
https://qiita.com/yuki384/items/06ae8a0235bec86e3add

HTTP/2 & gzip配信に対応しているサーバーにデプロイ

HTTP/2とgzip配信に対応しているサーバーを使うことが一番重要です。

詳細に関してはここでは触れませんが、Netlifyはどちらにも対応しているので、
メクルンは、Netlifyにデプロイしています。

Netlify CDN

CDNを使うことも速度向上に大きな効果をもたらします。

メクルンは、Netlifyにデプロイしてホストしています。
NetlifyはAWSのCloudFrontをベースに使った最適化されたCDNを提供しています。

Netlify CDNのパフォーマンスを最大限利用するにはDNS設定でネームサーバーをNetlifyにする必要があるようです。
Cloudflareなどを通してしまうと、逆に速度が遅くなってしまうので注意が必要です。

メクルンでは、Netlify DNSにネームサーバーを移してドメインを適用して運用しています。

Netlifyのデプロイ設定

Netlifyには実はサイトの読み込みを最適化できるオプションがあります。
Netlifyの設定の奥底にこういう設定項目があるのです。

HTMLとCSSのMinify
HTMLとCSSの縮小化を行ってくれます。
余計な改行などを削除して、サイズを減らして配信されるので読み込みが少し早くなります。

Bundle配信

CSSやJSをまとめてHTTPリクエスト数を下げてくれる機能みたいです。
Webpackを使っているので、あまり効果があるのかわからないですが一応ONにしています。

画像の圧縮

Cloudinaryを使っているのであまり意味はないのですが、
これをONにしておくことで、画像の圧縮も行ってくれます。

設定はNetlifyの Settings > Build & deploy > Assets optimization からできます。

preload

普通、スクリプトやスタイルはこのように読み込みますよね？
しかしこれだと、ファイルのリクエストがこのタイミングで走って読み込まれるので少し遅くなります。
<link rel="stylesheet" type="text/css" href="/css/main.css">
先に読み込み(preload)を行っておくと、linkタグが読み込まれた時にすぐに使えるようになります。
CSSファイルやWebフォント、JSファイルなど、必要なものを先に読み込んでおくと読み込み速度が早くなります。
headの開始タグのすぐ下らへんにこんな感じで書くと実装できます。
<link rel="preload" href="/css/main.css" as="style">
対応しているブラウザでのページ読み込みが早くなります。

preconnect dns-prefetch

DNS解決、つまりドメインをIPアドレスに変換する作業がリクエスト時に行われるのですが、
それを先に行っておくことで、scriptや画像CDNからの読み込みの高速化を図っています。

headの開始タグのすぐ下らへんにこんな感じで書くと実装できます。
<link rel="preconnect dns-prefetch" href="https://res.cloudinary.com/">
<link rel="preconnect dns-prefetch" href="https://www.google-analytics.com/">
<link rel="preconnect dns-prefetch" href="https://www.googletagmanager.com/">
Webpack

詳しい説明は省きますが、メクルンではWebpackも使用しています。
WebpackはHTMLやCSS、JSをビルド時に1つのファイルにまとめてくれるものです。

1つのファイルにまとめることで、リクエスト数や読み込みファイルを最小限にして読み込みを早くしています。

PWAに対応

これは読み込み速度にはあまり効果はないかもしれないですが、PWAにも対応しています。

もっと改善できたこと

日本にCDNがあるサーバーを使う

Netlifyが日本にCDNサーバーがなくて、若干遅いのが唯一の欠点。
なので、日本にCDNがあるAWS S3やVercelでホストすればもっと早くなったのかなと思います。

しかし、自動デプロイやフォーム機能が便利なので、Netlifyを使っています。
(はやく無料プランでも日本リージョンを使えるようになってくれぇ..)

https://testmysite.io/5f1d36732859c227c452b2aa/mekurun.com

Jekyllの代わりにGatsbyやNuxt.jsを使う

今回は、Jekyllで実装を行いましたが、GatsbyやNuxt.jsを使うと、
この記事で紹介した一部の最適化を自動でやってくれるので手早く高速なサイトを作れます。

まだ技術選定されていない方は是非、候補に入れてみてください。

InstantClickを導入する

https://dev.to/ などで使われているInstantClickというライブラリを入れるとページ遷移が爆速になります。
具体的には、マウスを遷移先のリンクに載せるとそのページのファイルなどを先読みしてくれるようなものです。

Google Tag Managerとの関係で、今回は導入を見送りました。

http://instantclick.io/

PurgeCSSをつかって使われてないCSSを削除

CSSコードの中には使われていないものも混じっているので、PurgeCSSを使って、
使っていないコードをビルド時に取り除けば、もっとCSSの読み込みがはやくなったのかもしれません。

CSSを別ファイルに分ける

今はサイト内で使われてる全てのCSSコードを同じCSSファイルに書いています。
なのでそのページでは使われていないコードを読み込むことでほんの少し速度が落ちているかもしれません。

それぞれのページでCSSファイルをわけるとより早くなるかもしれないです。

まとめ

いかがだったでしょうか。

以上、高校生が本気でサイトの読み込み速度の最適化に取り組んだ全容でした。
誰かのサイトのパフォーマンス改善に役に立てばと思います。

良ければ記事のシェア、LGTMなどよろしくお願いします。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T21:16:56+09:00

初心者によるプログラミング学習ログ 386日目

100日チャレンジの386日目

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

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

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T16:11:15+09:00

序盤に勉強するpタグとdivタグ

調べてみたが...

あんまりピンときませんでした
なのでとりあえず並べてみた結果、以下のような違いが見られました。
<body>
    <h1>2020年井上計画</h1>
    <p>今のところなし</p>
    <p>今のところなし</p>
    <p>今のところなし</p>
    <p>今のところなし</p>
    <p>今のところなし</p>
    <div>そのうち考える</div>
    <div>そのうち考える</div>
    <div>そのうち考える</div>
    <div>そのうち考える</div>
    <div>そのうち考える</div>
</body>
pタグは行間があるのに対し、divタグは狭いですね。
こちらgoogleを使って検証してみました。

pタグは文字が青いブロックに囲まれており、その上下はオレンジ色のブロックで挟まれているのに対し、divはオレンジ色のブロックがありません。
またstyleは以下のようになってました。
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

div {
    display: block;
}
divはdisplayプロパティのみで、pはdisplayにプラスmarginが入ってるわけですね。
つまり、paragraph用に、divに装飾を加えたものがpタグという認識でよいかと思います。
だとしたら、すべてdivでもいいような気もするような。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T16:11:15+09:00

序盤に勉強するpタグとdivタグの違い

調べてみたが...

あんまりピンときませんでした
なのでとりあえず並べてみた結果、以下のような違いが見られました。
<body>
    <h1>2020年井上計画</h1>
    <p>今のところなし</p>
    <p>今のところなし</p>
    <p>今のところなし</p>
    <p>今のところなし</p>
    <p>今のところなし</p>
    <div>そのうち考える</div>
    <div>そのうち考える</div>
    <div>そのうち考える</div>
    <div>そのうち考える</div>
    <div>そのうち考える</div>
</body>
pタグは行間があるのに対し、divタグは狭いですね。
こちらgoogleを使って検証してみました。

pタグは文字が青いブロックに囲まれており、その上下はオレンジ色のブロックで挟まれているのに対し、divはオレンジ色のブロックがありません。
またstyleは以下のようになってました。
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

div {
    display: block;
}
divはdisplayプロパティのみで、pはdisplayにプラスmarginが入ってるわけですね。
つまり、paragraph用に、divに装飾を加えたものがpタグという認識でよいかと思います。
だとしたら、すべてdivでもいいような気もするような。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T14:01:28+09:00

【HTML/CSS】文の先頭にアイコンがあるとき、2行目も1行目の開始位置と合わせる text-indent

この記事は

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

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.

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T02:52:25+09:00

HTMLへの動画の埋め込み方

なぜ記事を書いたのか

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

　方法
OOO.html
<video src="video.mov" controls></video>
といった形の記述をして動画ファイルをvscode内に取り込めば

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T02:32:52+09:00

コーディング開始時によく見るタグ

コーディング開始時によく見るタグの意味...

かなりわかりやすいサイトがあったのでこちらを参照してみてください。
https://webst8.com/blog/html-major-basic-tag/

さて、それでは以下のコード見てみましょう。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>HTMLの勉強</title>
    </head>
    <body>
        <h1>2020年井上計画</h1>
        <p>今のところなし</p>
        <strong>そのうち考える</strong>
        <footer>
            <p><a href="https://qiita.com/popo62520908">プライバシーポリシー</a></p>
            <p><a>1990 lnoueRyo Inc.</a></p>
        </footer>
    </body>
</html>
以下の4つのタグは必ず見ると思います。

・<!DOCTYPE html>
・<html>
・<head>
・<body>

これら4つ再確認のために意味を調べてみました。ではひとつづつ解説していきます

<!DOCTYPE html>

まず最初に、正確にはタグではないとのこと。

これはつまり、

$\huge{今からHTML5使うよ～}$

ってことです。
ちなみに以前のバージョン、HTML 4.01の場合、宣言する種類が3つあるらしく、書き方は若干変わるみたいです。
しかしながら、初学者はこれに関してちゃんと覚える必要はないと思うのであえてスルーします。
一応3つのうちの1つを例に以下記載しておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

この中身にはhtmlが書かれてるよう位の意味らしい。中身はHTML Document!みたいな感じです。
なお、省略可能とのこと。

<head>

ブラウザ上には表示されない情報を書く場所です。<body>の反対という認識でいいんじゃないでしょうか。
文書の作者情報、サーチエンジン向けのキーワードや説明、文書のタイトル、利用するスタイルシート等その文書に関する情報を記述します。

※なお、タイトルのみブラウザ上に表示されます。（HTMLの勉強）

<body>

こちらはもうご存じかと思います。<body>タグ内にコードを記入することで実際に書いたコードがブラウザに反映されるよということですね。メインの場所つまりbodyという事ですね。

たぶんこういう事ではないかと、なんとなく理解してましたが、調べたことにより理解が深まり、とてもよかったと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T02:32:52+09:00

HTMLのタグ、要素、属性について②

コーディング開始時によく見るタグの意味...

かなりわかりやすいサイトがあったのでこちらを参照してみてください。
https://webst8.com/blog/html-major-basic-tag/

さて、それでは以下のコード見てみましょう。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>HTMLの勉強</title>
    </head>
    <body>
        <h1>2020年井上計画</h1>
        <p>今のところなし</p>
        <strong>そのうち考える</strong>
        <footer>
            <p><a href="https://qiita.com/popo62520908">プライバシーポリシー</a></p>
            <p><a>1990 lnoueRyo Inc.</a></p>
        </footer>
    </body>
</html>
以下の4つのタグは必ず見ると思います。

・<!DOCTYPE html>
・<html>
・<head>
・<body>

これら4つ再確認のために意味を調べてみました。ではひとつづつ解説していきます

<!DOCTYPE html>

まず最初に、正確にはタグではないとのこと。

これはつまり、

$\huge{今からHTML5使うよ～}$

ってことです。
ちなみに以前のバージョン、HTML 4.01の場合、宣言する種類が3つあるらしく、書き方は若干変わるみたいです。
しかしながら、初学者はこれに関してちゃんと覚える必要はないと思うのであえてスルーします。
一応3つのうちの1つを例に以下記載しておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

この中身にはhtmlが書かれてるよう位の意味らしい。中身はHTML Document!みたいな感じです。
なお、省略可能とのこと。

<head>

ブラウザ上には表示されない情報を書く場所です。<body>の反対という認識でいいんじゃないでしょうか。
文書の作者情報、サーチエンジン向けのキーワードや説明、文書のタイトル、利用するスタイルシート等その文書に関する情報を記述します。

※なお、タイトルのみブラウザ上に表示されます。（HTMLの勉強）

<body>

こちらはもうご存じかと思います。<body>タグ内にコードを記入することで実際に書いたコードがブラウザに反映されるよということですね。メインの場所つまりbodyという事ですね。

たぶんこういう事ではないかと、なんとなく理解してましたが、調べたことにより理解が深まり、とてもよかったと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T01:53:18+09:00

HTMLのタグ、要素、属性について

タグ、要素、属性とは...

なんとなくで把握していたので、これを機に調べてみました。

タグ（tag）：要素を作るために必要なもの→"<>"
要素（element）：意味付けられた文章のかたまり、開始タグから終了タグまでのこと
属性（attribute）：要素にプラスの効果をもたらすもの、要素の何かしらの設定をつけるようなもの

といった感じでまとめてみましたが、~~ぶっちゃけわからない~~と思うので、以下を参照してください。

ここで覚えてて頂きたいのが、上に書いている要素と属性の英語です。
後に勉強するであろうJavascriptでアレルギーを引き起こさないためです
念のために再度記載しておきます。

要素（element）～～（el）

属性（attribute）～～（attr）

後に必ず役に立つはず！！

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T01:53:18+09:00

HTMLのタグ、要素、属性について①

タグ、要素、属性とは...

なんとなくで把握していたので、これを機に調べてみました。

タグ（tag）：要素を作るために必要なもの→"<>"
要素（element）：意味付けられた文章のかたまり、開始タグから終了タグまでのこと
属性（attribute）：要素にプラスの効果をもたらすもの、要素の何かしらの設定をつけるようなもの

といった感じでまとめてみましたが、~~ぶっちゃけわからない~~と思うので、以下を参照してください。

ここで覚えてて頂きたいのが、上に書いている要素と属性の英語です。
後に勉強するであろうJavascriptでアレルギーを引き起こさないためです
念のために再度記載しておきます。

要素（element）～～（el）

属性（attribute）～～（attr）

後に必ず役に立つはず！！

　 Tweet
Qiitaで続きを読む

20200730のHTMLに関する記事は11件です。

【初心者でもわかる】HTMLとCSSだけで上部固定ヘッダーを作る方法（position: fixed;）

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

position:fixed;で固定できる

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

簡単に解説

まとめ

おそまつ！

【打倒！阿部寛のサイト】高校生が本気でサイト読み込み速度の最適化に取り組んでみた

今回最適化したサイト

GTmetrixでの計測結果

阿部寛さんのサイト

メクルン

やったこと

極力ローカルから読み込む

JSを非同期で読み込む

スクリプト読み込みをFooter部分に移動

画像はLazyLoad

TinyPNGにかける

Cloudinaryを使う

HTTP/2 & gzip配信に対応しているサーバーにデプロイ

Netlify CDN

Netlifyのデプロイ設定

preload

preconnect dns-prefetch

Webpack

PWAに対応

もっと改善できたこと

日本にCDNがあるサーバーを使う

Jekyllの代わりにGatsbyやNuxt.jsを使う

InstantClickを導入する

PurgeCSSをつかって使われてないCSSを削除

CSSを別ファイルに分ける

まとめ

初心者によるプログラミング学習ログ 386日目

100日チャレンジの386日目

序盤に勉強するpタグとdivタグ

調べてみたが...

序盤に勉強するpタグとdivタグの違い

調べてみたが...

【HTML/CSS】文の先頭にアイコンがあるとき、2行目も1行目の開始位置と合わせる text-indent

この記事は

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

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

HTMLへの動画の埋め込み方

なぜ記事を書いたのか

方法

コーディング開始時によく見るタグ

コーディング開始時によく見るタグの意味...

<!DOCTYPE html>

<html>

<head>

<body>

HTMLのタグ、要素、属性について②

コーディング開始時によく見るタグの意味...

<!DOCTYPE html>

<html>

<head>

<body>

HTMLのタグ、要素、属性について

タグ、要素、属性とは...

HTMLのタグ、要素、属性について①

タグ、要素、属性とは...

日付別

タグ一覧

　方法