タグ head内
人気順 10 users 50 users 100 users 500 users 1000 users【令和最新版】Google Fontsの読み込み最適化の結論 ｜ TAKLOG
2024/03/12
12 users
TAKLOG
CLS
href
link rel
結論
当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。 結論いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。 <link rel="preconnect" href="https://fonts.googleapis.com" /... 続きを読む
head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js
2023/06/07
15 users
プライオリティ
重み
記述
順番
パフォーマンス
head内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。 指定したページのhead内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。 2023... 続きを読む
2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
2023/01/25
460 users
head
elements
HTML
要素
総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にラ... 続きを読む
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
2021/10/01
218 users
レンダリング
CSS
head
要因
箇所
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題... 続きを読む
[CSS]シンプルなWebサイトを少しだけ美しくするためのスタイルシートのコレクション -water.css | コリス
2019/04/09
63 users
フレームワーク
コリス
外部CSS
CSS
デモページ
シンプルなWebサイトをすぐに構築したい時、デモページを簡単に作成したい時、CSSでスタイルするのに時間をかけたくない時に便利なCSSのフレームワークを紹介します。 class付与を一切必要としないスタイルシートで、HTMLページを用意したら、head内に外部CSSとして加えるだけで、すぐに利用できます。 water.css water.... 続きを読む
head内に記述するソーシャルメディア・検索エンジン用のmetaタグを簡単に生成できる無料ツール -Meta Tags | コリス
2018/11/12
42 users
コリス
デバッガー
Facebook
OGP
Meta
head内のmetaに記述するTwitterカードやFacebookのOGPなどのソーシャルメディア用のコード、Googleなどの検索エンジン用のコードを簡単に作成できる無料のオンラインツールを紹介します。 公式のデバッガーですぐに確認もできるので、非常に便利です。 Meta Tags Meta Tagsでは、下記のソーシャルメディア・検索エンジン... 続きを読む
はてなブログに外部CSSを当てる方法とそのメリット - はるなぴログ
2018/06/16
37 users
外部CSS
ロク
メリット
テキストエディタ
干渉
2018 - 06 - 16 はてなブログに外部CSSを当てる方法とそのメリット はてなブログカスタマイズ ドロップボックスに外部CSSファイルを置いて共有化する head内にリンクタグを設定 外部からCSSファイルを配信するメリット テーマCSSとの干渉を避けることが可能 小さくて見にくい「デザインCSS」の窓ではなく使い慣れたテキストエディタが使用可能 ファイルを更新するだけですぐにCSSが適... 続きを読む
HTMLページのhead内に記述する要素の総まとめ | コリス
2017/09/26
950 users
コリス
CheatSheet
head
meta要素
最小限
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した 以前の版 からいろ... 続きを読む
WordPressなら何をしても良いという話ではない はてなブログのnoindex措置 - Minimal Green
2016/12/17
51 users
noindex
Minimal Green
措置
検索流入
2016 - 12 - 18 WordPressなら何をしても良いという話ではない はてなブログのnoindex措置 はてなブログ WordPress はてなブログを運営していて突然検索流入が無くなったという事例がありました。 head内にnoindexメタタグを入れられる措置にあったようです。 どのブログのことか、はてブのホッテントリ見れば分かると思いますのでリンクは貼りません。 noindex... 続きを読む
head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など | コリス
2016/06/01
547 users
コリス
GitHub
head
link
meta要素
HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link... 続きを読む
[CSS]シンプルな美しいボタンを簡単に実装するだけのスタイルシートの超軽量ライブラリ -beautons | コリス
2014/05/06
81 users
htm
コリス
Step
class
ライブラリ
使い勝手のよいさまざまなスタイルのシンプルなボタンを実装するだけのライブラリというか、スタイル集を紹介します。 スタイルシートは1.4kbで、超軽量！ beautons beautons -GitHub 使い方は非常に簡単で、外部スタイルシートを記述し、各ボタンにclassを加えるだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に記述します。 [html] ... [/htm... 続きを読む
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars | コリス
2014/01/30
215 users
jQuery
コリス
head
jquery.js
Body
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link r... 続きを読む
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall | コリス
2013/10/14
85 users
Pinterest
Freewall
コリス
Demo
src
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> ... 続きを読む
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll | コリス
2013/09/23
303 users
コリス
jQue
src
head
text
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jque... 続きを読む
デザイナーさんの為のjQuery講座 Lv.1 | 株式会社LIG
2013/07/19
127 users
株式会社LIG
LIG
jQuery
デザイナーさん
備忘録
暑いですね。 鳥よしです。 あまりにも暑くてネタが切れたので、先日LIGのデザイナーさんとやったjQuery勉強会の備忘録をかかせていただきます。 サボってるわけではないのです。 勉強会の内容を見直してもらえればいいのです。 1.jQueryを使用するために まずは何はともあれ、jQueryを使用するために以下の記述をhead内に書きます。 <script src="http://ajax.goo... 続きを読む
[JS]お気に入りのカラースウォッチをアウトプットするためのスクリプト -Swatches | コリス
2013/05/21
50 users
コリス
rel
jQuery
ポパー
head
たった一つのdiv要素を使うだけで、お気に入りのカラースウォッチのコレクションページを作成できるjQueryのプラグインを紹介します。 ホバーでコード表示 Swatchesの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル スタイルシートはhead内に、スクリプトを</body>の上に配置します。 <head> <link href="css/swatches.css" rel="s... 続きを読む
[JS]レスポンシブ対応の非常に美しい画像ギャラリーを実装する設置が簡単なスクリプト -least.js | コリス
2013/05/19
93 users
コリス
rel
jquery.js
CSS
href
least.js -デモ：画像の拡大時 least.jsの使い方 実装は非常にシンプルで、簡単です。 Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。画像の遅延読み込みには「lazyload.js」を使用します。 <!-- least.js CSS-file --> <link href="css/least.min.css" rel="... 続きを読む
[JS]超軽量で設置も簡単！Facebook, Twitter, Google+のボタンを設置するスクリプト -SocialCount | コリス
2012/11/28
376 users
Twitter
Facebook
SocialCount
デモページ：カウント付きで縦並び SocialCountの使い方 使い方のステップは、2つ。 これ以上ないくらいに簡単です。 Step 1: 外部ファイル スタイルシートとスクリプトを外部ファイルとして設置します。 まずは、スタイルシートをhead内に。 <head> <link rel="stylesheet" href="../src/socialcount.css"> </head> アイコ... 続きを読む
[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax | コリス
2012/10/16
326 users
パララックス
script
src
コリス
jquery.js
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text... 続きを読む
[JS]アナタのソーシャルコンテンツをまとめてPinterest風レイアウトで表示するスクリプト -Socialist | コリス
2012/09/03
51 users
グリッドレイアウト
Twitter
Facebook
コリス
ブログのRSSをはじめ、Facebook, Twitter, Tumbler, Google+, Pinterest, Flickr, YouTubeなどのコンテンツを全てPinterest風のグリッドレイアウトで表示するjQueryのプラグインを紹介します。 幅800pxで表示 Socialistの使い方 Step 1: 外部ファイル head内に当スタイルシートと「jquery.js」と当スク... 続きを読む
[JS]エレメントをグリッド状にランダムに配置したり、Pinterest風に配置するスクリプト – BlocksIt.js | コリス
2012/08/21
111 users
コリス
エレメント
Libs
Ajax
スクリプト
BlocksIt.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 ※jQueryは1.7.1で開発。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type... 続きを読む
ご存知、ないのですか？CSSの優先順位
2012/08/09
641 users
CSS
優先順位
ご存知
important
HTML内
ご存知、ないのですか？CSSの優先順位 — Presentation Transcript ご存知、ないのですか？ CSS の優先順位 Yumi Ishizaki 20120809 CSSの優先順位の基本 Html内のCSS＞ユーザーCSS＞ブラウザ標準style Body内Style=“” ＞head内に直接css＞外部css 最後に記述した方が優先的に表示される !important ... 続きを読む
[JS]ちょっとかっこいい円グラフをウェブページに簡単に設置できるスクリプト -EASY PIE CHART | コリス
2012/07/10
215 users
コリス
jQuery
jquery.js
text
Step
シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART EASY PIE CHARTの使い方 実装は、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 外部ファイルはhead内に記述してください。 <script type="text... 続きを読む
[CSS]属性セレクタを使ったちょっと面白いスタイルシートのテクニックのまとめ | コリス
2012/07/02
83 users
コリス
result
属性セレクタ
jsfiddle
CSS
属性セレクタを使って、デバッグ用に空のリンクを目立たせたり、外部リンクのみアイコンをつけたり、head内のscriptやstyleのデータを明示するなど、ちょっと面白いスタイルシートのテクニックを紹介します。 空のリンクを目立たせる 外部リンクを目立たせる 外部リンクのみアイコンを付与する PNG画像を裏返しにする head内の要素を可視化 デモ表示に使用している「Jsfiddle」はResult... 続きを読む
[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide | コリス
2012/03/12
135 users
PageSlide
コリス
stylesheet
スクリプト
デモ PageSlideの使い方 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" type="text/css" href="jquery.pageslide.css"> ページの下（</body>の上）にスクリプトを記述します。 <script type="text/javascript" src="https://ajax.googleap... 続きを読む