Tech Rogue◆コンピュータ情報: #doc css

ラベル #doc css の投稿を表示しています。すべての投稿を表示

2020年3月26日木曜日

[Code] HTML,カラーコード～基本カラーコード

HTML,カラーコード
Color Name	By Name	By RGB	#RRGGBB
White			#FFFFFF
Snow			#FFFAFA
GhostWhite			#F8F8FF
Ivory			#FFFFF0
MintCream			#F5FFFA
Azure			#F0FFFF
FloralWhite			#FFFAF0
AliceBlue			#F0F8FF
LavenderBlush			#FFF0F5
Seashell			#FFF5EE
WhiteSmoke			#F5F5F5
Honeydew			#F0FFF0
LightYellow			#FFFFE0
LightCyan			#E0FFFF
OldLace			#FDF5E6
Cornsilk			#FFF8DC
Linen			#FAF0E6
LemonChiffon			#FFFACD
LightGoldenrodYellow			#FAFAD2
Beige			#F5F5DC
Lavender			#E6E6FA
MistyRose			#FFE4E1
PapayaWhip			#FFEFD5
AntiqueWhite			#FAEBD7
BlanchedAlmond			#FFEBCD
Bisque			#FFE4C4
Moccasin			#FFE4B5
Gainsboro			#DCDCDC
PeachPuff			#FFDAB9
PaleTurquoise			#AFEEEE
NavajoWhite			#FFDEAD
Pink			#FFC0CB
Wheat			#F5DEB3
PaleGoldenrod			#EEE8AA
LightGrey			#D3D3D3
LightPink			#FFB6C1
PowderBlue			#B0E0E6
Thistle			#D8BFD8
LightBlue			#ADD8E6
Khaki			#F0E68C
Violet			#EE82EE
Plum			#DDA0DD
LightSteelBlue			#B0C4DE
Aquamarine			#7FFFD4
LightSkyBlue			#87CEFA
Silver			#C0C0C0
SkyBlue			#87CEEB
PaleGreen			#98FB98
Orchid			#DA70D6
Burlywood			#DEB887
HotPink			#FF69B4
LightSalmon			#FFA07A
Tan			#D2B48C
LightGreen			#90EE90
Yellow			#FFFF00
Fuchsia			#FF00FF
Magenta			#FF00FF
Aqua			#00FFFF
Cyan			#00FFFF
DarkGray			#A9A9A9
DarkSalmon			#E9967A
SandyBrown			#F4A460
LightCoral			#F08080
Turquoise			#40E0D0
Salmon			#FA8072
CornflowerBlue			#6495ED
MediumTurquoise			#48D1CC
MediumOrchid			#BA55D3
DarkKhaki			#BDB76B
PaleVioletRed			#DB7093
MediumPurple			#9370DB
MediumAquamarine			#66CDAA
GreenYellow			#ADFF2F
RosyBrown			#BC8F8F
DarkSeaGreen			#8FBC8F
Gold			#FFD700
MediumSlateBlue			#7B68EE
Coral			#FF7F50
DeepSkyBlue			#00BFFF
DodgerBlue			#1E90FF
Tomato			#FF6347
DeepPink			#FF1493
Orange			#FFA500
Goldenrod			#DAA520
DarkTurquoise			#00CED1
CadetBlue			#5F9EA0
YellowGreen			#9ACD32
LightSlateGray			#778899
DarkOrchid			#9932CC
BlueViolet			#8A2BE2
MediumSpringGreen			#00FA9A
Peru			#CD853F
SlateBlue			#6A5ACD
DarkOrange			#FF8C00
RoyalBlue			#4169E1
IndianRed			#CD5C5C
Gray			#808080
SlateGray			#708090
Chartreuse			#7FFF00
SpringGreen			#00FF7F
SteelBlue			#4682B4
LightSeaGreen			#20B2AA
LawnGreen			#7CFC00
DarkViolet			#9400D3
MediumVioletRed			#C71585
MediumSeaGreen			#3CB371
Chocolate			#D2691E
DarkGoldenrod			#B8860B
OrangeRed			#FF4500
DimGray			#696969
LimeGreen			#32CD32
Crimson			#DC143C
Sienna			#A0522D
OliveDrab			#6B8E23
DarkMagenta			#8B008B
DarkCyan			#008B8B
DarkSlateBlue			#483D8B
SeaGreen			#2E8B57
Olive			#808000
Purple			#800080
Teal			#008080
Red			#FF0000
Lime			#00FF00
Blue			#0000FF
Brown			#A52A2A
Firebrick			#B22222
DarkOliveGreen			#556B2F
SaddleBrown			#8B4513
ForestGreen			#228B22
Indigo			#4B0082
DarkSlateGray			#2F4F4F
MediumBlue			#0000CD
MidnightBlue			#191970
DarkRed			#8B0000
DarkBlue			#00008B
Maroon			#800000
Green			#008000
Navy			#000080
DarkGreen			#006400
Black			#000000

2020年3月1日日曜日

[Code] HTML,カラーコード～無精者のためのカラーコード,思い付きで打てばどういう色になるか


............		#000000
............		#111111
............		#222222
............		#333333
............		#555555
............		#777777
............		#888888
............		#999999

............		#012345
............		#123456
............		#234567
............		#345678
............		#456789
............		#567890

............		#098765
............		#876543
............		#543210

............		#123321
............		#234432
............		#456654
............		#567765

............		#001122
............		#112233
............		#334455
............		#556677
............		#889900

............		#010101(01x01=01)
............		#020204(02x02=04)
............		#020918(02x09=18)
............		#050945(05x09=45)
............		#090981(09x09=81)


............		#aaaaaa
............		#bbbbbb
............		#dddddd
............		#eeeeee
............		#ffffff


............		#aaabbb
............		#aaaccc
............		#aaaddd
............		#aaaeee
............		#aaafff


............		#cabcab
............		#badcab
............		#badfab
............		#111cab
............		#555cab
............		#111bad
............		#555bad
............		#111fab
............		#222fab
............		#11baca
............		#11baca

2019年12月3日火曜日

[Code] HTML,カラーコード～無精者のためのカラーコード,思い付きで打てばどういう色になるか


............		#000000
............		#cccaaa
............		#cccbbb
............		#cccccc
............		#ccc222
............		#222ccc
............		#888ccc


............		#000000
............		#fffaaa
............		#fffbbb
............		#fffccc
............		#fff222
............		#fff333
............		#fff555
............		#fff777
............		#fff888
............		#fff999
............		#aaafff
............		#cccfff
............		#222fff
............		#888fff

2019年6月10日月曜日

[code][html] YouTubeパラメータ,VIDEO_IDをカンマで並べて連奏する

playlist
値: 再生する動画 ID をカンマで区切ったリスト。
値を指定すると、URL パスの VIDEO_ID に指定した動画が最初に再生され、playlist パラメータに指定した動画はその後に再生されます。

YouTube
https://developers.google.com/youtube/player_parameters?hl=ja

https://www.youtube.com/embed/VIDEO_ID?controls=1&showinfo=1&playlist=VIDEO_ID,VIDEO_ID,VIDEO_ID,,,,,&autoplay=0&rel=0"＞
＜/iframe＞

＜iframe allowfullscreen="" autohide="1" autoplay="0" controls="" frameborder="2" height="220" width="290" showinfo="0" src="
https://www.youtube.com/embed/v8gtod0RF-M?controls=1&showinfo=1&playlist=V-czWaF5WjY,2NPQUuW-fW4,QZhO8PT-FKk&autoplay=0&rel=0"＞
＜/iframe＞

2019年3月23日土曜日

[code][html,css] divでつくるdiv-box

＜div style="
background-color: #508ca3;
color: white;

width: 450px;
margin: 5px;
padding: 10px;"＞
....................
.............
...
.............
........
＜/div＞

vcvxc pc

2019年3月7日木曜日

[ソフト] GetHTMLW

[ソフト] GetHTMLW
GetHTMLW
ホームページをまるごと Get して、オフラインで閲覧 GUI版
ソフト名：GetHTMLW8.3.0
ファイル：gethtmlw-8.3.0.zip / 452,036Bytes / 2011.11.03
ユーザーの評価(18人)：3.5
コメント：18件
■関連キーワード
閲覧 ,ホームページ ,オフライン ,GUI

Vector
https://www.vector.co.jp/soft/dl/win95/net/se077067.html

評価:★★★★☆
10個ちかくダウンロードしたソフトの中で唯一機能している。
古いページの保存専用。
新しいHTML5ページの保存は無理。

vgfvxc pc

コメント・評価
このソフトに対するコメント・評価です。
No.18：
2016-11-24 00:06:19 ココ2
タイトル：現代の複雑なサイトでは不向き？
本文：自動で「HTML/CSS/JS/画像」全部ダウンロードして解析したいな。
とここに行き着いたわけなのですが
CSS上で画像を指定されていた場合、ダウンロードされません。
css{ background: url(../images...
No.17：
2012-03-08 14:37:07 龍馬1
タイトル：フラッシュサイトの保存が出来ない
本文：最近の企業サイトは多くがフラッシュを使用していますが
このソフトでは、フラッシュページを取得できない為、多くのホームページでは機能せず、まるで役に立ちません。
紹介文にある「全て Get」とは大嘘です。
フラッシュサイトでは使用で...
No.16：
2010-10-30 15:19:17 トモタカ4
タイトル：ブログに使ってみて、
本文：使い方は簡単に分かりましたが、ＨＰの収集には問題なかったです。
しかし、赤い三角ボタンでブログの収集には１０時間もかかった為途中で止めました。
赤い三角にＰボタンはそれほど掛からず終ったのですが、画像がまったくありません。もっとしっかり収集...
No.15：
2009-08-08 10:33:53 nakanaka120015
タイトル：掲示板を丸ごと保存できるのは、これ以外に私は知りません。
本文：自分のブログ、サイトをＰＣに保存・バックアップするのに使わせて頂いています。
類似のソフトウェアは他にもありますが、掲示板をちゃんと丸ごと保存できるのは、これ以外に私は知りません。
掲示板というのは、表示する際にサーバー側でＣＧ...
No.14：
2007-03-24 10:28:31 nnn734
タイトル：今尚必要としています。
本文：ダイアルアップ接続の時からくらべると、使用頻度は少なくなりましたが、やはり今でもＨＰ上の有用な情報など見つけたときには、使用しています。
高速回線接続といえども、ＨＰ上のカタログ等、サイトがリニューアルされたり、変更されると不便になる（コチラ...
ダウンロード

Vector
https://www.vector.co.jp/soft/dl/win95/net/se077067.html

2019年1月20日日曜日

[code][css] DIV背景

＜div style="
padding: 7px;
background-color: #508ca3;
color: #ffffff;"2＞
＜/div2＞

VVV

$.ajax({
url:'http://aqwiki.net/rss/rss_list.txt',
success: function(data){

var rss_url = 'http://aqwiki.net/rss/' + data;

var htmlstr = "";
htmlstr += '＜h2＞＜a href="http://aqwiki.net/rss/ko.html" rel="nofollow" target="_blank"＞アクアリウムWiki 相互RSS＜/a＞新着記事＜/h2＞';
xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxx
var container = document.getElementById("aq_feed");
container.innerHTML = htmlstr;

});
}
});

jhhjhg pc

2018年10月4日木曜日

テーブル用CSS設定ツール

テーブル用CSS設定ツール
テーブル用のCSSを設定できるツールです。枠線のスタイルやセルの背景色などを、CSSを使って設定することができます。
CSS テーブルカテゴリー｜HTML テーブルタグカテゴリー

TAG Index
https://www.tagindex.com/tool/css_table.html

2018年9月6日木曜日

[css] border-imageプロパティ,枠線の模様を画像で描画

CSS3のborder-imageで、しましまの目立つ枠線を作る
執筆者：西村文宏
CSS3で追加された「border-image」プロパティを使えば、枠線の模様を画像で描画できます。
しましま柄の画像を枠線として指定すると、とても目立つ「しましま(ストライプ)柄」のボックスを簡単に作ることができます。
実線・破線といった平凡な枠線ではなく、もっと凝った枠線を引きたい際に便利です。
border-imageプロパティの使い方を解説します。
border-imageプロパティを使って、枠線に画像を指定し、しましま柄の枠線を引く方法
それでは、border-imageプロパティを使って、枠線に画像を指定し、しましま柄の枠線を引いてみましょう。
以下の3手順で解説致します。
枠線として使いたい画像を用意する
CSSで、通常の枠線を引くよう記述する
CSSで、border-imageプロパティを使って、枠線の模様を画像にする
1. 枠線として使いたい画像を用意する
枠線に使うための画像
まずは、画像を用意します。ここでは例として、右図のように72×72ピクセルのサイズで用意しました。
どんな画像でも構いませんが、縦横とも「3で割り切れるピクセル数」で作っておく方が望ましいです。
詳しくは後述しますが、ここで用意した画像は、縦横3つ(合計9個)に分割された上で枠線に使われるためです。
なお、サンプルで利用した3種類の「しましま柄」の画像は、ご自由にダウンロードしてご活用頂けます(詳しくは後述)。
画像を自力で用意するのが面倒な場合は、それを使ってみて下さい。
2. CSSで、通常の枠線を引くよう記述する
続いて、スタイルシートを記述します。まずは、borderプロパティを使って「実線の枠線」を引くよう、以下のような感じで記述しておきます。
p {
border: #ff8635 solid 10px;
padding: 5px;
}
borderプロパティで作る普通の枠線
枠線に画像を指定できない古いブラウザでは、上記の指定だけが枠線の描画に使われます。
ですから、「枠線に使う画像」と似たような色を「枠線の色」として指定しておきましょう。
ここでは、右図のようにオレンジ色(#ff8635)を指定しました。
ここで指定した枠線の太さ(上記では「10px」)が、画像を使う場合でも枠線の太さになります。好きな値を指定して下さい。
なお、paddingは、「枠線」と「内容」との間の余白量です。ここでは「5px」と記述していますが、
好きな値を指定して下さい。省略しても構いません。
3. CSSで、border-imageプロパティを使って、枠線の模様を画像にする
先のスタイルシートに追加して、以下のようにborder-imageプロパティを記述します。
このborder-imageプロパティは、先のborderプロパティよりも後に記述して下さい。
p {
border: #ff8635 solid 10px;
padding: 5px;
border-image: url("shimashima.png") 24 24 round;
}
border-imageプロパティを使って作った枠線
ここでは、枠線の画像として、「shimashima.png」というファイルを指定しています。
その結果、右図のように表示されます。
その後の2つの「24」は、画像の縦横ピクセル数を3分の1にした値を指定しておきます。
ここでは、縦横72pxの画像を使ったので、その3分の1である「24」を指定しています。
最後の「round」は、画像の繰り返し方法を指定しています。
ここでは、とりあえず「round」と記述して下さい。
記述できる種類と効果については、最後にご紹介致します。

All About
https://allabout.co.jp/gm/gc/441025/2/

2018年6月8日金曜日

[seesaa blog] スマートフォン専用ページを消す方法

[seesaa]スマートフォンでもPCサイトを表示
『デザイン』→『スマートフォン』→『コンテンツ』とクリック
      V
『自由欄形式』を『ブログタイトル』の上に設置
      V
『自由形式』以外のコンテンツを削除
      V
『自由形式』をクリックし、以下を記載。
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
document.cookie = 'force_pc=1; max-age=15768000; path=/';
document.cookie = 'force_sp=0; max-age=15768000; path=/';
location.href=location.pathname;
setTimeout("autoLink()",1000);
// --＞
＜/SCRIPT＞
      V
『保存』ボタンをクリック
      V
『保存』ボタンをクリック

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597

シーサーブログの「スマートフォン専用ページを表示」を消す方法
1、「デザイン」⇒「デザイン設定」⇒適応しているスタイルシートをクリック
      V
2、#iphone-link { display: none !important; }を追加
      V
3、保存をクリック

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597

シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう
最終更新日2014/11/16
公開日2014/06/05
category:ウェブサイトやブログ作成に役立つ無料ソフトやwebサービスとブログカスタマイズ
シーサーブログのスマートフォンサイトは広告がいっぱいだ。
ん？「スマートフォンサイトは設定して無い」って？
残念でした。
スマートフォンサイトは自動的に出来ちゃってるのだ。
シーサーブログユーザーは、一度スマートフォンで自分のブログにアクセスしてみるといい。
いつの間にかスマートフォンサイトが出来ているから！
しかも、べたべたと広告がいっぱいである。
シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう
シーサーブログのスマートフォンサイトの広告、消すことも、場所を動かすことも出来ない。
なぜなら、シーサーブログはスマートフォンサイトのHTMLを公開していないから。
そのくせ、なぜか携帯用のサイトでは広告がほとんど無い。
しかもスタイルシートもHTMLも公開されている。
まあ、無料ブログにとっては、広告収入がほしいってところだろうから仕方が無いといえば仕方が無い。
が、あまりにも広告が多すぎる。
シーサーブログはスマートフォンでもPCテンプレートで表示させた方がいいと思う。
スマートフォンでPCサイトを表示させるには？
スマートフォンでシーサーブログを見たときにPCサイトを見せるための方法はちゃんとある。

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597

シーサーブログの「スマートフォン専用ページを表示」を消そう
シーサーブログの「スマートフォン専用ページを表示」を消す方法
「デザイン」⇒「デザイン設定」⇒適応しているスタイルシートをクリック。
2、＃iphone-link { display: none !important; }を追加。
3、保存をクリック。
　これで、「スマートフォン専用ページを表示」が消える。
　後は、PC用のテンプレートやスタイルシートをPCでもスマートフォンでも閲覧できる形に変えるだけ。
　この、PCでも、スマートフォンでも適切な表示がされるサイトのデザインをレスポンシブWebデザインというのだそうだ。

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597

これで、スマートフォンで閲覧してもPCサイトが表示されるようになる。
さあ、シーサーブログユーザーはスマートフォンで自分のブログを見てみよう。
PCサイトで表示されているものと同じサイト表示が見れる。
が、そこには大きな
「スマートフォン専用ページを表示」
の表示が！！！
さあ、この「スマートフォン専用ページを表示」をどうする？
シーサーブログの「スマートフォン専用ページを表示」を消そう
「スマートフォン専用ページを表示」は、PC用テンプレートのHTMLの中にも、コンテンツHTMLの中にもそれらしい記載が無い。
どうも、シーサーブログにデフォルトで設定されているらしい。
ここはスタイルシートにdisplay: noneというのを追加して、「スマートフォン専用ページを表示」を表示されないようにしてしまおう。
display: noneの効果
display: noneで指定した部分は、表示されない。
表示されないだけでなく、領域もなくなる。
「スマートフォン専用ページを表示」という表示が出ていた部分が隙間無く表示されなくなる。
display: noneの使用で表示を消すとSEO上問題があるか？
ここで、気になるのは、検索エンジンなどでスパムとみなされないかという点だが、
「正当な理由で利用する限り問題がない」
という話が米GoogleのエンジニアMatt Cutts氏から出ているそうだ。
要は、display: noneで表示させない部分に、やたらに複数のテキストを入れたりしない限り今のところ問題ないということらしい。

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597
http://freesoft.0hs.org/4169.html#comment-3597

2018年2月8日木曜日

jQuery Google Map

jQuery Google Map
Google Mapsの地図を簡単に表示「jQuery Google Map」
Google Mapsの地図を簡単に表示するプラグイン「jQuery Google Map」を紹介します。
jQueryプラグイン「Google Map」
jQueryプラグイン「jQuery Google Map」は、「Google Maps javascript API」を利用して、地図を描画するプラグインです。
「Google Maps javascript API」の操作を全く知らなくても大丈夫！
操作部分の全ては「jQuery Google Map」プラグインがやってくれます。
サイトに地図をサササッと簡単に挿入できるので便利！

webkaru.net
https://webkaru.net/jquery-plugin/jquery-google-map/

デモとソースをご覧ください。
「jQuery Google Map」のデモ
ソース（HTML + jQuery）
＜!DOCTYPE html>
＜html>
＜head>
＜meta charset='utf-8'>
＜meta name="description" content="jQuery Google Mapのデモでーす。">
＜title>jQuery Google Map - jQueryプラグインまとめのカルマ
＜script src="http://code.jquery.com/jquery-2.0.0.js">
＜script type="text/javascript" src="https://www.google.com/jsapi">
＜script type="text/javascript">
google.load("maps", "3.4", {
other_params: "sensor=false&language=jp"
});
＜/script>
＜script src="src/jquery.googlemap.js">
＜/head>
＜body>
＜p>＜a href="https://webkaru.net/jquery-plugin/jquery-google-map/">「jQueryプラグインまとめ」に戻る

＜h1>TOKYO 2020
＜div id="map" style="width: 800px; height: 600px;">
＜script type="text/javascript">
$(function() {
$("#map").googleMap({
zoom: 15, // Initial zoom level (optional)
coords: [35.681382, 139.766084], // Map center (optional)
type: "ROADMAP" // Map type (optional)
});
})
＜/script>
＜/body>
＜/html>

webkaru.net
https://webkaru.net/jquery-plugin/jquery-google-map/

Google Map を簡単お洒落にカスタマイズ！「Styled Map Wizard」使ってみた。 | バシャログ。
地図カスタマイズのコツ
カスタマイズのコツとしましては、
デフォルトのgooglemapを見て、いる要素といらない要素、サイズ、ズームレベル、色など、Styled Map Wizard で作るより前にちゃんと決めておく。
Styled Map Wizard を開いて、文字やアイコンなど不要となりえる要素を先に全て非表示にしたものを元に、
HTML、CSS、JSの３つを、地図の座標を入れた状態で先に組み立てる。
Styled Map Wizard に戻り、必要なものだけ表示(変更)させ、その部分だけjsへコピペし、実際のプレビューはHTML上で行う。
というのがコツかと、作ってみて思った点です。
ちょっと面倒でも、このひと工夫でサイトの統一感がいっきに増す、Google map のデザイン変更。
皆さんも一度試してみてください。オリジナル感が出せるのでハマるとちょっと楽しいですよ！

バシャログ。
http://bashalog.c-brains.jp/13/02/12-104000.php

<----------api file="" nbsp="" p="">

2017年11月12日日曜日

[code] iframeの拡大縮小

インラインフレーム内のコンテンツを縮小表示する

2017.11.09 Thursday 23:58

htmlを書いていて思うことがあります。インラインフレーム内に入れ子にしたコンテンツを「縮小してサムネイルのようにしたい」と。ところが、これは一筋縄では行かなくてなかなか苦戦します。デスクトップだけではなく、iPhoneなどのスマホにも対応しようと思うと大変。そんな中、試行錯誤の末、ひとつの着地点を見出したのでメモ。が今回のお題目。

＜まえおき＞

例によって例のごとく、筆者は何の責任も負わないのでそのつもりで。

＜結果＞

上のようになりました。このインライン部分のソースの記述は、下のようになっています。

</iframe>

</div>

肝心なのは、

紫色の文字：ググると多く散見される部分で、インラインフレーム内を「0.5」に縮小(つまり50%)し、起点を左上にする。iPhoneなども含めた多くのブラウザに対応するために各記述を並べる。

緑色の文字：iPhoneなどでスクロールを可能にする。

iframeタグをdivタグで囲ってやる。

赤色の文字：囲んだdivタグで、横幅を100%にしてやらないと、入れ子にするコンテンツが表示領域の横幅をはみ出る場合、右側に余白が生まれて意味のない横スクロールが発生する。

青色の文字：iframeタグで縦を指定した数値の半分を、下部のマージンでマイナスしてやる事によって、余計な余白を消す。

橙色の太文字：入れ子のコンテンツは元の50%に縮小しているので、元の倍の「200%」にしてやる事によって、内容は縮小されたまま表示領域の横幅一杯に表示される。そして、横幅「100%」を、右側のマージンでマイナスしてやる事によって、無駄な余白を消す。という内容。

アトリエ・トリガ (旧館)

http://scrappocket.mac-in.net/?eid=92#gsc.tab=0

悲しいことに、iframeの横幅・縦幅が0.55倍になるだけでiframe内のコンテンツが縮小されるわけではないのです。Firefoxなどのブラウザでは、そもそもzoomすらされていない状態になります。

また、iOSではそもそもiframeの幅指定を無視します。ではどうすればよいのでしょうか？答えとしては、CSS3が解釈できるブラウザ限定にはなりますがCSS3のtransformを使えばいいのです。

💻HTML

transform:scale(0.55)<br> <iframe src="http://blog.asial.co.jp" frameborder="1" width="1090" height="1090" style="transform:scale(0.55);-o-transform:scale(0.55);-webkit-transform:scale(0.55);-moz-transform:scale(0.55);-ms-transform:scale(0.55);"></iframe>

transform:scale(0.55)

こうなります。でもまだおかしいのです。上下左右にマージンがあります。これは意図した物ではありません、tranformの起点がコンテンツの真ん中にあるためです。これを補正するために、スタイルを追加します。

💻HTML

transform:scale(0.55);transform-origin:0 0;

これでtranformの起点が左上になるので、意図したとおりの表示になりました。後は、横方向にスクロールバーが出ているのが気になるのと、まだiframeの右側と下側に大きくマージンが出来てしまっているので、これを隠して上げる必要があります。transformの起点は左上になりましたが、コンテンツサイズは元のままとなっているためです。

HTML

二つほどdivの入れ子をする必要があります。

最初のdivは、実際の表示エリアになります、ボーダーと縦方向のスクロールを設定します。

2つめのdivは、コンテンツの高さを決めます、5603/0.55=3081pxです。スクロールなしに設定します。最後にiframeとして、ボーダーなし、スクロールなし、高さと幅をコンテンツサイズとして、transformです。

最後にどういったときにこれを使うのかというと、WEBアプリなどで、外部サイトだがアプリの一部として表示させたい、などといったときに使えるかと思います。基本的にCSS3が使えるブラウザであれば、動作するはずですが、Androidの場合、端末によって、WebViewで動作しないことがあるようです。

※初出時に、ベンダープリフィクスを書いていなかったので追記しています。

固定幅レイアウトのページをウィンドウサイズでピッタリ表示させる

例えば、このアシアルブログをウィンドウサイズ600pxのときでも、スクロールを出さずに、コンテンツサイズを縮小させて表示させたい、と思ったとき、どうすればよいでしょうか。まず思いつくのは、cssのzoomを使って、縮小してみる方法です。アシアルブログの横幅は1090pxとなっているので、600/1090=0.55となるので、0.55倍するとピッタリ表示されるはずです。そうです、iframeのときと要領は同じです。ですが、cssのzoomを使うだけではなく、viewportやjavaScript(jQuery)を駆使する必要があります。なお、対応ブラウザは、Chrome、Mobile Chrome、Safari、Mobile Safari、Firefox、IE9～11です。

IE8にも対応させたいのですが、うまい方法が見つかっていません。MsFilterが動作すればいいのですが、何故かうまいこといきません。いい方法があれば、教えてもらえると大変嬉しいです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>アシアルブログ</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> // UA判定用 var userAgent = window.navigator.userAgent.toLowerCase(); var appVersion = window.navigator.appVersion.toLowerCase(); // ロード・リサイズ時に画面最適化 $(window).bind("load resize", function(){ var width = $(window).width(); $("html").css("zoom" , width/1090); if (appVersion.indexOf("msie 9.") != -1) { $("html").css("-ms-transform" , "scale(" + width/1090 + ")").css("-ms-transform-origin" , "0 0"); $("body").css("overflow-x" , "hidden"); } else if (userAgent.indexOf('gecko') != -1) { $("html").css("-moz-transform" , "scale(" + width/1090 + ")").css("-moz-transform-origin" , "0 0"); $("body").css("overflow-x" , "hidden"); } }); </script> <style> /* IE用viewport */ @-ms-viewport {width: 1090px;} /* common */ html,body {margin:0;padding:0} </style> </head> <body> <a href="https://www.asial.co.jpblog.jpg &mode=1" class="popupimg"><img src="https://www.asial.co.jpblog.jpg"></a> </body> </html>

アシアル

https://blog.asial.co.jp/1314/

埋め込んだiframeのサイズを調整

transformで拡大縮小

Amazonアソシエイトのバナーをなんちゃってレスポンシブ対応させたけれど、設置する場所の親要素にピタリと収まるサイズがなかった。

小さすぎるか、ちょっと大きい。

小さいバナーはまあ我慢するとして、ちょっと大きいバナーは設置してはみ出した部分を「overflow: hidden;」としてお茶を濁した。しかし、どうも気持ち悪い。バナーのデザインによってはトリミングしたことで情報が伝わりにくくなることもある。バナーサイズに合わせてサイトのレイアウトを決めてしまえばいいのかもしれないけれど、そのサイズのバナーが作られないこともあるし、そうなったら腹立たしいことこの上ない。いろいろ考えてiframeの埋め込み元の要素を埋め込み先で調整しようと思ったけれど、それはできない。ということで、「transform: scale();」を使用して全体を縮小させるという、シンプルかつ強引な方法で解決した。

💻

iframe { transform: scale(0.984375); transform-origin: 0 0;}

view rawiframe-transform.css hosted with ❤ by GitHub

iframeを埋め込む親要素のサイズは620px。iframeの中にある画像のサイズは640px。比率を保ったまま縮小したいので、縮小率は「620 / 640 = 0.96875」。

「transform-origin: 0 0;」は縮小する際の基準点。この場合は左上を基点にしている。「transform: scale(calc(100% / 640px));」みたいなことができたら真のレスポンシブ対応ができそうだけれど、それはできなかった。「scale」の値は0〜1じゃないとダメらしい。残念。この記事がお役に立ったらうれしいです。当サイトをサポートしてあなたも良い気分になりましょう。

Tips2019年3月6日

2019.3.6 WedUpdate：2022.2.18

Text by pushman

Heartfield

https://blog.heartfield-web.com/tips/iframe-transform-scale.html#gsc.tab=0

インラインフレームに表示したコンテンツを拡大縮小表示する方法

投稿者: system | 2014年8月18日

今回はインラインフレーム(以降iframe)に表示したコンテンツをCSSで変形させる方法を紹介します。使用するプロパティはCSS3で追加された「transform」というものです。transformはタグに対して様々な変形を適用する事ができるプロパティです。主に変形、移動、縮尺、回転、傾斜を適用する事ができます。iframeにも適用する事ができ、下のiframeのように変わった見せ方ができます。上のiframeにはtransformの縮小と傾斜を適用しています。Flashなどのコンテンツも変形された状態で動いて表示されます。iframeには具体的に下記のプロパティが適用されています。

transform:scale(0.5) skew(10deg, 0deg);

-moz-transform:scale(0.5) skew(10deg, 0deg);

-webkit-transform:scale(0.5) skew(10deg, 0deg);

-o-transform:scale(0.5) skew(10deg, 0deg);

-ms-transform:scale(0.5) skew(10deg, 0deg);

「scale(0.5)」の部分が縮尺を0.5倍に、「skew(10deg, 0deg)」はX軸に対して10度傾斜させるという指定です。現在はまだベンダープレフィックスが必要ですが、主要ブラウザは実装が完了しているようで、近いうちに外れると思われます。Firefoxなどは既にベンダープレフィックスが外れているようです。

ヴィンテージ

https://vintage.ne.jp/blog/2014/08/331

2017年10月5日木曜日

UI,data-icon

data-icon
ボタンに対してdata-iconを付加することことでボタンにアイコンを付けることが可能です。
たとえば削除アイコンをつけたい場合は「data-icon=”delete”」を追加します。
Delete
他にも、以下のような値が指定可能です。
•data-icon=”arrow-l”
•data-icon=”arrow-r”
•data-icon=”arrow-u”
•data-icon=”arrow-d”
•data-icon=”delete”
•data-icon=”plus”
•data-icon=”minus”
•data-icon=”check”
•data-icon=”gear”
•data-icon=”refresh”
•data-icon=”forward”
•data-icon=”back”
•data-icon=”grid”
•data-icon=”star”
•data-icon=”alert”
•data-icon=”info”
•data-icon=”home”
•data-icon=”search”
•data-icon=”bars”
•data-icon=”edit”
アイコンの表示位置はdata-iconpos属性で制御できます。

webcreativepark.net
http://www.webcreativepark.net/jquerymobile/buttons/data-icon/

positionabsolute で中央に配置するやり方

positionabsolute で中央に配置するやり方 YouKnow.jp
CSS
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:好きな値;
height:好きな値;
中央に配置したい要素に上記のCSSを指定することでヨコ・タテ中央配置することができます。
これで、画面中央に表示されているはずです。
画面中央ではなく、親要素の中央に要素を表示させたい場合には、
要素の親要素に、position:static(初期値)以外のposition:relative;、potision:absolute;やposition:fixed;を指定してください。
その親要素を基準にヨコ・タテ中央配置になります。
サンプルではtop.left.right.bottomに0を指定していますが、これらの数値をいじっても問題はありません。
ただし、top.left.right.bottomの初期値はautoになっているため、
これを解除するために指定しています。
そのため、topだけに80pxを指定するとタテ・ヨコ画面中央からタテのみ80px下に行く指定することも可能です。
margin:auto;をmargin:0 auto;にすれば、ヨコ方向のみ中央寄せにすることもできます

YouKnow.jp
http://youknow.jp/web/css-position

jQuery UI

jQuery UI – All Versions
jQuery UI - Git Builds
UNSTABLE, NOT FOR PRODUCTION
jQuery UI git build - uncompressed, theme
jQuery UI 1.12
jQuery UI 1.12.1 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.12.0 - uncompressed, minified, theme
jQuery UI 1.12.0-rc.2 - uncompressed, minified, theme
jQuery UI 1.12.0-rc.1 - uncompressed, minified, theme
jQuery UI 1.12.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.11
jQuery UI 1.11.4 - uncompressed, minified
Themes
black-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.11.3 - uncompressed, minified, theme
jQuery UI 1.11.2 - uncompressed, minified, theme
jQuery UI 1.11.1 - uncompressed, minified, theme
jQuery UI 1.11.0 - uncompressed, minified, theme
jQuery UI 1.11.0-beta.2 - uncompressed, minified, theme
jQuery UI 1.11.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.10
jQuery UI 1.10.4 - uncompressed, minified
Themes
black-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.10.3 - uncompressed, minified, theme
jQuery UI 1.10.2 - uncompressed, minified, theme
jQuery UI 1.10.1 - uncompressed, minified, theme
jQuery UI 1.10.0 - uncompressed, minified, theme
jQuery UI 1.10.0-rc.1 - uncompressed, minified, theme
jQuery UI 1.10.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.9
jQuery UI 1.9.2 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.9.1 - uncompressed, minified, theme
jQuery UI 1.9.0 - uncompressed, minified, theme
jQuery UI 1.9.0-rc.1 - uncompressed, minified, theme
jQuery UI 1.9.0-beta.1 - uncompressed, minified, theme
jQuery UI 1.8
jQuery UI 1.8.24 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.8.23 - uncompressed, minified, theme
jQuery UI 1.8.22 - uncompressed, minified, theme
jQuery UI 1.8.21 - uncompressed, minified, theme
jQuery UI 1.8.20 - uncompressed, minified, theme
jQuery UI 1.8.19 - uncompressed, minified, theme
jQuery UI 1.8.18 - uncompressed, minified, theme
jQuery UI 1.8.17 - uncompressed, minified, theme
jQuery UI 1.8.16 - uncompressed, minified, theme
jQuery UI 1.8.15 - uncompressed, minified, theme
jQuery UI 1.8.14 - uncompressed, minified, theme
jQuery UI 1.8.13 - uncompressed, minified, theme
jQuery UI 1.8.12 - uncompressed, minified, theme
jQuery UI 1.8.11 - uncompressed, minified, theme
jQuery UI 1.8.10 - uncompressed, minified, theme
jQuery UI 1.8.9 - uncompressed, minified, theme
jQuery UI 1.8.8 - uncompressed, minified, theme
jQuery UI 1.8.7 - uncompressed, minified, theme
jQuery UI 1.8.6 - uncompressed, minified, theme
jQuery UI 1.8.5 - uncompressed, minified, theme
jQuery UI 1.8.4 - uncompressed, minified, theme
jQuery UI 1.8.3 - uncompressed, minified, theme
jQuery UI 1.8.2 - uncompressed, minified, theme
jQuery UI 1.8.1 - uncompressed, minified, theme
jQuery UI 1.8.0 - uncompressed, minified, theme
jQuery UI 1.7
jQuery UI 1.7.3 - uncompressed, minified
Themes
baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader
Previous Releases
jQuery UI 1.7.2 - uncompressed, minified, theme
jQuery UI 1.7.1 - uncompressed, minified, theme
jQuery UI 1.7.0 - uncompressed, minified, theme

jQuery UI
http://code.jquery.com/ui/

連載：jQuery Mobile入門
第1回　jQuery Mobileページの基本構造を理解しよう
山田祥寛
2012/01/20
去る2011年はスマートフォンの年であった。
猫も杓子（しゃくし）も……といっては失礼かもしれないが、
多くの人がスマートフォンに興味を持ち、＠ITをはじめ、IT関連のサイトでも連日のように、スマートフォンの記事があふれかえった。
恐らくこの流れが2012年も続くことはほぼ間違いなく、
伴い、スマートフォンに対応したWebアプリケーション開発のニーズもますます増えてくるはずだ。
もっとも、開発者にとって対応するデバイスが増えることは、アプリケーションの可能性が広がるという意味で刺激的なことであると同時に、
デバイスに適したデザインやデバイスごとの検証を強いられるという意味で苦役でもある。
デスクトップの世界でも似たような問題はあったが、スマートフォン（モバイル）の形態はより多彩であり、
主なデバイスに対象を絞ったとしても、全てに対応するコードを一から準備するのは、あまり現実的でない。
そこで登場するのが、スマートフォン対応のフレームワーク／ライブラリだ。
よく聞かれるものには、以下のようなものが存在する。
ライブラリ名概要
Sencha Touch ExtJSをベースとしたJavaScriptフレームワーク。JavaScript中心の記述が特長
jqTouch スマートフォン開発に対応したjQueryプラグイン
iUi iPhoneに特化したUI開発ライブラリ
qooxdoo クロスプラットフォーム対応のJavaScript開発フレームワーク
スマートフォン対応のJavaScriptフレームワーク／ライブラリ
これらのフレームワーク／ライブラリを利用することで、デバイスの違いを（全くでないにせよ）あまり開発者に意識させることなく、
標準的な枠組みでスマートフォン対応のアプリケーションを開発できるようになる。
スマートフォン対応のフレームワークは歴史も浅く、まだまだデファクト・スタンダードといえるものはないものの、
現時点で最有力候補の一角と目されるのが、本連載のテーマでもある「jQuery Mobile」だ。
■jQuery Mobileとは？
jQueryそのものについては本稿の読者諸氏であれば、すでに既にご存じであろう――JavaScriptライブラリのデファクト・スタンダードだ。
「Write Less, Do More（よりシンプルなコードで、より多くの処理を）」をモットーに、シンプルな構文でありながら機能性も高いことから、近年急速にユーザー数を増やしている。何千、何万にも及ぶプラグインによって、自分に必要な機能を自在に拡張できるのも、人気を後押ししている一因だろう。また、ここ数年では、ASP.NET（Visual Studio）やRuby on RailsでもjQueryを標準ライブラリとして採用したことで、サーバサイド・フレームワークとの親和性も高まり、採用のけん引力ともなっている（jQueryについて詳しくは、拙著「ASP.NETプログラマーのためのjQuery入門」も参照いただきたい）。
もっとも、jQuery Mobileは、そのjQueryのモバイル版かというと、ちょっと違う。
jQuery Mobileの用途は、主に「デバイスに依らず、スマートフォン的なUIを作成する」ことに置かれており、
目的からすると、むしろjQuery UIのモバイル版といえるだろう。
jQuery UIが専らデスクトップのWebアプリケーション向けのUIを提供するのに対して、jQuery Mobileはスマートフォン・アプリケーションを対象にUI部品を提供しているわけだ。
jQuery Mobileを利用することで、あらかじめ決められたマークアップに従うだけで、モバイル・デバイスに適したページを開発できる（基本的なページであれば、JavaScriptのコードすら必要ない！）。
jQuery Mobileは、昨年11月にようやく1.0リリースに到達したばかりであるが、現時点で以下のようなデバイスに対応している。
一部のデバイス／機能については、対応に制約もあるようであるが、それでも現実的な用途には、ほぼ問題ないだろう。
•Apple iOS
•Android
•Windows Phone／Windows Mobile
•Kindle 3 and Fire
•Blackberry
•Palm WebOS
•Nokia Symbian
•Opera Mobile／Desktop
•Chrome（デスクトップ）
•Firefox（デスクトップ）
•Internet Explorer（デスクトップ）
また、jQueryをベースとしているので当然であるが、jQueryとの親和性にも優れており、独自の機能を実装するにも、jQueryの知識をそのまま活用できる。
本連載では、そのようなjQuery Mobileについて、一から解説していくものである。
まず初回の本稿では、jQuery Mobileの導入から基本的なページの開発までを紹介する。

@IT
http://www.atmarkit.co.jp/fdotnet/chushin/jqmobile_01/jqmobile_01_01.html

2017年8月2日水曜日

[css] pointer-events:none; でリンクを非リンクに変える

[css] pointer-events:none; でリンクを非リンクに変える | 鹿児島のホームページ制作株式会社カナメン
2014.2.22
author : canamen, Inc.
「pointer-events:none;」はレスポンシブで重宝する可能性が高いです。
「pointer-events:none;」をレスポンシブで使用する方法や考え方はこちらから。合わせてご確認ください！
pointer_events_index
メニューリストを作成して、現在閲覧中のページのaタグをspanタグに変えリンク無効にするか、
aタグのままで表示してしまうか、悩みますよね。
「pointer-events:none;」を指定することで、タグのリンクを無効にしてる。
「pointer-events」の導入方法とメリット・デメリット
リンクを非表示にしたい項目の親要素にidを付けcssで装飾を変更する
メリット
・各ページのcssをbodyタグで制御できる。
デメリット
・cssのコードが増えてしまうので、読み込みに時間がかかる可能性がある。
各ページ毎に読み込むcssを分け装飾を変更する
メリット
・各ページの読み込み時間の短縮が可能。
デメリット
・cssを作成していくと共有と各ページで重複するソースが増えてしまう。
・作成に時間がかかります。
ポイント
時間があったり、綺麗なソースにしたい場合のみcssを分けた方がいいと思います。
それ以外は親要素にidを付けて使用しましょう。
ページ数が膨大になる場合、ページロード時間を短くする為に共通のcssと各ページ毎のcssの2種類をlinkさせるサイトが多いです。
「pointer-events」ソースコード例
//html
//css
#list a.about
{
pointer-events:none;/*リンクを非リンクに変える*/
cursor:default;/*マウスカーソルを矢印のまま変えない*/
text-decoration:none;/*下線を消す*/
color:#000000;/*非リンクの文字色と同じにする*/
}
補足
非リンクになっても、他のリンクと装飾は変わらないので、装飾を変えて一目で非リンクだと分かるようにした方がいいでしょう。
対応ブラウザが少ないので、過信は禁物です。

株式会社カナメン
https://canamen.co.jp/css/css-pointer-eventsnone/

Google feed API

ブログサイトなどのRSSを取り込んで画像も一緒に表示させるフィード機能
2/3/2012
こんにちは。WEBコンテンツ･プランナーの中島です。
今回、自分の備忘録としてのメモも含め、サイト制作に便利な機能を紹介していくシリーズ展開していきたいと思います。
今回は、ブログ等を展開している人が、自分のホームページにブログサイトなどのRSSを取り込んで画像も一緒に表示させるフィード機能についてご案内します。
RSSのURLを入れこむだけでJavaScriptを書きでしてくれる便利な機能のモノもいろいろありますが、
カスタマイズできない物が多く見られます、と言うか、全てがパッケージ化されているものなので自由なデザインにすることが出来ません。
（誰でも簡単に使用できるようにしているため仕方のないことだと思います）
かなり高機能なものがありますが、
デザイン的な部分に目をつぶらなければならない場合が多いです。
せっかくデザインを自分自身で制作しているならデザイン的に自由に使えるRSSフィードを導入したいって思いますよね。
ただし、自由にデザインを設定できるとなると、やはりHTML,CSSを組める知識は必要になります。
WeeblyやJimdoなどの簡単サイト作成CMSサイトでもカスタムHTMLの記述ボックスを組み込めるサイトならもちろん、
自分でコーディングしているオリジナルのサイトでも使用可能な方法を紹介したいと思います。
【Google feed APIという便利な機能を利用します】
google feed apiのjavascriptを使って、ブログの更新情報を表示させたい画像サイズでサムネイル画像を表示させて、
タイトルと本文がリスト表示される。
さらに、外部へのリンクの場合、新規ウィンドウでリンク先を表示させたい、
そして、「続きを読む…」とかの誘導リンクも付ける。
こんな贅沢な設定を自分で、コーディングでやってしまおうという内容で進行していきます。

Cre'ps inc.
http://www.creps-inc.jp/tips_post/first-post

google.load("feeds", "1");
function initialize() {
var feedurl = "http://creps-inc.weebly.com/2/feed"; //rssフィードのurlを指定。wordpressの場合はurl/feed/で取得できる。
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(8); //フィードの表示数を入れる
feed.load(dispfeed);
function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
htmlstr += "
";

for (var i = 0; i < result.feed.entries.length; i++) { //ループ処理
var entry = result.feed.entries[i];
var eimg = ""; //画像取得（初期値設定）
var imgCheck = entry.content.match(/(src="http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG))/); //該当する拡張子のデータを画像として取得している
if(imgCheck){
eimg += ''; //eimgにはimgタグを挿入するように設定、大きさは100ピクセル
}
htmlstr += '
'

var strdate = createDateString(entry.publishedDate);
htmlstr += '
' + eimg + '
';
htmlstr += '
' + entry.title + '' + '' + entry.contentSnippet.substr(0,140) + '' + strdate + '
';
htmlstr += "
" }
htmlstr += "
"; container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
}
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
var pmonth = pdate.getMonth() + 1;
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
var strdate = pyear + "/" + pmonth + "/" + pday ;
return strdate;
}
google.setOnLoadCallback(initialize);

Cre'ps inc.
http://www.creps-inc.jp/tips_post/first-post

貼るだけ簡単RSS表示用ブログパーツ！

貼るだけ簡単RSS表示用ブログパーツ！
お気に入りサイトの最新情報・投稿記事をブログやHPに掲載

貼るだけ簡単RSS表示用ブログパーツ！
https://feed.mikle.com/ja/

2017年7月25日火曜日

Font Awesome

Font Awesome
The iconic font and CSS toolkit
 Download
Version 4.7.0 · GitHub Project ·
Old 3.2.1 Docs · Created by Dave Gandy

Font Awesome
http://fontawesome.io

 One Font, 675 Icons
In a single collection, Font Awesome is a pictographic language of web-related actions.
 No JavaScript Required
Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
 Infinite Scalability
Scalable vector graphics means every icon looks awesome at any size.
 Free, as in Speech
Font Awesome is completely free for commercial use. Check out the license.
 CSS Control
Easily style icon color, size, shadow, and anything that's possible with CSS.
 Perfect on Retina Displays
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
 Plays Well with Others
Originally designed for Bootstrap, Font Awesome works great with all frameworks.
 Desktop Friendly
To use on the desktop or for a complete set of vectors, check out the cheatsheet.
 Accessibility-minded
Font Awesome loves screen readers and helps make your icons accessible on the web.

Font Awesome
http://fontawesome.io

..........................
.fa-step-backward:before{content:"\f048"}
.fa-fast-backward:before{content:"\f049"}
.fa-backward:before{content:"\f04a"}
.fa-play:before{content:"\f04b"}
.fa-pause:before{content:"\f04c"}
.fa-stop:before{content:"\f04d"}
.fa-forward:before{content:"\f04e"}
.fa-fast-forward:before{content:"\f050"}
.fa-step-forward:before{content:"\f051"}
.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}
.fa-chevron-right:before{content:"\f054"}
.fa-plus-circle:before{content:"\f055"}
.fa-minus-circle:before{content:"\f056"}
.fa-times-circle:before{content:"\f057"}
..............................

fgdf pc

Google Fonts

Viewing 821 of 821 font families

Google Fonts
https://fonts.google.com/

//code
Abril+Fatface|Vidaloka
" rel="stylesheet">
Google Fonts
https://fonts.google.com/

登録: 投稿 (Atom)