タグ stylesheet
人気順 5 users 10 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... 続きを読む
[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... 続きを読む
[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... 続きを読む
[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フォントを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> 要素を指定する... 続きを読む
[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]このアニメーションはかなりカワイイ！折り畳んだ紙をパタパタ広げるスクリプト -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... 続きを読む
[JS]実装も簡単！ページ内の次にどこを見るかアニメーションでガイドするスクリプト -Pageguide | コリス
2012/06/07
100 users
コリス
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... 続きを読む
WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌
2012/04/16
704 users
CSS
タブ
phpspot開発日誌
Chrome拡張
ボタン
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSが... 続きを読む
[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages | コリス
2012/04/12
270 users
コリス
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
コリス
スクリプト
src
text
デモ 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
コリス
スクリプト
ツールチップ
かわいらしいデザイン
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
アニメーション
フェードイン
フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。 Animate.cssの使い方 「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。 外部ファイル <link rel="stylesheet... 続きを読む