タグ「link rel」 - はてブログ

タグ link rel

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 39件)

【令和最新版】Google Fontsの読み込み最適化の結論｜ TAKLOG

2024/03/12 12 users TAKLOG CLS href 結論 Google Fonts

当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。結論いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。 <link rel="preconnect" href="https://fonts.googleapis.com" /... 続きを読む

Font Awesomeの代替え版となるか!?オープンソースのアイコンフォント「Line - エンジニア・プログラマのソーシャルITメディア

2019/11/02 62 users プログラマ line Font Awesome エンジニア

◆ Line Awesome https://icons8.com/line-awesome 紹介「Line Awesome」は、名前から分かる通りFont Awesomeをインスパイアしたオープンソースのアイコンフォントです。 1380以上のフリーフォントが無料で使えます。 <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awe... 続きを読む

CSSを非同期ロードする最も簡単な方法 - Qiita

2019/08/01 229 users Qiita ブラウザシェア stylesheet CSS 同期

CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しか... 続きを読む

Webフロントエンドハイパフォーマンスチューニングを読んだ - hitode909の日記

2017/11/03 60 users hitode909 prerender 日記エピソード参考

2017 - 11 - 04 Webフロントエンドハイパフォーマンスチューニングを読んだ Webフロントエンドハイパフォーマンスチューニングを読んだ．最近フロントエンドでがんばるアプリケーションを作ってるので参考になった．ネットワークまわりからブラウザの細かい実装の話まで書かれていて良かった． link rel=prerenderで次のページをプリレンダリングできる次のエピソードに飛ぶとか，コメ... 続きを読む

"総会屋2.0"山本一郎(やまもといちろう)氏の検証

2016/12/28 74 users 山本一郎ヤマ検証総会屋2.0 追及

Link rel=serviceworker ヘッダによる API やアセットの Offline 対応 | blog.jxck.io

2016/12/12 11 users Offline ServiceWorker ヘッダアセット

created_at: 2016-12-11 updated_at: 2016-12-12 tags: [ origin trials , service worker , offline ] Intro Service Worker を登録する方法は現状 3 つある。 HTML meta タグでの追加ならば、 Service Worker を追加するためだけの JS であれば不要になる。 HTT... 続きを読む

[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop | コリス

2015/09/01 72 users コリススライダー stylesheet rotate

アニメーションは他にも、slide, fade, rotateなどが利用できます。 wallopの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> <link rel="stylesheet" href="path/to/wallop.css"> </head> <body> ... コンテンツ ... <script src="pa... 続きを読む

jQueryでサイトのヘッダーなどを固定するプラグインClingifyの注意点

2015/06/23 27 users jQuery ヘッダー stylesheet href 一式

まずはClingifyのファイルを一式ダウンロードします。（jQueryがない人はこちらからダウンロード）様々な動きができますが、とりあえず一番簡単な要素を固定する方法です。バージョン1.7以上のjQuery.jsとjquery.clingify.js及びclingify.cssを読み込みます。 <link rel="stylesheet" href="style/clingify.css"... 続きを読む

HTML の linkタグに prefetch 機能が追加され、より便利になるようです - latest log

2015/06/16 73 users prefetch preload href Safari 仕様

2015-06-16 HTML の linkタグに prefetch 機能が追加され、より便利になるようです linkタグに pre fetch 機能が追加される仕様(Editor's Draft)が上がってきています。 Chrome - indevelopment IE - サポートするかも Firefox - 不明 Safari - 不明 <link rel="preload" href=“…... 続きを読む

[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu | コリス

2015/05/29 77 users コリス stylesheet スクリプトスクロールバー

デフォルトのスクロールバーも表示ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head>... 続きを読む

実装は超簡単！デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー | コリス

2015/05/19 143 users head スピナーコリス Step ローディング時

ページのローディング時によく使われる、デザインがかわいく、アニメーションもかわいいCSSで実装されたスピナーを紹介します。 divひとつのミニマルなHTMLで、簡単に実装できます。スピナーの実装実装は、簡単です。「弾むボール」を例に、説明します。 Step 1: 外部ファイル各スピナーに用意されているCSSファイルを外部ファイルとして記述します。 <head> ... <link rel=... 続きを読む

JavaScript - jQueryでスライドメニュー（横から出てくるやつ）を実装する - Qiita

2015/04/04 39 users jQuery Qiita github.com https

スライドメニューを実装できるjQueryプラグインを書いたので、使い方をメモします。ダウンロード https://github.com/kami30k/jquery.sidemenu.js https://github.com/kami30k/jquery.sidemenu.js/archive/master.zip デモ使い方まず、必要なファイルをインクルードします： <link rel=... 続きを読む

[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems | コリス

2014/12/09 70 users コリス stylesheet スクリプトナビゲーション邪魔

タップするとナビゲーションがスライド。 MenuItemsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="menuitems/menuitems.min.css" /> </head> <body> ... コンテンツ ... <script s... 続きを読む

自分用のWebフォントでアイコンを作る - blog.textfile.org

2014/10/31 14 users Webフォントアイコン自分用 stylesheet HTT

背景自分のWebサイトでアイコンを使っている。問題 pngなどの画像ファイルとしてアイコンを利用すると、大きさ調整や文字とのバランスで扱いが面倒である。解法 Webフォントとしてアイコンを作り、CSSを用意しておく。結果シンプルなマークアップだけで任意の大きさのアイコンが利用できる。 HTML sample.html1 2 <link rel="stylesheet" href="htt... 続きを読む

HTML Importsで読み込まれたドキュメントからの相対パスを得る - Webtech Walker

2014/07/11 16 users Webtech Walker ドキュメント相対パス要素

x-sushiyukiというsushiyukiを表示するためのWebComponentsの要素を作ったんだけれども、importされたファイルからの相対パスでsushiyukiの画像パスを指定するのにちょっと苦戦した。たとえば、 /index.html から以下のように x-sushiyuki.html を呼び出す。 <link rel="import" href="bower_componen... 続きを読む

JavaScript - Polymerを実際に使ってみた - Qiita

2014/07/05 53 users Polymer Element owner ini Qiita

morris.js - SVGで手軽に綺麗なグラフを描くJavaScriptライブラリ MOONGIFT

2014/03/16 55 users MOONGIFT SVG Morris.js グラフ href

管理画面などに格好いいグラフがあるとテンションがあがりますよね。とは言えグラフを表示するというのは意外と面倒で、ついつい後回しになってしまいがちです。そこで手軽に格好いいグラフを描けるライブラリとしてmorris.jsを紹介します。 morris.jsの使い方 morris.jsはまずJavaScript/スタイルシートを読み込みます。 <link rel="stylesheet" href="... 続きを読む

Simptip - 要チェック！スタイルシートだけで実現するツールチップ|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/11/07 18 users CSS ソフトウェアエンジニアヘルプツールチップ

スタイルシートだけで実現しますよ！訪問者向けにちょっとしたヘルプを出したい時に使えるのがツールチップです。しかし表示する際にJavaScriptを組み込んだり複雑な指定をしないといけないのでは使い勝手が悪いですよね。そこで使ってみて欲しいのがSimptipになります。CSSを読み込むだけで使えてしまうツールチップです。使い方は簡単で、Simptipを読み込むだけです。 <link rel="... 続きを読む

[JS]数字や文字をクルマの走行距離計のようにぐるぐる回転させて表示するスクリプト -Odometer | コリス

2013/10/24 93 users コリス stylesheet スクリプト train クルマ

テーマファイル「train」 Odometerの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトを外部ファイルとして記述します。スタイルシートはさまざまなテーマが用意されています。 <link rel="stylesheet" href="odometer-theme-car.css" /> <script src="odometer.js"></script> 要素を指定する... 続きを読む

[JS]既存のナビゲーションを簡単にレスポンシブ対応のトグル型にするスクリプト -Naver | コリス

2013/08/28 81 users NAVER jQuery コリス script Step

水平型など、今使用しているナビゲーションをスマフォやタブレットで表示した際に、トグル型ナビゲーションに自動で変更するjQueryのプラグインを紹介します。スマフォ時の表示 Naverの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <link rel... 続きを読む

KDDIに1万件の苦情殺到、その後も障害継続し実質19時間… 総務省もau版iPhoneのメール障害は「重大事故」として追及の構え – すまほん!!

2013/04/17 15 users KDDI すまほん追及 au版iPhone 苦情殺到

KDDIに1万件の苦情殺到、その後も障害継続し実質19時間…　総務省もau版iPhoneのメール障害は「重大事故」として追及の構え – すまほん!! <link rel="stylesheet" href=" 続きを読む

ドコモ、今夏にiPhone参入。年間400万～500万台を販売。産経報道 – すまほん!!

2013/04/05 13 users iPhone参入 href すまほんドコモ産経報道

ドコモ、今夏にiPhone参入。年間400万～500万台を販売。産経報道 – すまほん!! <link rel="shortcut icon" href=" 続きを読む

【中からトローり！】明治板チョコで作れるフォンダンショコラのレシピ | The Cake Magazine | クリックオンケーキのステキ系情報マガジン

2012/12/09 254 users フォンダンショコラとろーりクリックオンケーキレシピ

【中からトローり！】明治板チョコで作れるフォンダンショコラのレシピ | The Cake Magazine | クリックオンケーキのステキ系情報マガジン <link rel='stylesheet' id='standard-css' href='http://www.clickoncake 続きを読む

[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]マジシャンがトランプを広げるように複数のパネルを華麗なアニメーションで広げるスクリプト -Baraja | コリス

2012/11/14 48 users Baraja コリスマジシャン stylesheet パネル

デモページ：ダイナミックに重ねたりもできます Barajaの使い方外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。スタイルシートはhead内に配置します。 <link rel="stylesheet" type="text/css" href="css/baraja.css" /> <script type="text/javascript" src="http... 続きを読む