タグ stylesheet
新着順 10 users 50 users 100 users 500 users 1000 usersFigma to React – Convert Figma designs to React code
2021/03/27
84 users
React
react-native
SVG
import
import React from 'react' import { View, Text, Image, StyleSheet } from 'react-native' import { Svg } from 'react-native-svg' export default function FigmatoReact () { return ( <View style={FigmatoReactStyles.FigmatoReact}> <Text style={FigmatoReactStyles.FigmatoReact}> Figma to React </Text> <In... 続きを読む
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
ブラウザシェア
CSS
preload
非同期
CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しか... 続きを読む
[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It | コリス
2019/01/28
149 users
コリス
class
スクリプト
Libs
Ajax
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jque... 続きを読む
Tipnemウィジェットの使い方 - そらりすの日記
2018/01/06
9 users
ソラリス
rel
日記
text
CSS
2017 - 11 - 22 Tipnemウィジェットの使い方 そらりすやで。 昨日テストしたTipNem ウィジェット の使い方を書いていきます。 設置したい場所に < link href = "https://soralis-nem.github.io/tipwidget/1.0/css/nem.css" rel = "stylesheet" type = "text/css" /> ... 続きを読む
[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop | コリス
2015/09/01
72 users
コリス
スライダー
rotate
スクリプト
slide
アニメーションは他にも、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
ヘッダー
Clingify
href
Style
まずはClingifyのファイルを一式ダウンロードします。 （jQueryがない人はこちらからダウンロード） 様々な動きができますが、とりあえず一番簡単な要素を固定する方法です。 バージョン1.7以上のjQuery.jsとjquery.clingify.js及びclingify.cssを読み込みます。 <link rel="stylesheet" href="style/clingify.css"... 続きを読む
[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu | コリス
2015/05/29
77 users
コリス
スクリプト
スクロールバー
縦長ページ
head
デフォルトのスクロールバーも表示 ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head>... 続きを読む
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js | コリス
2015/04/14
220 users
YouTube
CodePen
コリス
vine
TED
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js... 続きを読む
rel=subresourceを併用したCSSの遅延読み込み - Weblog - Hail2u.net
2015/01/28
43 users
rel
Weblog
hail2u.net
CSS
気運
クリティカルなんとかの関係やウェブ・フォントにおいて、CSSの遅延読み込みを行う気運は高まっている。様々なアイディアがあって、普通にCSSの中身を読み込んでhead要素に追加するものや、link要素を動的に追加するもの、予めlink要素をrel=stylesheetなしで書いておいて後で追加するものなどがその主なものだ。最後の手法ではrel=subresourceを追加して書いておくと、一部ブラウ... 続きを読む
[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems | コリス
2014/12/09
70 users
コリス
スクリプト
ナビゲーション
邪魔
縦長ページ
タップするとナビゲーションがスライド。 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フォント
アイコン
自分用
HTT
href
背景 自分のWebサイトでアイコンを使っている。 問題 pngなどの画像ファイルとしてアイコンを利用すると、大きさ調整や文字とのバランスで扱いが面倒である。 解法 Webフォントとしてアイコンを作り、CSSを用意しておく。 結果 シンプルなマークアップだけで任意の大きさのアイコンが利用できる。 HTML sample.html1 2 <link rel="stylesheet" href="htt... 続きを読む
アイコン型WebフォントをCSSでデザインしたボタン10個｜Webpark
2014/07/31
100 users
Webpark
rel
CSS
href
link
アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。 ということで、まずこちらを読み込みます。 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"... 続きを読む
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
コリス
スクリプト
train
クルマ
script
テーマファイル「train」 Odometerの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 スタイルシートはさまざまなテーマが用意されています。 <link rel="stylesheet" href="odometer-theme-car.css" /> <script src="odometer.js"></script> 要素を指定する... 続きを読む
KDDIに1万件の苦情殺到、その後も障害継続し実質19時間… 総務省もau版iPhoneのメール障害は「重大事故」として追及の構え – すまほん!!
2013/04/17
15 users
KDDI
すまほん
追及
au版iPhone
苦情殺到
KDDIに1万件の苦情殺到、その後も障害継続し実質19時間… 総務省もau版iPhoneのメール障害は「重大事故」として追及の構え – すまほん!! <link rel="stylesheet" href=" 続きを読む
[JS]実装は簡単！ページの使い方の説明などをかっこよくオーバーレイで表示するシンプルなスクリプト -Chardin.js | コリス
2013/04/04
82 users
コリス
スクリプト
Chardin.js
実装
rel
デモページ：オーバーレイ非表示 Chardin.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="chardinjs.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>... 続きを読む
レスポンシブデザインにするための基本的な方法｜WEB Drawer
2013/04/02
51 users
WEB Drawer
レスポンシブデザイン
方法
rel
普及
スマートフォンの普及で出てきた「レスポンシブ・ウェブデザイン」。 今回は「レスポンシブ・ウェブデザイン」にするための基本的な方法を見て行きたいと思います。 使い方 記述方法は以下になります。 外部ファイル読み込む時の記述法 <link href="css/mini.css" rel="stylesheet" media="only screen and (幅の指定)" > @importでの方法 ... 続きを読む
OneClickCSS
2013/01/07
340 users
OneClickCSS
less
SCSS
Sass
従来
OneClickCSSはHTMLコードを元に、様々なStyleSheetを自動生成するサービスです。子孫セレクタ、小セレクタ、Less、Sacc、Scssを１クリックで自動生成します。What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサ... 続きを読む
【中からトローり！】明治板チョコで作れるフォンダンショコラのレシピ | 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
コリス
マジシャン
スクリプト
アニメーション
デモページ：ダイナミックに重ねたりもできます Barajaの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。スタイルシートはhead内に配置します。 <link rel="stylesheet" type="text/css" href="css/baraja.css" /> <script type="text/javascript" src="http... 続きを読む
[JS]このアニメーションはかなりカワイイ！折り畳んだ紙をパタパタ広げるスクリプト -PFold | コリス
2012/10/18
83 users
コリス
スクリプト
アニメーション
src
jquery.js
展開と共に、移動のアニメーションが加わります。 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
head
text
テキストエディタ
CSS
href
私自身が、例えば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... 続きを読む