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

タグ link rel

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

(1 - 25 / 27件)

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 追及

[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... 続きを読む

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=... 続きを読む

[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... 続きを読む

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="... 続きを読む

[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... 続きを読む

【中からトローり！】明治板チョコで作れるフォンダンショコラのレシピ | 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]このアニメーションはかなりカワイイ！折り畳んだ紙をパタパタ広げるスクリプト -PFold | コリス

2012/10/18 83 users コリス stylesheet スクリプトアニメーション

展開と共に、移動のアニメーションが加わります。 PFoldの使い方 Step 1: 外部ファイル「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/pfold.css" /> <script type="text/javascript" src="http://aj... 続きを読む

いちばんシンプルなHTML5のベースを用意 | necozine

2012/10/11 51 users stylesheet head text テキストエディタ

私自身が、例えばjavascriptをどう動かしたらいいかと理解する時、テキストエディタを使って最低限のコードでサンプルを試します。そんな時、ベースとなるHTMLのコードを紹介します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href... 続きを読む

[JS]アコーディオンとカルーセルが合体したスライダーのスクリプト -Accarousel | コリス

2012/06/12 63 users コリスカルーセルアコーディオンスライダースクリプト

Accarouselの使い方実装は簡単で、3ステップです。 Step 1: 外部ファイル「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 ※スタイルシートはLESS版も用意されています。 <link rel="stylesheet" type="text/css" href="accarousel.css"/> <script type="text/java... 続きを読む

[JS]実装も簡単！ページ内の次にどこを見るかアニメーションでガイドするスクリプト -Pageguide | コリス

2012/06/07 100 users コリス stylesheet Libs スクリプト Ajax

Pageguideの使い方実装は4ステップです。 Step 1: 外部ファイルスクリプトとスタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="stylesheets/pageguide.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.m... 続きを読む

[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages | コリス

2012/04/12 270 users コリス stylesheet Libs スクリプト Ajax

Table テーブルのコンテンツをページネーションにすることもできます。 jPagesの使い方外部ファイルスタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.... 続きを読む

[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... 続きを読む

[JS]洗練されたかわいらしいデザインのツールチップを簡単に実装できるスクリプト -Sweet Tooltip | コリス

2012/03/05 128 users コリス stylesheet スクリプトツールチップ src

デモページ：Big Yellow Sweet Tooltipの使い方外部ファイルスタイルシートをhead内に、スクリプトをページの下部に外部ファイルとして記述します。 <link rel="stylesheet" href="sweet-tooltip.css"> <script type="text/javascript" src="jquery.js"></script> <script ... 続きを読む

[CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css | コリス

2011/10/16 460 users コリス class CSS stylesheet フェードイン

フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。 Animate.cssの使い方「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。外部ファイル <link rel="stylesheet... 続きを読む

[CSS]用途に合わせて必要な機能を拡張できるCSSのフレームワーク -Cabin | コリス

2011/09/27 69 users Cabin stylesheet コリス head CSS

Cabin CSS Frameworkの使用方法 Cabinは一つのコアファイルと複数の拡張ファイルが構成されています。拡張ファイルは必要なもののみ使用します。 <head>  <link rel="stylesheet" href="css/cabin.css" />  <link rel="styleshee... 続きを読む

[JS]さまざまな要素をダイナミックなアニメーションでズームさせるスクリプト -Zoomooz | コリス

2011/09/13 71 users コリス stylesheet スクリプトアニメーション要素

Zoomoozの対応ブラウザ Zoomoozの対応ブラウザは下記の通りです。 IE9 Firefox3.6+ Safari3+ Chrome Opera Zoomoozの実装 Zoomoozをページに実装するには、外部ファイルを指定します。外部ファイル <link rel="stylesheet" href="style/zoomooz.css" type="text/css" /> <scri... 続きを読む