tag:blogger.com,1999:blog-55503327079247650922024-03-14T01:28:59.311+09:00コンテンツ製作メモコンテンツ製作者のk0j1です☆
Androidアプリの開発やWebコンテンツ等の開発を中心にまとめていきます!k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.comBlogger51125tag:blogger.com,1999:blog-5550332707924765092.post-29057340918256936392016-11-05T18:25:00.000+09:002016-11-05T18:32:01.595+09:00【WEB】美容室ホームページ製作新規開業する美容室のホームページ制作を担当したためまとめます。<br />
<br />
<h2 style="border-bottom: 2px solid #0099FF; color: #333333; font-size: 23px; padding-left: 45px; position: relative;">
<span style="border: 4px solid #B2E0FF; height: 14px; left: 12px; position: absolute; top: 12px; width: 14px;"></span>
美容室について
<span style="border: 4px solid #0099FF; height: 17px; left: 2px; position: absolute; top: 2px; width: 17px;"></span>
</h2>
<br />
・美容室の名前は<b>「Hair Resort Lino」</b><br />
・コンセプトは「<span style="color: #f78e21; font-family: "open sans" , sans-serif; text-transform: uppercase;">プチリゾート気分でくつろげる</span><span style="color: #f78e21; font-family: "open sans" , sans-serif; text-transform: uppercase;">癒しのプライベートサロン</span><span style="font-family: "open sans" , sans-serif; text-transform: uppercase;">」</span><span style="color: white; font-family: "open sans" , sans-serif;"></span><br />
・場所は「福島県須賀川市」<br />
・完全予約制<br />
<br />
<h2 style="border-bottom: 2px solid #0099FF; color: #333333; font-size: 23px; padding-left: 45px; position: relative;">
<span style="border: 4px solid #B2E0FF; height: 14px; left: 12px; position: absolute; top: 12px; width: 14px;"></span>サイト<br /><span style="border: 4px solid #0099FF; height: 17px; left: 2px; position: absolute; top: 2px; width: 17px;"></span>
</h2>
<b> </b><br />
<b>■Hair Resort Lino</b><br />
<a href="http://www.hear-resort-lino.com/">http://www.hear-resort-lino.com/</a><br />
<br />
■PCサイト/スマホサイト<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-TJnCXWAr3FM/WB2gRB9OZaI/AAAAAAABEYc/WVFKaru3nZsz1D7LsK6-WnIT2ZmqI4-9QCLcB/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-11-05%2B18.02.36.png" imageanchor="1" style="clear: right; display: inline !important; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://3.bp.blogspot.com/-TJnCXWAr3FM/WB2gRB9OZaI/AAAAAAABEYc/WVFKaru3nZsz1D7LsK6-WnIT2ZmqI4-9QCLcB/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-11-05%2B18.02.36.png" width="211" /></a></div>
<a href="https://2.bp.blogspot.com/-MFH-H6s73BU/WB2f6MTpcaI/AAAAAAABEYY/b-Ro18B7HhcTu-M79mBX9qBawtUOHLBtwCLcB/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-11-05%2B18.01.00.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="188" src="https://2.bp.blogspot.com/-MFH-H6s73BU/WB2f6MTpcaI/AAAAAAABEYY/b-Ro18B7HhcTu-M79mBX9qBawtUOHLBtwCLcB/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-11-05%2B18.01.00.png" width="320" /></a>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<h2 style="border-bottom: 2px solid #0099FF; color: #333333; font-size: 23px; padding-left: 45px; position: relative;">
<span style="border: 4px solid #B2E0FF; height: 14px; left: 12px; position: absolute; top: 12px; width: 14px;"></span>テンプレートサイト<br /><span style="border: 4px solid #0099FF; height: 17px; left: 2px; position: absolute; top: 2px; width: 17px;"></span>
</h2>
<br />
準備中…k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com4tag:blogger.com,1999:blog-5550332707924765092.post-73445302684449266542016-11-05T17:43:00.001+09:002016-11-05T18:32:42.593+09:00【動画】トリック動画の撮影方法iPhone/スマートフォンではVineというアプリを使って以下のようなトリック動画を撮影可能なようです。<br />
<br />
<h1 style="background: rgb(224, 255, 204); border-left: 15px solid rgb(118, 145, 100); color: #333333; font-family: arial, tahoma, helvetica, freesans, sans-serif; margin: 0px; padding: 7px; position: relative;">
<span style="font-size: medium;">トリック</span></h1>
<div>
<br /></div>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/XZ1asfJP9gc" width="560"></iframe><br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/4JeszpYyPx4" width="560"></iframe><br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/ZtBULWZ3AQ4" width="560"></iframe><br />
<br />
<div>
<br /></div>
<h1 style="background: rgb(224, 255, 204); border-left: 15px solid rgb(118, 145, 100); color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px; padding: 7px; position: relative;">
<span style="font-size: medium;">アプリ</span></h1>
<div>
<span style="font-size: medium;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-TSBOVAX2-Ww/WB2Zr_x2wBI/AAAAAAABEX8/CZsCXidPFJMrhNyPLcAoXoQ9ubNeG55ZgCLcB/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-11-05%2B17.22.43.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://2.bp.blogspot.com/-TSBOVAX2-Ww/WB2Zr_x2wBI/AAAAAAABEX8/CZsCXidPFJMrhNyPLcAoXoQ9ubNeG55ZgCLcB/s640/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2016-11-05%2B17.22.43.png" width="640" /></a></div>
<br />
■特徴<br />
・このアプリを使って6秒動画を撮影できる<br />
・撮影画面をタップしている間だけ撮影可能<br />
・6秒以内なら何度も撮影可能<br />
・前回タップして撮影下部分がうっすら見えた状態で次のシーンを撮影できる<br />
・保存してある動画を組み込み可能<br />
・撮影した部分をカット可能<br />
・撮影した動画はVineに投稿可能<br />
<br />
<h1 style="background: rgb(224, 255, 204); border-left: 15px solid rgb(118, 145, 100); color: #333333; font-family: arial, tahoma, helvetica, freesans, sans-serif; margin: 0px; padding: 7px; position: relative;">
<span style="font-size: medium;">サイト</span></h1>
<div>
<span style="font-size: medium;"><br /></span></div>
<div>
<span style="font-size: medium;">■Vine</span></div>
<div>
<span style="font-size: medium;"><a href="https://vine.co/">https://vine.co/</a></span></div>
<div>
<br /></div>
Vineは動画投稿型のSNSサイトです。<br />
興味があればこちらもご利用ください。k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-90144980108809785482016-03-26T01:21:00.000+09:002016-11-05T17:15:30.323+09:00【動画】動画の製作(準備編)駅伝チームとして結婚式の余興を頼まれる機会があったため、<br />
チームがこれまで訪れた想い出の地を巡って結婚式場まで<br />
たすきをつなぐ動画を作ろうということになりました(^^)/<br />
<br />
その動画を作るにあたって学んだ製作方法についてここでは紹介していきたいと思います☆彡<br />
<br />
<br />
<h1 style="-moz-box-shadow: 1px 1px 1px 1px rgba(128,128,128,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(128,128,128,0.2); -webkit-box-shadow: 1px 1px 1px 1px rgba(128,128,128,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(128,128,128,0.2); background: #eef; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2); color: #1f3134; font-size: 18pt; padding: 15px; width: 70%;">
動画製作ソフト</h1>
<br />
動画を作るにあたって使用するソフトはフリーソフトのみを使用します。<br />
❏AviUtl(Windows用)<br />
❏iMovie(Mac用)<br />
<br />
それぞれにできること、操作性の違いがありますが大雑把に言うと以下のような感じです。<br />
❏AviUtl → 動画を自由に製作できる<br />
❏iMovie → テーマを選択してある程度決まった型に素材を当てはめられる<br />
<br />
操作性は全く違いますが、この2つを使えばそれなりの動画が作れるかと思います。<br />
特にAviUtlは使いこなしていけばどんな動画でも作れそうな気がするほど自由度が高いですが、<br />
手間と慣れが必要かと思われます。。<br />
(せっかく性能の良いMacを買いましたが、Macでは似たようなフリーソフトがまだ見つけられなかったため、Windowsも併用します(´・ω・))<br />
<br />
<h1 style="background: rgb(238, 238, 255); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px 1px, rgb(255, 255, 255) 15px 15px 0px -5px, rgba(0, 0, 0, 0.2) 15px 15px 1px -4px; color: #1f3134; font-size: 18pt; padding: 15px; width: 457.094px;">
AviUtl</h1>
<br />
AviUtlは以下からダウンロードできます。<br />
<br />
<b style="background-color: #efffef; color: #1f5f1f; font-size: xx-large; text-align: -webkit-center;"><a href="http://spring-fragrance.mints.ne.jp/aviutl/" rel="nofollow" target="_blank">AviUtlのお部屋</a></b><br />
<br />
<br />
まずは簡単な使い方として以下の動画をご確認ください。<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/Jw17wHMyBkw" width="640"></iframe>
<br />
<br />
AviUtlの詳細な使い方はここのサイトを読めこんでいけば、かなり理解できると思います。<br />
<h1 id="site-title" style="color: #333333; font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 30px; line-height: 30px; margin-bottom: 10px; margin-top: 16px;">
<a href="http://aviutl.info/" sl-processed="1" style="color: #222222; font-weight: normal; text-decoration: none; word-wrap: break-word;">AviUtlの易しい使い方</a></h1>
<br />
<h1 style="background: rgb(238, 238, 255); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px 1px, rgb(255, 255, 255) 15px 15px 0px -5px, rgba(0, 0, 0, 0.2) 15px 15px 1px -4px; color: #1f3134; font-size: 18pt; padding: 15px; width: 457.094px;">
iMovie</h1>
<br />
iMovieはAppleStoreからダウンロード可能です。<br />
<br />
❏AppleStore - iMovie<br />
<a href="https://itunes.apple.com/jp/app/imovie/id377298193?mt=8">https://itunes.apple.com/jp/app/imovie/id377298193?mt=8</a><br />
<br />
<a href="http://1.bp.blogspot.com/-YSSE-I6oyoc/VvVi3T8k5kI/AAAAAAAA4us/V0p8O_PkQUc96UsVmhq-wUEKSQW6QY7NQ/s1600/imovie20project205-290765.jpg" imageanchor="1"><img border="0" height="406" src="https://1.bp.blogspot.com/-YSSE-I6oyoc/VvVi3T8k5kI/AAAAAAAA4us/V0p8O_PkQUc96UsVmhq-wUEKSQW6QY7NQ/s640/imovie20project205-290765.jpg" width="640" /></a><br />
<br />
iMovieではテーマを選んで動画と写真を切り替えながらタイトルを追加して調整することで、<br />
質の高い動画が比較的簡単に作れます。<br />
<br />
<a href="http://3.bp.blogspot.com/-_3a153uPCc4/VvVkETSipkI/AAAAAAAA4u4/NQMUu3FY6Zkwd3igNMgu2q3SdKuRBerSA/s1600/140911-0003.jpg" imageanchor="1"><img border="0" height="232" src="https://3.bp.blogspot.com/-_3a153uPCc4/VvVkETSipkI/AAAAAAAA4u4/NQMUu3FY6Zkwd3igNMgu2q3SdKuRBerSA/s640/140911-0003.jpg" width="640" /></a><br />
<br />
動画製作をはじめるにあたっては最初にこちらから使用してみるとよいかと思います(^^)/<br />
<br />
<br />
<h1 style="background: rgb(238, 238, 255); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px 1px, rgb(255, 255, 255) 15px 15px 0px -5px, rgba(0, 0, 0, 0.2) 15px 15px 1px -4px; color: #1f3134; font-size: 18pt; padding: 15px; width: 457.094px;">
完成動画(結婚式余興ムービー)</h1>
<br />
いろいろと苦労しながら製作して実際に結婚式で流れた動画が以下になります(^^♪<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/zMk38BKxBtI" width="640"></iframe>
<br />
<br />
<br />
細かい箇所についての説明は、機会があれば別な記事で紹介していきます('ω')ノ<br />
<br />k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-34286964520840875802016-03-26T00:32:00.000+09:002016-03-26T00:32:57.732+09:00【MAC】Macで初めに覚えておくべき操作方法について今年の正月にiMacを購入しました(^^)/<br />
<br />
<a href="http://www.amazon.co.jp/gp/product/B016WA8USU/ref=as_li_ss_il?ie=UTF8&camp=247&creative=7399&creativeASIN=B016WA8USU&linkCode=as2&tag=s1110137-22"><img border="0" src="http://ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B016WA8USU&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=s1110137-22" /></a><img alt="" border="0" src="http://ir-jp.amazon-adsystem.com/e/ir?t=s1110137-22&l=as2&o=9&a=B016WA8USU" height="1" style="border: none !important; margin: 0px !important;" width="1" />
<br />
<br />
<b>Apple iMac</b><br />
(Retina 5K Display 27/3.2GHz Quad Core i5/8GB/1TB Fusion/AMD Radeon R9 M390)<br />
<br />
Androidアプリを作るためにも性能が良いNewマシンが欲しかったので、<br />
思い切って購入(´・ω・)<br />
<br />
動画製作やWebアプリ、ホームページの製作なんかにも手を広げていきたいとおもいます(^^)/<br />
<br />
<br />
まぁ買ったみたところでここまでMacに触れてきたことがないため、<br />
まずは使い方から勉強するため一通りの設定をいじりながら<br />
Macで最初に覚えておくべきことをここでまとめておきたいと思います。<br />
<br />
<br />
<br />
<h1 style="-moz-transform: rotate(-3deg) skew(-3deg); -ms-transform: rotate(-3deg) skew(-3deg); -o-transform: rotate(-3deg) skew(-3deg); -webkit-transform: rotate(-3deg) skew(-3deg); background: #f0e800; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800; color: #333333; font: bold 30px/1.6 Arial, Helvetica, sans-serif; margin: 0 -1px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1); transform: rotate(-3deg) skew(-3deg);">
Windowsとの違い</h1>
<br />
<br />
Macを操作するとWindowsとの違いに戸惑う大きな点は以下のあたりになります。<br />
❏キーボードの違い<br />
❏マウスの違い<br />
❏フォルダ(エクスプローラ)の違い<br />
<br />
などが挙げられますが、触れていくと細かな点で違いがあることに気づきます。<br />
どちらかというとLinux寄りな雰囲気ですが、慣れるまでには<br />
少し時間がかかりそうな気がします|д゚)<br />
<br />
<br />
<br />
<br />
<h1 style="-moz-transform: rotate(-3deg) skew(-3deg); -ms-transform: rotate(-3deg) skew(-3deg); -o-transform: rotate(-3deg) skew(-3deg); -webkit-transform: rotate(-3deg) skew(-3deg); background: #f0e800; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800; color: #333333; font: bold 30px/1.6 Arial, Helvetica, sans-serif; margin: 0 -1px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1); transform: rotate(-3deg) skew(-3deg);">
ショートカットキー</h1>
<br />
<br />
<br />
Windowsとのキーの違いもあるため、一般的なショートカットについてまとめます。
<br />
<br />
<table border="0" cellspacing="0" cols="2" frame="VOID" rules="NONE">
<colgroup><col width="159"></col><col width="396"></col></colgroup>
<tbody>
<tr>
<td align="CENTER" bgcolor="#00FFFF" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE" width="159"><b>ショートカット</b></td>
<td align="CENTER" bgcolor="#00FFFF" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE" width="396"><b>説明</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + X</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>切り取り</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + C</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>コピー</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + V</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>ペースト</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + Z</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>取り消す</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + A</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>すべて選択</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + F</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>検索</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + G</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>次を検索</b></td>
</tr>
<tr>
<td align="LEFT" height="30" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + H</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>最前面のウインドウを非表示<br />すべてのウィンドウを隠すには、「command + option + H」</b></td>
</tr>
<tr>
<td align="LEFT" height="31" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + M</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>最前面のウインドウを最小化して Dock にしまう<br />すべて最小化するには、「command + option + M」</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + N</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>新規ウインドウを開く</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + O</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>ファイルを開く</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + P</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>印刷</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + S</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>保存</b></td>
</tr>
<tr>
<td align="LEFT" height="30" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + W</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>最前面のウインドウを閉じる。<br />すべてのウインドウを閉じるには、「command + option + W」</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + Q</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>アプリの終了</b></td>
</tr>
<tr>
<td align="LEFT" height="43" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + option + esc</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>アプリを選択して強制終了<br />「command + shift + option + esc」キーを 3 秒間押したままで、最前面の アプリのみを強制終了</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE">control + スペース</td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>検索フィールドの表示/非表示を切り替え</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE">スペース</td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>選択されている項目をプレビュー</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + tab</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>アプリの切り替え</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + shift + “~”</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>ウインドウの切り替え</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">command + shift + 3</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>スクリーンショット</b></td>
</tr>
<tr>
<td align="LEFT" height="17" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;" valign="MIDDLE"><span style="font-family: "times new roman";">Command + “,”</span></td>
<td align="LEFT" style="border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000;"><b>最前面のアプリの環境設定を開く</b></td>
</tr>
</tbody>
</table>
<br />
<br />
<br />
<h1 style="-moz-transform: rotate(-3deg) skew(-3deg); -ms-transform: rotate(-3deg) skew(-3deg); -o-transform: rotate(-3deg) skew(-3deg); -webkit-transform: rotate(-3deg) skew(-3deg); background: #f0e800; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800; color: #333333; font: bold 30px/1.6 Arial, Helvetica, sans-serif; margin: 0 -1px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1); transform: rotate(-3deg) skew(-3deg);">
マジックマウス</h1>
<br />
<br />
マウスにはマウスホイールがなく、最初の設定では右クリックもないため戸惑いました( ;∀;)<br />
でも慣れると使いやすそうなイメージです、操作方法は以下のような感じ('ω')<br />
<br />
<a href="http://2.bp.blogspot.com/-ZhvNd4LIpLs/VvVRs2brw1I/AAAAAAAA4uE/KGKgjc5ippIZ8i1j-Jkvk_WY4xa7JXBIw/s1600/4394729be5cfbc15f3738886a48c74ba.png" imageanchor="1"><img border="0" height="257" src="https://2.bp.blogspot.com/-ZhvNd4LIpLs/VvVRs2brw1I/AAAAAAAA4uE/KGKgjc5ippIZ8i1j-Jkvk_WY4xa7JXBIw/s640/4394729be5cfbc15f3738886a48c74ba.png" width="640" /></a><br />
<br />
<br />
元Windowsユーザーは右クリックも最初から使用できるようにしておきましょう(^^;<br />
<br />
<a href="http://1.bp.blogspot.com/-xGXEIcRSNlw/VvVSFE2RGPI/AAAAAAAA4uM/j6cE1xra7kYP9FDpFN4JQEYbpanzFU7Ng/s1600/0d1e1b5e11af1db6a846f28c0c7cae15.png" imageanchor="1"><img border="0" height="488" src="https://1.bp.blogspot.com/-xGXEIcRSNlw/VvVSFE2RGPI/AAAAAAAA4uM/j6cE1xra7kYP9FDpFN4JQEYbpanzFU7Ng/s640/0d1e1b5e11af1db6a846f28c0c7cae15.png" width="640" /></a><br />
<br />
<br />
<br />
<br />
<br />
<h1 style="-moz-transform: rotate(-3deg) skew(-3deg); -ms-transform: rotate(-3deg) skew(-3deg); -o-transform: rotate(-3deg) skew(-3deg); -webkit-transform: rotate(-3deg) skew(-3deg); background: #f0e800; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800; color: #333333; font: bold 30px/1.6 Arial, Helvetica, sans-serif; margin: 0 -1px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1); transform: rotate(-3deg) skew(-3deg);">
Finder</h1>
<br />
<br />
Windowsでいうところのフォルダ(エクスプローラ)の代わりとなるものとしてFinderあります。<br />
<br />
❏エクスプローラでは右上にあった閉じるや最大化/最小化なんかはFinderでは左上になります。<br />
<br />
❏サイドバーなんかはエクスプローラと同じような使い方ができそうな感じです。<br />
<div>
<br /></div>
❏ファイルの削除がDeleteキーや右クリックでできず、ゴミ箱にファイルをドラッグ&ドロップする必要があるため、ゴミ箱をサイドバーに表示させましょう。設定方法は以下の手順で行います。<br />
①Finderを起動してメニューから「移動」→「フォルダへ移動」を押下<div>
②フォルダの場所に「~/.Trash」と入力して「移動」ボタンを押下して「~/.Trash」に移動</div>
<div>
③サイドバーに「.Trash」をドラッグ&ドロップ<br /><br />
❏ステータスバーとパスバーの表示することで、現在どの階層にいるか表しているかやフォルダの項目数、ストレージの空き状況が確認できます。<br />
(Finderの表示メニューから「パスバーを表示」「ステータスバーを表示」を選択)<br /><br /><a href="http://3.bp.blogspot.com/-DFlM4heZTPk/VvVXRdR6ugI/AAAAAAAA4uc/5k0I7Ousuk8wmqSeNJDfTIhWWkZKOfOUg/s1600/mac-finder-configuration-2.jpg" imageanchor="1" style="font-family: 'Hiragino Kaku Gothic Pro', 'Lucida Grande', Verdana, Meiryo, 'MS PGothic', sans-serif; font-size: 15px; line-height: 24px;"><img border="0" height="64" src="https://3.bp.blogspot.com/-DFlM4heZTPk/VvVXRdR6ugI/AAAAAAAA4uc/5k0I7Ousuk8wmqSeNJDfTIhWWkZKOfOUg/s640/mac-finder-configuration-2.jpg" width="640" /></a></div>
k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-56744178913716056422015-11-07T10:46:00.000+09:002016-11-05T17:15:09.083+09:00【HTML】【CSS】コピペで使えるサンプル集-引用部分編ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。<br />
<br />
ここでは他サイトから文章を引用した時に使う引用部分(brockquote)のデザインについて<br />
コピペだけで利用できるタグを紹介してきたいと思います。<br />
<br />
CSSがわかる方は更にカスタマイズしていただければと思います。<br />
<br />
タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、<br />
画像は使用しません。<br />
<br />
<br />
■利用方法<br />
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください<br />
<br />
<br />
<h1 style="font-family: bold; font-size: 24px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
関連記事</h1>
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)</a><span id="goog_1939434039"></span><span id="goog_1939434040"></span><a href="https://www.blogger.com/"></a><br />
・<a href="http://k0j1-android.blogspot.jp/2015/10/web_10.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/10/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-ボタン編</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_7.html">【HTML】【CSS】コピペで使えるサンプル集-背景編</a><br />
<div>
<br /></div>
<br />
<br />
<center>
────────────────────────────────────────────────────────────────────<br />----------------------------------------------------------------------------------------------------------------------------------------<br /><h1 style="font-family: bold; font-size: 30px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
引用部分サンプル集</h1>
----------------------------------------------------------------------------------------------------------------------------------------<br />────────────────────────────────────────────────────────────────────</center>
<br />
<blockquote style="background: #FFF; border: 3px dashed #999; font-weight: bold; line-height: 22px; margin-left: 10px; margin: 5em 10px; padding: 10px; width: 500px;">
<span style="color: red; float: left; font-size: 700%; height: 45px; margin: -28px 0 -50px -3px; padding-top: 45px;">“</span>
<br />
<div style="text-align: right;">
<a href="http://infinityforest.net/"><i>infinityforest</i></a></div>
「引用部分①」<br />
<a href="http://infinityforest.net/home/archives/1530">画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEを<br />いろいろデザインする</a><br />
<span style="color: red; float: right; font-size: 700%; height: 25px; margin: 10px 0; padding-top: 5px;">”</span>
</blockquote>
<textarea cols="80" rows="12"><div style="text-align: right;">
<a href="http://infinityforest.net/"><i>infinityforest</i></a></div>
「引用部分①」<br />
<a href="http://infinityforest.net/home/archives/1530">画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEを<br />いろいろデザインする</a><br />
<span style="color: red; float: right; font-size: 700%; height: 25px; margin: 10px 0; padding-top: 5px;">”</span>
</blockquote>
</textarea>
<br />
<br />
<br />
<blockquote style="border: 2px dotted #D4D4D4; margin: 10px; padding: 10px;">
引用部分②<br />
ここに引用する文章を記載してください。
</blockquote>
<textarea cols="80" rows="12"><blockquote style="border: 2px dotted #D4D4D4; margin: 10px; padding: 10px;">
引用部分②<br />
ここに引用する文章を記載してください。
</blockquote>
</textarea>
<br />
<br />
<br />
<blockquote style="background: #fff; border-radius: 5px; box-shadow: inset 0 2px 0 rgba(188, 147, 200, 0.7), -5px -4px 25px rgba(0, 0, 0, 0.3); padding: 30px; width: 500px;">
<span style="color: #bc93c8; font-family: serif; font-size: 80px; font-weight: 700; line-height: 32px; text-indent: 90px;">❝</span>
<span style="color: #b4b4b4; font-family: "alegreya" , serif; font-size: 24px; font-style: italic; line-height: 40px; text-indent: 100px;">Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples.</span>
</blockquote>
<cite style="color: white; font-family: 'Alegreya', serif; font-style: italic; font-weight: 700; padding-left: 550px; text-shadow: 0 1px 1px rgba(0,0,0,0.3);">
<a href="http://tympanus.net/codrops/2012/07/25/modern-block-quote-styles/" target="_blank">tympanus</a>
</cite>
<br />
<br />
<textarea cols="80" rows="12"><blockquote style="background: #fff; border-radius: 5px; box-shadow: inset 0 2px 0 rgba(188, 147, 200, 0.7), -5px -4px 25px rgba(0, 0, 0, 0.3); padding: 30px; width: 500px;">
<span style="color: #bc93c8; font-family: serif; font-size: 80px; font-weight: 700; line-height: 32px; text-indent: 90px;">❝</span>
<span style="color: #b4b4b4; font-family: "alegreya" , serif; font-size: 24px; font-style: italic; line-height: 40px; text-indent: 100px;">Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples.</span>
</blockquote>
<cite style="color: white; font-family: 'Alegreya', serif; font-style: italic; font-weight: 700; padding-left: 550px; text-shadow: 0 1px 1px rgba(0,0,0,0.3);">
<a href="http://tympanus.net/codrops/2012/07/25/modern-block-quote-styles/" target="_blank">tympanus</a>
</cite>
</textarea>
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<br />
<br />
<h1 style="background: #274a78; border-radius: 5px; border: 2px dashed #f8fbf8; box-shadow: 0 0 3px 3px #274a78; color: #f8fbf8; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
❏参考記事、ブログ</h1>
<br />
こちらの記事やブログのサイト様を参考にさせていただきましたm(_ _)m<br />
<br />
<div class="mdMTMWidget01ItemTtl01" style="background-color: white; line-height: 18px; margin: 0px; padding: 0px;">
<div class="mdMTMWidget01ItemTtl01View" style="line-height: 1.3; padding: 0px; word-wrap: break-word;">
<div style="background-color: white; line-height: 1.3;">
<span style="color: black; font-family: inherit; padding: 2px 0px;">・</span><a href="http://infinityforest.net/home/archives/1530">画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEをいろいろデザインする</a></div>
・<a href="http://tympanus.net/codrops/2012/07/25/modern-block-quote-styles/">Modern Block Quote Styles</a>
</div>
</div>
<br />
<br />
<br />
こちらも合わせてご確認ください☆<br />
<br />
<h1 style="font-family: bold; font-size: 24px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
関連記事</h1>
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)</a><span id="goog_1939434039"></span><span id="goog_1939434040"></span><a href="https://www.blogger.com/"></a><br />
・<a href="http://k0j1-android.blogspot.jp/2015/10/web_10.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/10/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-ボタン編</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_7.html">【HTML】【CSS】コピペで使えるサンプル集-背景編</a><br />
<br />k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com1tag:blogger.com,1999:blog-5550332707924765092.post-84860780966357167542015-11-07T00:16:00.000+09:002016-11-05T17:14:55.801+09:00【HTML】【CSS】コピペで使えるサンプル集-背景編ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。
<br />
<br />
ここではホームページやブログのデザインに大きく営業する背景や模様について<br />
コピペだけで利用できるタグを紹介してきたいと思います。<br />
<br />
CSSがわかる方は更にカスタマイズしていただければと思います。<br />
<br />
タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、<br />
画像は使用しません。<br />
<br />
<br />
■利用方法<br />
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください<br />
<br />
<br />
<h1 style="font-family: bold; font-size: 24px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
関連記事</h1>
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)</a><span id="goog_1939434039"></span><span id="goog_1939434040"></span><a href="https://www.blogger.com/"></a><br />
・<a href="http://k0j1-android.blogspot.jp/2015/10/web_10.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/10/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-ボタン編</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_72.html">【HTML】【CSS】コピペで使えるサンプル集-引用部分編</a><br />
<br />
<br />
<center>
────────────────────────────────────────────────────────────────────<br />
----------------------------------------------------------------------------------------------------------------------------------------<br />
<h1 style="font-family: bold; font-size: 30px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
背景サンプル集</h1>
----------------------------------------------------------------------------------------------------------------------------------------<br />
────────────────────────────────────────────────────────────────────<br />
</center>
<br />
<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #00aaee; background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様①</span>
</div>
<textarea cols="80" rows="12"><div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #00aaee; background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様①</span>
</div>
</textarea>
<br />
<br />
<br />
<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #ff9900; background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様②</span>
</div>
<textarea cols="80" rows="12"><div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #ff9900; background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様②</span>
</div>
</textarea>
<br />
<br />
<br />
<div style="background-color: #840b2a; background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様③</span>
</div>
<textarea cols="80" rows="12"><div style="background-color: #840b2a; background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様③</span>
</div>
</textarea>
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<div style="background-color: #6d695c; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); background-size: 70px 120px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様④</span>
</div>
<textarea cols="80" rows="12"><div style="background-color: #6d695c; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); background-size: 70px 120px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様④</span>
</div>
</textarea>
<br />
<br />
<br />
<div style="background-color: black; background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="color: white; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑤</span>
</div>
<textarea cols="80" rows="12"><div style="background-color: black; background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="color: white; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑤</span>
</div>
</textarea>
<br />
<br />
<br />
<div style="background-color: #ddeeff; background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%), radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%); background-position: 0 0, 40px 40px; background-size: 80px 80px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑥</span>
</div>
<textarea cols="80" rows="12"><div style="background-color: #ddeeff; background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%), radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%); background-position: 0 0, 40px 40px; background-size: 80px 80px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑥</span>
</div>
</textarea>
<br />
<br />
<br />
<div style="background-color: silver; background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px); background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; background-size: 58px 58px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑦</span>
</div>
<textarea cols="80" rows="12"><div style="background-color: silver; background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px); background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; background-size: 58px 58px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑦</span>
</div>
</textarea>
<br />
<br />
<br />
<div style="background-color: silver; background-image: radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent), radial-gradient(circle at 0 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent); background-size: 100px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑧</span>
</div>
<textarea cols="80" rows="12"><div style="background-color: silver; background-image: radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent), radial-gradient(circle at 0 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent); background-size: 100px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑧</span>
</div>
</textarea>
<br />
<br />
<br />
<div style="background-color: #555566; background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; background-size: 80px 140px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑨</span>
</div>
<textarea cols="80" rows="12"><div style="background-color: #555566; background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; background-size: 80px 140px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様⑨</span>
</div>
</textarea>
<br />
<br />
<br />
<div style="background-color: #000011; background-image: radial-gradient(white 15%, transparent 16%), radial-gradient(white 15%, transparent 16%); background-position: 0 0, 30px 30px; background-size: 60px 60px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="color: white; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑩</span>
</div>
<textarea cols="80" rows="12"><div style="background-color: #000011; background-image: radial-gradient(white 15%, transparent 16%), radial-gradient(white 15%, transparent 16%); background-position: 0 0, 30px 30px; background-size: 60px 60px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="color: white; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑩</span>
</div>
</textarea>
<br />
<br />
<br />
<div style="background-color: hsl(2, 57%, 40%); background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px); box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="color: black; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑪</span>
</div>
<textarea cols="80" rows="12"><div style="background-color: hsl(2, 57%, 40%); background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px); box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="color: black; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑪</span>
</div>
</textarea>
<br />
<br />
<br />
<div style="background-color: white; background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em); background-size: 100% 1.2em; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="color: black; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑫</span>
</div>
<textarea cols="80" rows="12"><div style="background-color: white; background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em); background-size: 100% 1.2em; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="color: black; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑫</span>
</div>
</textarea>
<br />
<br />
<br />
<div style="background-color: white; background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="color: black; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑬</span>
</div>
<textarea cols="80" rows="12"><div style="background-color: white; background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;">
<span style="color: black; font-size: x-large; margin: 100px; position: absolute;">背景・模様⑬</span>
</div>
</textarea>
<br />
<br />
<br />
<h1 style="background: #274a78; border-radius: 5px; border: 2px dashed #f8fbf8; box-shadow: 0 0 3px 3px #274a78; color: #f8fbf8; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
❏参考記事、ブログ</h1>
<br />
こちらの記事やブログのサイト様を参考にさせていただきましたm(_ _)m<br />
<br />
<div class="mdMTMWidget01ItemTtl01" style="background-color: white; line-height: 18px; margin: 0px; padding: 0px;">
<div class="mdMTMWidget01ItemTtl01View" style="line-height: 1.3; padding: 0px; word-wrap: break-word;">
<div style="background-color: white; line-height: 1.3;">
<span style="color: black; font-family: inherit; padding: 2px 0px;">・</span><span style="background-color: transparent;"><a href="http://coliss.com/articles/build-websites/operation/css/css-tutorial-checkered-stripes-other-background-patterns-with-css3-gradients.html" rel="nofollow">[CSS]画像を使用せずに、背景をストライプやチェック柄にするスタイルシート</a></span></div>
</div>
</div>
・<a href="http://lea.verou.me/css3patterns/#">CSS3 Patterns Gallery</a><br />
<br />
<br />
<br />
こちらも合わせてご確認ください☆<br />
<br />
<h1 style="font-family: bold; font-size: 24px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
関連記事</h1>
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)</a><span id="goog_1939434039"></span><span id="goog_1939434040"></span><a href="https://www.blogger.com/"></a><br />
・<a href="http://k0j1-android.blogspot.jp/2015/10/web_10.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/10/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-ボタン編</a><br />
<div>
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_72.html">【HTML】【CSS】コピペで使えるサンプル集-引用部分編</a></div>
<div>
<br /></div>
k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-74327763974506815102015-11-02T00:28:00.000+09:002016-11-05T17:14:38.139+09:00【WEB】マウスホバーエフェクトの導入今回はGitHubに公開されているcssライブラリ(Hover.cssファイル)を導入することで、<br />
手軽にマウスがのった時のボタンやリンクの動作(ホバーエフェクト)を設定する方法をご紹介いたします。<br />
<br />
しばらくAndroidアプリ開発からは離れHTMLやCSSを利用したWEB開発の方法を紹介していますが、<br />
これも後々アプリ開発に繋がると思っていますので今は情報をまとめておきたいと思います(^^;<br />
<br />
<br />
<h1 style="background: #4141aa; color: white; font-size: 30px; margin: 0; overflow: hidden; padding: 10px; text-shadow: 0px 0px #212144, 1px 1px #212144, 2px 2px #212144, 3px 3px #212144, 4px 4px #212144, 5px 5px #212144, 6px 6px #212144, 7px 7px #212144, 8px 8px #212144, 9px 9px #212144;">
Hover.cssの導入手順</h1>
<div>
<br />
導入手順は以下のとおりです。<br />
ブログなどに導入する場合は<HEAD>タグが編集できる必要があります。<br />
<br />
<span style="background-color: white; font-family: "hiragino kaku gothic pron" , "meiryo" , sans-serif; font-size: 17px; line-height: 28.9px;">①Hover.cssをダウンロードします。</span></div>
<div style="background-color: white; font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 17px; line-height: 28.9px;">
<span style="line-height: 28.9px;">②ダウンロードは以下のページにアクセスして</span><span style="line-height: 28.9px;">「Download ZIP」から行います。</span></div>
<div style="background-color: white;">
<span style="font-family: "hiragino kaku gothic pron" , "meiryo" , sans-serif;"><span style="font-size: 17px; line-height: 28.9px;"> <a href="https://github.com/IanLunn/Hover">https://github.com/IanLunn/Hover</a></span></span></div>
<div style="background-color: white; font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 17px; line-height: 28.9px;">
③<span style="line-height: 28.9px;">「Hover-master.zip」というファイルがダウンロードされますので、</span></div>
<div style="background-color: white; font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 17px; line-height: 28.9px;">
<span style="line-height: 28.9px;"> 中の「css」フォルダにある「Hover.css」ファイルをコピーしておきます。</span></div>
<div style="background-color: white; font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; font-size: 17px; line-height: 28.9px;">
<span style="line-height: 28.9px;">④「Hover.css」をWEB上に公開し、以下のようにHEADタグ内に記載します。</span></div>
<pre style="background-color: #f7f7f7; border-radius: 3px; box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; font-stretch: normal; line-height: 1.45; overflow: auto; padding: 16px; word-break: normal; word-wrap: normal;"><<span class="pl-ent" style="box-sizing: border-box; color: #63a35c;">head</span>>
<<span class="pl-ent" style="box-sizing: border-box; color: #63a35c;">link</span> <span class="pl-e" style="box-sizing: border-box; color: #795da3;">href</span>=<span class="pl-s" style="box-sizing: border-box; color: #183691;"><span class="pl-pds" style="box-sizing: border-box;">"</span>css/hover-min.css<span class="pl-pds" style="box-sizing: border-box;">"</span></span> <span class="pl-e" style="box-sizing: border-box; color: #795da3;">rel</span>=<span class="pl-s" style="box-sizing: border-box; color: #183691;"><span class="pl-pds" style="box-sizing: border-box;">"</span>stylesheet<span class="pl-pds" style="box-sizing: border-box;">"</span></span>>
</<span class="pl-ent" style="box-sizing: border-box; color: #63a35c;">head</span>></pre>
<br />
<br />
<br />
<h1 style="background: #4141aa; color: white; font-size: 30px; margin: 0; overflow: hidden; padding: 10px; text-shadow: 0px 0px #212144, 1px 1px #212144, 2px 2px #212144, 3px 3px #212144, 4px 4px #212144, 5px 5px #212144, 6px 6px #212144, 7px 7px #212144, 8px 8px #212144, 9px 9px #212144;">
Demo</h1>
<br />
主な動作としては、開発者の方がDemo用のページを用意していますので、まずはそちらをご覧ください。<br />
<br />
<a href="http://ianlunn.github.io/Hover/">http://ianlunn.github.io/Hover/</a><br />
<br />
<br />
Demoではボタンのみの動作を紹介していましたが、これはリンクでも画像でも利用可能です。<br />
<br />
<br />
<button class="button hvr-pulse" href="#" style="background: none repeat scroll 0 0 #fff; border-radius: 3px; border: 1px solid #777; color: #333333; cursor: pointer; display: inline-block; font-weight: bold; line-height: normal; margin-bottom: 20px; padding: 6px 12px; text-decoration: none;">Pulse</button><br />
<a class="button hvr-pulse" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">Pulse</a><br />
<br />
<img border="0" class="button hvr-pulse" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<br />
<br />
<br />
<span style="background-color: white; font-family: "hiragino kaku gothic pron" , "meiryo" , sans-serif; font-size: 17px; line-height: 28.9px;">ボタン以外にも「Hover.css」を有効活用できる効果的な利用方法を紹介していきたいと思います。</span><br />
<span style="background-color: white; font-family: "hiragino kaku gothic pron" , "meiryo" , sans-serif; font-size: 17px; line-height: 28.9px;"><br /></span>
<br />
<span style="background-color: white; font-family: "hiragino kaku gothic pron" , "meiryo" , sans-serif; font-size: 17px; line-height: 28.9px;"><br /></span>
<br />
<h1 style="background: #4141aa; color: white; font-size: 30px; margin: 0; overflow: hidden; padding: 10px; text-shadow: 0px 0px #212144, 1px 1px #212144, 2px 2px #212144, 3px 3px #212144, 4px 4px #212144, 5px 5px #212144, 6px 6px #212144, 7px 7px #212144, 8px 8px #212144, 9px 9px #212144;">
テキスト編</h1>
<br />
<span style="background-color: white; color: #333333; font-family: "hiragino kaku gothic pron" , "meiryo" , sans-serif; font-size: 17px; line-height: 28.9px;">
<a class="button hvr-fade" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">ほたるの光</a> <a a="" class="button hvr-grow" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">まどの雪</a><br />
<a class="button hvr-grow-rotate" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">書(ふみ)よむつき日</a> <a class="button hvr-sweep-to-bottom" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">かさねつつ</a><br />
<a class="button hvr-underline-from-left" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">いつしか年も</a> <a class="button hvr-ripple-in" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">すぎのとを</a><br />
<a class="button hvr-float-shadow" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">あけてぞけさは</a> <a class="button hvr-skew-forward" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">わかれゆく</a><br />
</span><br />
<pre class="brush: html; first-line: 1; highlight: [,];" title=""><a class="button hvr-fade" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">ほたるの光</a>
<a class="button hvr-grow" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">まどの雪</a>
<a class="button hvr-grow-rotate" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">書(ふみ)よむつき日</a>
<a class="button hvr-sweep-to-bottom" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">かさねつつ</a>
<a class="button hvr-underline-from-left" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">いつしか年も</a>
<a class="button hvr-ripple-in" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">すぎのとを</a>
<a class="button hvr-float-shadow" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">あけてぞけさは</a>
<a class="button hvr-skew-forward" href="https://www.blogger.com/blogger.g?blogID=5550332707924765092#">わかれゆく</a>
</pre>
<br />
<br />
<h1 style="background: rgb(65, 65, 170); color: white; font-size: 30px; margin: 0px; overflow: hidden; padding: 10px; text-shadow: rgb(33, 33, 68) 0px 0px, rgb(33, 33, 68) 1px 1px, rgb(33, 33, 68) 2px 2px, rgb(33, 33, 68) 3px 3px, rgb(33, 33, 68) 4px 4px, rgb(33, 33, 68) 5px 5px, rgb(33, 33, 68) 6px 6px, rgb(33, 33, 68) 7px 7px, rgb(33, 33, 68) 8px 8px, rgb(33, 33, 68) 9px 9px;">
画像編</h1>
<br />
<br />
<img border="0" class="hvr-bounce-in" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-float" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-pulse-grow" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-pop" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-bounce-out" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-grow-rotate" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-hang" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-wobble-horizontal" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-wobble-skew" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-buzz-out" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-fade" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-border-fade" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-round-corners" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-grow-shadow" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<img border="0" class="hvr-float-shadow" height="50" src="https://3.bp.blogspot.com/-90qTRRtO2I0/UlQtWuSA1WI/AAAAAAAAUmI/4SPDgRUNiBc/s200/icon512.png" width="50" />
<br />
<pre class="brush: html; first-line: 1; highlight: [,];" title=""><img border="0" class="hvr-bounce-in" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-float" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-pulse-grow" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-pop" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-bounce-out" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-grow-rotate" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-hang" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-wobble-horizontal" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-wobble-skew" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-buzz-out" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-fade" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-border-fade" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-round-corners" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-grow-shadow" height="50" src="ここに画像URLを入力" width="50" />
<img border="0" class="hvr-float-shadow" height="50" src="ここに画像URLを入力" width="50" />
</pre>
<br />
<span style="background-color: white; font-family: "hiragino kaku gothic pron" , "meiryo" , sans-serif; font-size: 17px; line-height: 28.9px;"><br /></span>
<span style="background-color: white; font-family: "hiragino kaku gothic pron" , "meiryo" , sans-serif; font-size: 17px; line-height: 28.9px;"><br /></span>
<span style="background-color: white; font-family: "hiragino kaku gothic pron" , "meiryo" , sans-serif; font-size: 17px; line-height: 28.9px;">随時更新予定…</span><br />
<span style="background-color: white; font-family: "hiragino kaku gothic pron" , "meiryo" , sans-serif; font-size: 17px; line-height: 28.9px;"><br /></span>k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-53527692352188459452015-11-01T04:36:00.000+09:002016-11-05T17:14:19.091+09:00【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。
<br />
<br />
ここでは以前紹介した見出し編(シンプル)に少し多めにCSSを使って、少し凝ったデザインの見出しをまとめていきます。<br />
<br />
<br />
CSSがわかる方は更にカスタマイズしていただければと思います。<br />
<br />
タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しています。<br />
画像は使用しておりません。<br />
<br />
■利用方法<br />
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください<br />
・見出しのタイトルは書き換えてください<br />
・背景色を変更したい場合は「background」の部分を変更してください<br />
・文字色を変更したい場合は「color」の部分を変更してください<br />
<br />
<br />
<h1 style="font-family: bold; font-size: 24px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
関連記事</h1>
・<a href="http://k0j1-android.blogspot.jp/2015/10/web_10.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/10/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-ボタン編</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_7.html">【HTML】【CSS】コピペで使えるサンプル集-背景編</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_72.html">【HTML】【CSS】コピペで使えるサンプル集-引用部分編</a><br />
<div>
<br /></div>
<div>
<br /></div>
<br />
<center>
────────────────────────────────────────────────────────────────────<br />
----------------------------------------------------------------------------------------------------------------------------------------<br />
<h1 style="font-family: bold; font-size: 30px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
見出しサンプル集</h1>
----------------------------------------------------------------------------------------------------------------------------------------<br />
────────────────────────────────────────────────────────────────────<br />
</center>
<br />
<h1 style="-moz-box-shadow: 1px 1px 3px #292929; -webkit-box-shadow: 1px 1px 3px #292929; background: #e3e3e3; background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8); background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8)); box-shadow: 1px 1px 3px #292929; color: #454545; margin-left: -30px; margin-top: 0; padding: 10px 20px; position: relative; text-shadow: 0 1px 0 white; width: 70%;">
見出し①<span style="border-left: 20px solid transparent; border-top: 10px solid #c8c8c8; height: 0; left: 0; line-height: 0; position: absolute; top: 104%; width: 0;"></span></h1>
<textarea cols="80" rows="12"><h1 style="-moz-box-shadow: 1px 1px 3px #292929; -webkit-box-shadow: 1px 1px 3px #292929; background: #e3e3e3; background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8); background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8)); box-shadow: 1px 1px 3px #292929; color: #454545; margin-left: -20px; margin-top: 0; padding: 10px 20px; position: relative; text-shadow: 0 1px 0 white; width: 70%;">
見出し①<span style="border-left: 20px solid transparent; border-top: 10px solid #c8c8c8; height: 0; left: 0; line-height: 0; position: absolute; top: 104%; width: 0;"></span></h1>
</textarea>
<br />
<br />
<br />
<h1 style="-moz-border-radius: 4px; -webkit-border-radius: 4px; background: #1d8ade; border-left: 1px solid #036; border-top: 1px solid #036; box-shadow: inset 1px 1px 4px #036; color: white; margin: 0 0 30px 0; padding: 12px 10px; position: relative; text-shadow: 1px 1px 2px #333;">
<span style="background: transparent; border-color: #1d8ade transparent transparent transparent; border-style: solid; border-width: 15px; bottom: -27px; content: ' '; height: 0; left: 14px; position: absolute; width: 0; z-index: 2;"></span>
見出し②</h1>
<textarea cols="80" rows="12"><h1 style="-moz-border-radius: 4px; -webkit-border-radius: 4px; background: #1d8ade; border-left: 1px solid #036; border-top: 1px solid #036; box-shadow: inset 1px 1px 4px #036; color: white; margin: 0 0 30px 0; padding: 12px 10px; position: relative; text-shadow: 1px 1px 2px #333;">
<span style="background: transparent; border-color: #1d8ade transparent transparent transparent; border-style: solid; border-width: 15px; bottom: -27px; content: ' '; height: 0; left: 14px; position: absolute; width: 0; z-index: 2;"></span>
見出し②</h1>
</textarea>
<br />
<br />
<br />
<h1 style="color: #111111; font-size: 20px; height: 12px; line-height: 1; margin: 30px 0 0 0; padding: 14px 5px 10px 10px; position: relative;">
<span style="-moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); background: #999; height: 12px; left: -5px; position: absolute; top: 0; transform: rotate(45deg); width: 12px;"></span>
見出し③
<span style="-moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); -webkit-transform: rotate(15deg); background: #777; height: 8px; left: -10px; position: absolute; top: 15px; transform: rotate(15deg); width: 8px;"></span>
</h1>
<br />
<textarea cols="80" rows="12"><h1 style="color: #111111; font-size: 20px; line-height: 1; margin: 30px 0 0 0; padding: 14px 5px 10px 10px; position: relative;">
<span style="-moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); background: #999; height: 12px; left: -5px; position: absolute; top: 0; transform: rotate(45deg); width: 12px;"></span>
見出し③
<span style="-moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); -webkit-transform: rotate(15deg); background: #777; height: 8px; left: -10px; position: absolute; top: 15px; transform: rotate(15deg); width: 8px;"></span>
</h1>
</textarea>
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<h1 style="background: #ccc; border-radius: 22px 0 0 22px; color: #111111; font-size: 20px; line-height: 1; margin: 30px 20px 10px -10px; padding: 14px 5px 10px 50px; position: relative;">
<span style="background: #eee; border-radius: 50%; box-shadow: 1px 1px 1px #777 inset; height: 20px; left: 14px; margin-top: -10px; position: absolute; top: 50%; width: 20px;"></span>
見出し④
<span style="border-right-color: transparent; border: 22px solid #ccc; height: 0; position: absolute; right: -22px; top: 0; width: 0;"></span>
</h1>
<br />
<textarea cols="80" rows="12"><h1 style="background: #ccc; border-radius: 22px 0 0 22px; color: #111111; font-size: 20px; line-height: 1; margin: 30px 20px 10px -10px; padding: 14px 5px 10px 50px; position: relative;">
<span style="background: #eee; border-radius: 50%; box-shadow: 1px 1px 1px #777 inset; height: 20px; left: 14px; margin-top: -10px; position: absolute; top: 50%; width: 20px;"></span>
見出し④
<span style="position: absolute; top: 0; right: -22px; height: 0; width: 0; border: 22px solid #ccc; border-right-color: transparent;"></span>
</h1>
</textarea>
<br />
<br />
<br />
<h3 style="-webkit-background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%); background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%); border-radius: 6px; padding: 1em 4em 1em 1em; position: relative;">
見出し⑤<span style="-webkit-transform-origin: bottom right; -webkit-transform: translateY(-1.89424em) rotate(-40deg); background: -webkit-linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2)); background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2)); border-bottom-left-radius: 6px; box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15); content: ''; height: 3.5493em; position: absolute; right: 0; top: 0; transform-origin: bottom right; transform: translateY(-1.89424em) rotate(-40deg); width: 1.65507em;"></span>
</h3>
<textarea cols="80" rows="12"><h3 style="-webkit-background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%); background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%); border-radius: 6px; padding: 1em 4em 1em 1em; position: relative;">
見出し⑤<span style="-webkit-transform-origin: bottom right; -webkit-transform: translateY(-1.89424em) rotate(-40deg); background: -webkit-linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2)); background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2)); border-bottom-left-radius: 6px; box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15); content: ''; height: 3.5493em; position: absolute; right: 0; top: 0; transform-origin: bottom right; transform: translateY(-1.89424em) rotate(-40deg); width: 1.65507em;"></span></h3>
</textarea>
<br />
<br />
<br />
<h1 style="border-bottom: 2px solid #B92A2C; font-size: 1.5em; font-weight: bold; margin: 0 0 1.5em; padding: 0.5em 0.5em 0.5em 2.0em; position: relative;">
<span style="color: #ff6b6e; font-size: 180%; height: 12px; left: 0.3em; position: absolute; top: -0.6em; width: 12px;">□</span>
見出し⑥
<span style="color: #b92a2c; font-size: 180%; height: 12px; left: 0; position: absolute; top: -0.3em; width: 12px;">□</span>
</h1>
<textarea cols="80" rows="12"><h1 style="border-bottom: 2px solid #B92A2C; font-size: 1.5em; font-weight: bold; margin: 0 0 1.5em; padding: 0.5em 0.5em 0.5em 2.0em; position: relative;">
<span style="color: #ff6b6e; font-size: 180%; height: 12px; left: 0.3em; position: absolute; top: -0.6em; width: 12px;">□</span>
見出し⑥
<span style="color: #b92a2c; font-size: 180%; height: 12px; left: 0; position: absolute; top: -0.3em; width: 12px;">□</span>
</h1>
</textarea>
<br />
<br />
<br />
<h2 style="border-bottom: 2px solid #0099FF; color: #333333; font-size: 23px; padding-left: 45px; position: relative;">
<span style="border: 4px solid #B2E0FF; height: 14px; left: 12px; position: absolute; top: 12px; width: 14px;"></span>
見出し⑦
<span style="border: 4px solid #0099FF; height: 17px; left: 2px; position: absolute; top: 2px; width: 17px;"></span>
</h2>
<br />
<textarea cols="80" rows="12"><h2 style="border-bottom: 2px solid #0099FF; color: #333333; font-size: 23px; padding-left: 45px; position: relative;">
<span style="border: 4px solid #B2E0FF; height: 14px; left: 12px; position: absolute; top: 12px; width: 14px;"></span>
見出し⑦
<span style="border: 4px solid #0099FF; height: 17px; left: 2px; position: absolute; top: 2px; width: 17px;"></span>
</h1>
</textarea>
<br />
<br />
<br />
<div style="background: #a9cc51; box-shadow: inset 0px 25px 10px -10px rgba(136, 136, 136, 0.2); height: 70px; margin-bottom: 0; margin-bottom: 0px; margin-left: 5px; width: 40px;">
</div>
<h1 style="border-radius: 6px; box-shadow: rgba(110, 110, 110, 0.2) 0px 0px 5px 1px #a9cc51 inset; color: #888888; font-size: 16pt; height: 30px; margin-bottom: 0px; margin-top: -70px; padding-bottom: 10px; padding-left: 50px; padding-top: 10px; width: 80%;">
見出し⑧</h1>
<div style="background: #c9bd6b; border-radius: 45px; box-shadow: inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f; height: 15px; margin-bottom: 30px; margin-left: 18px; margin-top: -32px; width: 15px;">
</div>
<div style="background: #fff; border-bottom: 15px solid transparent; border-left: 20px solid #a9cc51; border-right: 20px solid #a9cc51; height: 10px; margin-bottom: 30px; margin-left: 5px; margin-top: 0px; width: 0;">
</div>
<textarea cols="80" rows="12"><div style="background: #a9cc51; box-shadow: inset 0px 25px 10px -10px rgba(136, 136, 136, 0.2); height: 70px; margin-bottom: 0; margin-bottom: 0px; margin-left: 5px; width: 40px;">
</div>
<h1 style="border-radius: 6px; box-shadow: rgba(110, 110, 110, 0.2) 0px 0px 5px 1px #a9cc51 inset; color: #888888; font-size: 16pt; height: 30px; margin-bottom: 0px; margin-top: -70px; padding-left: 50px; padding-top: 10px; padding-bottom: 10px; width: 80%;">
見出し⑧</h1>
<div style="background: #c9bd6b; border-radius: 45px; box-shadow: inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f; height: 15px; margin-bottom: 30px; margin-left: 18px; margin-top: -32px; width: 15px;">
</div>
<div style="background: #fff; border-bottom: 15px solid transparent; border-left: 20px solid #a9cc51; border-right: 20px solid #a9cc51; height: 10px; margin-bottom: 30px; margin-left: 5px; margin-top: 0px; width: 0;">
</div>
</textarea>
<br />
<br />
<br />
<h1 style="background: #ffc; box-shadow: 12px 0 0 0 #ffc, 0 12px 0 0 #ffc, 1px 15px 4px -3px rgba(0,0,0,0.2); color: #000099; font: normal 24px/1.3 serif; margin: 0 22px 0 10px; padding: 14px 15px 0px 20px; position: relative;">
<span style="border-color: transparent; border-style: solid; border-top-color: #cc9; border-width: 12px 12px 0 0; height: 0; left: 100%; position: absolute; top: 100%; width: 0;"></span>
見出し⑨
<span style="-moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); background: rgba(255,182,182,0.4); bottom: 0; height: 20px; left: 10px; padding: 0 20px; position: absolute; transform: rotate(-1deg); width: 120px;"></span>
</h1>
<br />
<textarea cols="80" rows="12"><h1 style="background: #ffc; box-shadow: 12px 0 0 0 #ffc, 0 12px 0 0 #ffc, 1px 15px 4px -3px rgba(0,0,0,0.2); color: #000099; font: normal 24px/1.3 serif; margin: 0 22px 0 10px; padding: 14px 15px 0px 20px; position: relative;">
<span style="border-color: transparent; border-style: solid; border-top-color: #cc9; border-width: 12px 12px 0 0; height: 0; left: 100%; position: absolute; top: 100%; width: 0;"></span>
見出し⑨
<span style="-moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); background: rgba(255,182,182,0.4); bottom: 0; height: 20px; left: 10px; padding: 0 20px; position: absolute; transform: rotate(-1deg); width: 120px;"></span>
</h1>
</textarea>
<br />
<br />
<br />
<div style="border-bottom: 1px solid #48832C; border-left: 5px solid #48832C; padding: 3px 10px;">
<h1 style="font-size: large; margin: 0;">
見出し⑩</h1>
<div style="color: #999999; font-size: 0.8em; margin: 5px 0 0 8px;">
説明文をここに書き込んでください</div>
</div>
<br />
<textarea cols="80" rows="12"><div style="border-bottom: 1px solid #48832C; border-left: 5px solid #48832C; padding: 3px 10px;">
<h1 style="font-size: large; margin: 0;">
見出し⑩</h1>
<div style="color: #999999; font-size: 0.8em; margin: 5px 0 0 8px;">
説明文をここに書き込んでください</div>
</div>
</textarea>
<br />
<br />
<br />
<h1 style="background: #274a78; border-radius: 5px; border: 2px dashed #f8fbf8; box-shadow: 0 0 3px 3px #274a78; color: #f8fbf8; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
❏参考記事、ブログ</h1>
<br />
こちらの記事やブログのサイト様を参考にさせていただきましたm(_ _)m<br />
<br />
<div class="mdMTMWidget01ItemTtl01" style="background-color: white; line-height: 18px; margin: 0px; padding: 0px;">
<div class="mdMTMWidget01ItemTtl01View" style="line-height: 1.3; padding: 0px; word-wrap: break-word;">
<span style="color: black; font-family: inherit; padding: 2px 0px;">・<a class="mdMTMWidget01ItemTtl01Link" href="http://squeeze.jp/blog/web-design/heading-design-css-only/" style="color: black; padding: 2px 0px;" target="_blank">H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -</a></span></div>
</div>
<div class="mdMTMWidget01ItemTtl01" style="background-color: white; line-height: 18px; margin: 0px; padding: 0px;">
<div class="mdMTMWidget01ItemTtl01View" style="line-height: 1.3; padding: 0px; word-wrap: break-word;">
<span style="color: black; font-family: inherit; padding: 2px 0px;">・<a class="mdMTMWidget01ItemTtl01Link" href="http://nelog.jp/wordpress-h1-h6" style="color: black; padding: 2px 0px;" target="_blank">少しの労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ</a></span><br />
・<a class="mdMTMWidget01ItemTtl01Link" href="http://plaza.rakuten.co.jp/shophunter/011003/" style="background-color: transparent; color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;" target="_blank">CSS でかっこいい h タグをつくろう | ショップハンター - 楽天ブログ</a><br />
・<a class="mdMTMWidget01ItemTtl01Link" href="http://thinkit.co.jp/story/2011/11/16/2298" style="color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;" target="_blank">第6回 CSS3で作るWebパーツ | Think IT(シンクイット)</a><br />
・<span style="color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;"><a class="mdMTMWidget01ItemTtl01Link" href="http://www.find-job.net/startup/css3-sample" style="color: black; line-height: 1.3; padding: 2px 0px;" target="_blank">●●っぽい表現ができる「CSS3」サンプル集 | Find Job! Startup</a></span><br />
・<span style="color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;"><a class="mdMTMWidget01ItemTtl01Link" href="http://kinomemo.info/create/1839/" style="color: black; line-height: 1.3; padding: 2px 0px;" target="_blank">【CSS】先頭に四角形が入った見出しのデザインを真似してみました | キノめも</a></span><br />
・<span style="color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;"><a class="mdMTMWidget01ItemTtl01Link" href="http://www.webcreatorbox.com/tech/css-heading-list-blockquote/" style="color: black; line-height: 1.3; padding: 2px 0px;">Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス</a></span><br />
・<span style="color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;"><a class="mdMTMWidget01ItemTtl01Link" href="http://weboook.blog22.fc2.com/blog-entry-348.html" style="color: black; line-height: 1.3; padding: 2px 0px;">CSSの擬似要素を使った見出しデザイン|Webpark</a></span><br />
<span style="font-family: inherit;">・<a class="mdMTMWidget01ItemTtl01Link" href="http://blog.3streamer.net/html5-css3/css3-styling-231/" style="background-color: #f8f8f8; color: black; line-height: 1.3; padding: 2px 0px;" target="_blank">コピペで出来るCSS3で見出しスタイリング | 3streamer blog</a></span></div>
</div>
<div class="mdMTMWidget01ItemUrl01" style="background-color: #f8f8f8; line-height: 18px; margin: 0px; padding: 0px;">
</div>
<br />
<br />
<br />
<br />
<br />
こちらも合わせてご確認ください☆<br />
<br />
<h1 style="font-family: bold; font-size: 24px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
関連記事</h1>
・<a href="http://k0j1-android.blogspot.jp/2015/10/web_10.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/10/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-ボタン編</a>
<br />
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_7.html">【HTML】【CSS】コピペで使えるサンプル集-背景編</a><br />
<div>
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_72.html">【HTML】【CSS】コピペで使えるサンプル集-引用部分編</a></div>
<div>
<br /></div>
<br />k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-25797512520787751382015-10-29T07:19:00.001+09:002016-11-05T17:14:08.747+09:00【HTML】【CSS】コピペで使えるサンプル集-ボタン編ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。
<br />
<br />
第二弾は「ボタン」編として一般的に使用されているようなものをまとめていきます。<br />
コピペだけで使用可能なものだけを紹介しています。<br />
<br />
■利用方法<br />
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください<br />
・ボタンのキャプションはご使用時には書き換えてください<br />
・背景色を変更したい場合は「background」の部分を変更してください<br />
・文字色を変更したい場合は「color」の部分を変更してください<br />
<br />
<h1 style="font-family: bold; font-size: 24px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
関連記事</h1>
・<a href="http://k0j1-android.blogspot.com/2015/10/web_10.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)</a><br />
・<a href="http://k0j1-android.blogspot.jp/2015/11/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_7.html">【HTML】【CSS】コピペで使えるサンプル集-背景編</a><br />
<div>
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_72.html">【HTML】【CSS】コピペで使えるサンプル集-引用部分編</a></div>
<div>
<br /></div>
<br />
<br />
<center>
────────────────────────────────────────────────────────────────────<br />
----------------------------------------------------------------------------------------------------------------------------------------<br />
<h1 style="font-family: bold; font-size: 30px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
ボタン サンプル集</h1>
----------------------------------------------------------------------------------------------------------------------------------------<br />
────────────────────────────────────────────────────────────────────<br />
</center>
<br />
※マウスを載せた時の動作は<a href="http://k0j1-android.blogspot.com/2015/11/web.html">【WEB】マウスホバーエフェクトの導入</a>の方法を利用しています。<br />
<br />
<br />
<button class="button hvr-bounce-in" style="background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 1px solid #DDD; color: white; padding: 10px 0; width: 100px;">
ボタン①</button>
<br />
<textarea cols="80" rows="8"><button style="background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 1px solid #DDD; color: white; padding: 10px 0; width: 100px;">
ボタン①</button>
</textarea>
<br />
<br />
<br />
<button class="button hvr-ripple-in" style="background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));">
ボタン②</button>
<br />
<textarea cols="80" rows="8"><button style="background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));">
ボタン②</button>
</textarea>
<br />
<br />
<br />
<button class="button hvr-float-shadow" style="background: #EEE; border: 3px solid #DDD; color: #111111; padding: 10px 0; width: 100px;">
ボタン③</button><br />
<textarea cols="80" rows="8"><button style="background: #EEE; border: 3px solid #DDD; color: #111111; padding: 10px 0; width: 100px;">
ボタン③</button>
</textarea>
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<button class="hvr-hang" style="background: #EEE; border-bottom: 5px solid #FC0; border-left: 5px solid #09C; border-right: 5px solid #9C0; border-top: 5px solid #C00; color: #111111; padding: 10px 0; width: 100px;">
ボタン④</button><br />
<textarea cols="80" rows="8"><button style="background: #EEE; border-bottom: 5px solid #FC0; border-left: 5px solid #09C; border-right: 5px solid #9C0; border-top: 5px solid #C00; color: #111111; padding: 10px 0; width: 100px;">
ボタン④</button>
</textarea>
<br />
<br />
<br />
<button class="hvr-grow-shadow" style="background: #EEE; border-bottom: 3px dotted #DDD; border-left: 3px solid #DDD; border-right: 3px solid #DDD; border-top: 3px dotted #DDD; color: #111111; padding: 10px 0; width: 100px;">
ボタン⑤</button>
<br />
<textarea cols="80" rows="8"><button style="background: #EEE; border-bottom: 3px dotted #DDD; border-left: 3px solid #DDD; border-right: 3px solid #DDD; border-top: 3px dotted #DDD; color: #111111; padding: 10px 0; width: 100px;">
ボタン⑤</button>
</textarea>
<br />
<br />
<br />
<br />
<br />
<button class="hvr-border-fade" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C); background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C)); border-radius: 4px; border: 1px solid #DDD; color: white; padding: 10px 0; width: 100px;">
ボタン⑥</button>
<br />
<textarea cols="80" rows="8"><button style="-moz-border-radius: 4px; -webkit-border-radius: 4px; background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C); background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C)); border-radius: 4px; border: 1px solid #DDD; color: white; padding: 10px 0; width: 100px;">
ボタン⑥</button>
</textarea>
<br />
<br />
<br />
<button class="hvr-round-corners" style="-moz-border-radius: 70px; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 70px; -webkit-border-radius: 8px 8px 0px 0px; background: #EEE; background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C); background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C)); border-radius: 8px 8px 0px 0px; color: #111111; color: white; padding: 10px 0; width: 100px;">
ボタン⑦</button>
<br />
<textarea cols="80" rows="8"><button style="-moz-border-radius: 70px; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 70px; -webkit-border-radius: 8px 8px 0px 0px; background: #EEE; background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C); background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C)); border-radius: 8px 8px 0px 0px; color: #111111; color: white; padding: 10px 0; width: 100px;">
ボタン⑦</button>
</textarea>
<br />
<br />
<br />
<button class="hvr-buzz-out" style="-moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; background: -moz-linear-gradient(top,#FFF 0%,#FFF 3%,#E6E6E6 3%,#FFF); background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.03,#FFF), color-stop(0.03,#E6E6E6), to(#FFF)); border-bottom: 3px solid #0099CC; border-radius: 8px 8px 0px 0px; border: 1px solid #CCC; color: #111111; padding: 10px 0; width: 100px;">
ボタン⑧</button>
<br />
<textarea cols="80" rows="8"><button style="-moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; background: -moz-linear-gradient(top,#FFF 0%,#FFF 3%,#E6E6E6 3%,#FFF); background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.03,#FFF), color-stop(0.03,#E6E6E6), to(#FFF)); border-bottom: 3px solid #0099CC; border-radius: 8px 8px 0px 0px; border: 1px solid #CCC; color: #111111; padding: 10px 0; width: 100px;">
ボタン⑧</button>
</textarea>
<br />
<br />
<br />
<button class="hvr-buzz-out" style="-moz-border-radius: 20px; -moz-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3); -webkit-border-radius: 20px; -webkit-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3); background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6); background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)); border-radius: 20px; color: #111111; padding: 10px 0; width: 100px;">
ボタン⑨</button>
<br />
<textarea cols="80" rows="8"><button style="-moz-border-radius: 20px; -moz-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3); -webkit-border-radius: 20px; -webkit-box-shadow: inset 1px 1px 1px rgba(000,000,000,0.3); background: -moz-linear-gradient(top,#FFF 0%,#E6E6E6); background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)); border-radius: 20px; color: #111111; padding: 10px 0; width: 100px;">
ボタン⑨</button>
</textarea>
<br />
<br />
<br />
<button class="hvr-buzz-out" style="background-size: auto 2px; background: #337fcc; background: -moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1)); background: -webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1))); border-radius: 5px; border: 1px solid #225588; box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset; color: white; display: block; font-size: 28px; font-weight: bold; padding: 12px 0 8px 0; text-align: center; text-decoration: none; text-shadow: 0 -1px 0px #225588,0 -2px 0px #225588; width: 300px;">
ボタン⑩</button>
<br />
<textarea cols="80" rows="8"><button style="background-size: auto 2px; background: #337fcc; background: -moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1)); background: -webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1))); border-radius: 5px; border: 1px solid #225588; box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset; color: white; display: block; font-size: 28px; font-weight: bold; padding: 12px 0 8px 0; text-align: center; text-decoration: none; text-shadow: 0 -1px 0px #225588,0 -2px 0px #225588; width: 300px;">
ボタン⑩</button>
</textarea>
<br />
<br />
<br />
<button class="hvr-buzz-out" style="-webkit-transform: rotate(720deg); -webkit-transition: all 1s ease; background-color: plum; border-radius: 50%; color: white; display: block; height: 150px; line-height: 150px; text-decoration: none; transform: rotate(720deg); transition: all 1s ease; width: 150px;">
ボタン⑪</button>
<br />
<textarea cols="80" rows="8"><button style="-webkit-transform: rotate(720deg); -webkit-transition: all 1s ease; background-color: plum; border-radius: 50%; color: white; display: block; height: 150px; line-height: 150px; text-decoration: none; transform: rotate(720deg); transition: all 1s ease; width: 150px;">
ボタン⑪</button>
</textarea>
<br />
<br />
<br />
<button class="hvr-buzz-out" style="-webkit-filter: grayscale(0.5) blur(1px); border: 3px solid hsla(138, 95%, 45%, 1); color: hsla(138, 95%, 45%, 1); display: inline-block; font-weight: 900; font: 13px Lato; letter-spacing: 4px; margin: 10px 10px 10px 0px; opacity: 0.6; padding: 10px; text-decoration: none; text-transform: uppercase;">
ボタン⑫</button>
<br />
<textarea cols="80" rows="8"><button style="-webkit-filter: grayscale(0.5) blur(1px); border: 3px solid hsla(138, 95%, 45%, 1); color: hsla(138, 95%, 45%, 1); display: inline-block; font-weight: 900; font: 13px Lato; letter-spacing: 4px; margin: 10px 10px 10px 0px; opacity: 0.6; padding: 10px; text-decoration: none; text-transform: uppercase;">
ボタン⑫</button>
</textarea>
<br />
<br />
<br />
こちらも合わせてご確認ください☆<br />
<br />
<h1 style="font-family: bold; font-size: 24px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
関連記事</h1>
・<a href="http://k0j1-android.blogspot.com/2015/10/web_10.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)</a><br />
・<a href="http://k0j1-android.blogspot.jp/2015/11/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_7.html">【HTML】【CSS】コピペで使えるサンプル集-背景編</a><br />
<div>
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_72.html">【HTML】【CSS】コピペで使えるサンプル集-引用部分編</a></div>
<div>
<br /></div>
<br />
<br />k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-86937595093466561082015-10-10T02:44:00.000+09:002016-11-05T17:13:56.996+09:00【HTML】【CSS】コピペで使えるサンプル集-見出し編(シンプル)ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。
<br />
<br />
ここでは見出し編として一般的にブログ等で使用されているシンプルな見出しをまとめてみましたので、<br />
気に入ったものがあればご利用ください(^o^)/
<br />
<br />
CSSがわかる方は色や大きさも好きにカスタマイズしていただければと思います。<br />
<br />
タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しています。<br />
画像は使用しておりません。<br />
<br />
■利用方法<br />
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください<br />
・見出しのタイトルは書き換えてください<br />
・背景色を変更したい場合は「background」の部分を変更してください<br />
・文字色を変更したい場合は「color」の部分を変更してください<br />
<br />
<br />
<h1 style="font-family: bold; font-size: 24px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
関連記事</h1>
・<a href="http://k0j1-android.blogspot.jp/2015/11/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/10/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-ボタン編</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_7.html">【HTML】【CSS】コピペで使えるサンプル集-背景編</a><br />
<div>
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_72.html">【HTML】【CSS】コピペで使えるサンプル集-引用部分編</a></div>
<div>
<br /></div>
<br />
<br />
<center>
────────────────────────────────────────────────────────────────────<br />
----------------------------------------------------------------------------------------------------------------------------------------<br />
<h1 style="font-family: bold; font-size: 30px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
見出しサンプル集</h1>
----------------------------------------------------------------------------------------------------------------------------------------<br />
────────────────────────────────────────────────────────────────────<br />
</center>
<br />
<h1 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
見出し①</h1>
<textarea cols="80" rows="8"><h1 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
見出し①</h1>
</textarea>
<br />
<br />
<h1 style="background: #eee; border-bottom: 1px dashed #aaa; border-top: 1px dashed #aaa; box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset; color: #665555; font: bold 24px/1.6 Arial, Helvetica, sans-serif; padding: 5px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1);">
見出し②</h1>
<br />
<textarea cols="80" rows="8"><h1 style="background: #eee; border-bottom: 1px dashed #aaa; border-top: 1px dashed #aaa; box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset; color: #665555; font: bold 24px/1.6 Arial, Helvetica, sans-serif; padding: 5px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1);">
見出し②</h1>
</textarea>
<br />
<br />
<h1 style="-moz-transform: rotate(-3deg) skew(-3deg); -ms-transform: rotate(-3deg) skew(-3deg); -o-transform: rotate(-3deg) skew(-3deg); -webkit-transform: rotate(-3deg) skew(-3deg); background: #f0e800; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800; color: #333333; font: bold 30px/1.6 Arial, Helvetica, sans-serif; margin: 0 -1px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1); transform: rotate(-3deg) skew(-3deg);">
見出し③</h1>
<br />
<textarea cols="80" rows="8"><h1 style="-moz-transform: rotate(-3deg) skew(-3deg); -ms-transform: rotate(-3deg) skew(-3deg); -o-transform: rotate(-3deg) skew(-3deg); -webkit-transform: rotate(-3deg) skew(-3deg); background: #f0e800; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800; color: #333333; font: bold 30px/1.6 Arial, Helvetica, sans-serif; margin: 0 -1px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1); transform: rotate(-3deg) skew(-3deg);">
見出し③</h1>
</textarea>
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<h1 style="border-bottom: 1px dashed #B92A2C; border-left: 7px solid #B92A2C; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;">
見出し④</h1>
<textarea cols="80" rows="8"><h1 style="border-bottom: 1px dashed #B92A2C; border-left: 7px solid #B92A2C; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;">
見出し④</h1>
</textarea>
<br />
<br />
<h1 style="border-bottom: 3px double #B92A2C; border-top: 3px double #B92A2C; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;">
見出し⑤</h1>
<textarea cols="80" rows="8"><h1 style="border-bottom: 3px double #B92A2C; border-top: 3px double #B92A2C; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;">
見出し⑤</h1>
</textarea>
<br />
<br />
<h1 style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #B92A2C; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;">
見出し⑥</h1>
<textarea cols="80" rows="8"><h1 style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #B92A2C; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;">
見出し⑥</h1>
</textarea>
<br />
<br />
<h1 style="-moz-border-radius: 5px; -webkit-border-radius: 5px; background: #B92A2C; border-radius: 5px; color: white; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em; position: relative;">
見出し⑦</h1>
<textarea cols="80" rows="8"><h1 style="-moz-border-radius: 5px; -webkit-border-radius: 5px; background: #B92A2C; border-radius: 5px; color: white; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em; position: relative;">
見出し⑦</h1>
</textarea>
<br />
<br />
<h1 style="-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); border: 2px solid #B92A2C; box-shadow: 3px 3px 3px rgba(0,0,0,0.4); font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;">
見出し⑧</h1>
<textarea cols="80" rows="8"><h1 style="-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); border: 2px solid #B92A2C; box-shadow: 3px 3px 3px rgba(0,0,0,0.4); font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;">
見出し⑧</h1>
</textarea>
<br />
<br />
<h1 style="-moz-box-shadow: 0 1px 0 #aaaaaa; -webkit-box-shadow: 0 1px 0 #aaaaaa; border-bottom: 2px solid #B92A2C; box-shadow: 0 1px 0 #aaaaaa; color: #111111; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; text-shadow: #999999 0px 1px 1px;">
<span style="font-size: 3.0em;">見</span>出し⑨</h1>
<textarea cols="80" rows="8"><h1 style="-moz-box-shadow: 0 1px 0 #aaaaaa; -webkit-box-shadow: 0 1px 0 #aaaaaa; border-bottom: 2px solid #B92A2C; box-shadow: 0 1px 0 #aaaaaa; color: #111111; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; text-shadow: #999999 0px 1px 1px;">
<font style="font-size:3.0em;">見</font>出し⑨</h1>
</textarea>
<br />
<br />
<br />
<br />
<br />
<h1 style="background: #ccd6ff; border-left: 15px solid #8491c3; padding: 7px;">
見出し⑩</h1>
<h1 style="background: #bbd7ea; border-left: 15px solid #89c3eb; padding: 7px;">
見出し⑩</h1>
<h1 style="background: #efd7d9; border-left: 15px solid #f09199; padding: 7px;">
見出し⑩</h1>
<h1 style="background: #e3e5d0; border-left: 15px solid #c3d825; padding: 7px;">
見出し⑩</h1>
<h1 style="background: #e0ffcc; border-left: 15px solid #769164; padding: 7px;">
見出し⑩</h1>
<textarea cols="80" rows="8"><h1 style="border-left: 15px solid #8491c3;padding: 7px;background: #ccd6ff;">
見出し⑩</h1>
<h1 style="border-left: 15px solid #89c3eb;padding: 7px;background: #bbd7ea;">
見出し⑩</h1>
<h1 style="border-left: 15px solid #f09199;padding: 7px;background: #efd7d9;">
見出し⑩</h1>
<h1 style="border-left: 15px solid #c3d825;padding: 7px;background: #e3e5d0;">
見出し⑩</h1>
<h1 style="border-left: 15px solid #769164;padding: 7px;background: #e0ffcc;">
見出し⑩</h1>
</textarea>
<br />
<br />
<h1 style="border-bottom: 1px solid #426579; border-left: 10px solid #426579; padding: 7px;">
見出し⑪</h1>
<h1 style="border-bottom: 1px solid #006e54; border-left: 10px solid #006e54; padding: 7px;">
見出し⑪</h1>
<h1 style="border-bottom: 1px solid #715c1f; border-left: 10px solid #715c1f; padding: 7px;">
見出し⑪</h1>
<h1 style="border-bottom: 1px solid #c85179; border-left: 10px solid #c85179; padding: 7px;">
見出し⑪</h1>
<h1 style="border-bottom: 1px solid #9790a4; border-left: 10px solid #9790a4; padding: 7px;">
見出し⑪</h1>
<textarea cols="80" rows="8"><h1 style="border-bottom: 1px solid #426579;border-left: 10px solid #426579;padding: 7px;">
見出し⑪</h1>
<h1 style="border-bottom: 1px solid #006e54;border-left: 10px solid #006e54;padding: 7px;">
見出し⑪</h1>
<h1 style="border-bottom: 1px solid #715c1f;border-left: 10px solid #715c1f;padding: 7px;">
見出し⑪</h1>
<h1 style="border-bottom: 1px solid #c85179;border-left: 10px solid #c85179;padding: 7px;">
見出し⑪</h1>
<h1 style="border-bottom: 1px solid #9790a4;border-left: 10px solid #9790a4;padding: 7px;">
見出し⑪</h1>
</textarea>
<br />
<br />
<h1 style="background: -moz-linear-gradient(top left, #ffffff, #ffcc00 60%, #ff9900 80%, #ff6600); background: -webkit-gradient(linear, left top, right bottom, from(#ffffff), color-stop(60%, #ffcc00), color-stop(80%, #ff9900), to(#ff6600)); border: 1px #cc6600 solid; color: #993300; text-shadow: 1px 1px #ffffff;">
見出し⑫</h1>
<textarea cols="80" rows="8"><h1 style="background: -moz-linear-gradient(top left, #ffffff, #ffcc00 60%, #ff9900 80%, #ff6600);background: -webkit-gradient(linear, left top, right bottom, from(#ffffff), color-stop(60%, #ffcc00), color-stop(80%, #ff9900), to(#ff6600));color: #993300;text-shadow: 1px 1px #ffffff;border: 1px #cc6600 solid;">
見出し⑫</h1>
</textarea>
<br />
<br />
<h1 style="font-family: bold; font-size: 30px; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);">
見出し⑬</h1>
<textarea cols="80" rows="8"><h1 style="font-size:30px;font-family:bold;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
見出し⑬</h1>
</textarea>
<br />
<br />
<h1 style="background: #cccccc; color: white; font-family: "sans serif"; font-size: 30px; font-weight: bold; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;">
見出し⑭</h1>
<textarea cols="80" rows="8"><h1 style="background:#cccccc; color: #fff;font-size:30px;font-weight:bold;font-family:"sans serif";text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;">
見出し⑭</h1>
</textarea>
<br />
<br />
<br />
<h1 style="background: #21e1b4; color: white; font-size: 30px; margin: 0; overflow: hidden; padding: 10px; text-shadow: 0px 0px #18b28e, 1px 1px #18b28e, 2px 2px #18b28e, 3px 3px #18b28e, 4px 4px #18b28e, 5px 5px #18b28e, 6px 6px #18b28e, 7px 7px #18b28e, 8px 8px #18b28e, 9px 9px #18b28e;">
見出し⑭</h1>
<textarea cols="80" rows="8"><h1 style="background: #21e1b4; color: white; font-size: 30px; margin: 0; overflow: hidden; padding: 10px; text-shadow: 0px 0px #18b28e, 1px 1px #18b28e, 2px 2px #18b28e, 3px 3px #18b28e, 4px 4px #18b28e, 5px 5px #18b28e, 6px 6px #18b28e, 7px 7px #18b28e, 8px 8px #18b28e, 9px 9px #18b28e;">
見出し⑭</h1>
</textarea>
<br />
<br />
<h1 style="-moz-border-radius: 4px; -webkit-border-radius: 4px; background: #1D8ADE; border-radius: 4px; box-shadow: inset -1px -1px 2px rgba(0,0,0, 0.6),inset 1px 1px 2px rgba(255,255,255,0.8); color: white; margin: 0 0 30px 0; padding: 12px 10px; text-shadow: 1px 1px 2px #333;">
見出し⑮</h1>
<textarea cols="80" rows="8"><h1 style="-moz-border-radius: 4px; -webkit-border-radius: 4px; background: #1D8ADE; border-radius: 4px; box-shadow: inset -1px -1px 2px rgba(0,0,0, 0.6),inset 1px 1px 2px rgba(255,255,255,0.8); color: white; margin: 0 0 30px 0; padding: 12px 10px; text-shadow: 1px 1px 2px #333;">
見出し⑮</h1>
</textarea>
<br />
<br />
<h1 style="-moz-border-radius: 4px; -webkit-border-radius: 4px; -webkit-box-shadow: inset 0 0 50px rgba(0,0,0, 0.1); background: #7db9e8; background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 50%, #207cca 51%, #1e5799 100%); background: -ms-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); background: -o-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#1e5799)); background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); background: linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); border-radius: 4px; color: white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); margin: 0 0 30px 0; padding: 12px 10px; text-shadow: 1px 1px 2px #333;">
見出し⑯</h1>
<textarea cols="80" rows="8"><h1 style="-moz-border-radius: 4px; -webkit-border-radius: 4px; -webkit-box-shadow: inset 0 0 50px rgba(0,0,0, 0.1); background: #7db9e8; background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 50%, #207cca 51%, #1e5799 100%); background: -ms-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); background: -o-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#1e5799)); background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); background: linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); border-radius: 4px; color: white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); margin: 0 0 30px 0; padding: 12px 10px; text-shadow: 1px 1px 2px #333;">
見出し⑯</h1>
</textarea>
<br />
<br />
<h1 style="-moz-border-radius: 7px; -webkit-border-radius: 7px; background: #fff; background: -moz-linear-gradient(top, #eee, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); border-bottom: 1px solid #888; border-left: 30px double #AAA; border-radius: 7px; border-right: 10px solid #AAA; border-top: 1px solid #888; color: red; font-size: 140%; padding: 5px 5px 5px 15px;">
見出し⑰</h1>
<textarea cols="80" rows="8"><h1 style="-moz-border-radius: 7px; -webkit-border-radius: 7px; background: #fff; background: -moz-linear-gradient(top, #eee, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); border-bottom: 1px solid #888; border-left: 30px double #AAA; border-radius: 7px; border-right: 10px solid #AAA; border-top: 1px solid #888; color: red; font-size: 140%; padding: 5px 5px 5px 15px;">
見出し⑰</h1>
</textarea>
<br />
<br />
<br />
<h1 style="-webkit-background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px); background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px); color: white; padding: .5em .75em; text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);">
見出し⑱</h1>
<textarea cols="80" rows="8"><h1 style="-webkit-background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px); background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px); color: white; padding: .5em .75em; text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);">
見出し⑱</h1>
</textarea>
<br />
<br />
<br />
<h1 style="background: #f4b3c2; border-radius: 5px; border: 2px dashed #e8ecef; box-shadow: 0 0 3px 3px #f4b3c2; color: #a25768; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑲</h1>
<br />
<h1 style="background: #f7b977; border-radius: 5px; border: 2px dashed #ebe1a9; box-shadow: 0 0 3px 3px #f7b977; color: #ee836f; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑲</h1>
<br />
<h1 style="background: #cbb994; border-radius: 5px; border: 2px dashed #856859; box-shadow: 0 0 3px 3px #cbb994; color: #6f4b3e; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑲</h1>
<br />
<h1 style="background: #c1e4e9; border-radius: 5px; border: 2px dashed #698aab; box-shadow: 0 0 3px 3px #c1e4e9; color: #007bbb; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑲</h1>
<br />
<h1 style="background: #274a78; border-radius: 5px; border: 2px dashed #f8fbf8; box-shadow: 0 0 3px 3px #274a78; color: #f8fbf8; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑲</h1>
<br />
<textarea cols="80" rows="8"><h1 style="background: #f4b3c2; border-radius: 5px; border: 2px dashed #e8ecef; box-shadow: 0 0 3px 3px #f4b3c2; color: #a25768; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑲</h1>
<h1 style="background: #f7b977; border-radius: 5px; border: 2px dashed #ebe1a9; box-shadow: 0 0 3px 3px #f7b977; color: #ee836f; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑲</h1>
<h1 style="background: #cbb994; border-radius: 5px; border: 2px dashed #856859; box-shadow: 0 0 3px 3px #cbb994; color: #6f4b3e; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑲</h1>
<h1 style="background: #c1e4e9; border-radius: 5px; border: 2px dashed #698aab; box-shadow: 0 0 3px 3px #c1e4e9; color: #007bbb; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑲</h1>
<h1 style="background: #274a78; border-radius: 5px; border: 2px dashed #f8fbf8; box-shadow: 0 0 3px 3px #274a78; color: #f8fbf8; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑲</h1>
</textarea>
<br />
<br />
<br />
<h1 style="background: #fdeff2; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #c97586; color: #c97586; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑳</h1>
<br />
<h1 style="background: #dcd3b2; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #94846a; color: #94846a; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑳</h1>
<br />
<h1 style="background: #bce2e8; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #5383c3; color: #5383c3; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑳</h1>
<br />
<h1 style="background: #c7dc68; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #69821b; color: #69821b; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑳</h1>
<br />
<h3 style="background: #bbc8e6; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #7058a3; color: #7058a3; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑳</h3>
<br />
<textarea cols="80" rows="8"><h1 style="background: #fdeff2; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #c97586; color: #c97586; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑳</h1>
<h1 style="background: #dcd3b2; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #94846a; color: #94846a; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑳</h1>
<h1 style="background: #bce2e8; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #5383c3; color: #5383c3; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑳</h1>
<h1 style="background: #c7dc68; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #69821b; color: #69821b; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑳</h1>
<h3 style="background: #bbc8e6; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #7058a3; color: #7058a3; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し⑳</h3>
</textarea>
<br />
<br />
<br />
<h1 style="background: #000; border-bottom: 13px dashed #fff; border-top: 13px dashed #fff; box-shadow: 0 0 3px 8px #000,25px 20px 4px 2px rgba(0,0,0,0.2); color: white; font-size: 18pt; margin-left: 10px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し㉑</h1>
<br />
<textarea cols="80" rows="8"><h1 style="background: #000; border-bottom: 13px dashed #fff; border-top: 13px dashed #fff; box-shadow: 0 0 3px 8px #000,25px 20px 4px 2px rgba(0,0,0,0.2); color: white; font-size: 18pt; margin-left: 10px; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
見出し㉑</h1>
</textarea>
<br />
<br />
<br />
<h1 style="-moz-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2); background: #fff; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2); color: #1f3134; font-size: 18pt; padding: 15px; width: 70%;">
見出し㉒</h1>
<br />
<textarea cols="80" rows="8"><h1 style="-moz-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2); background: #fff; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2); color: #1f3134; font-size: 18pt; padding: 15px; width: 70%;">
見出し㉒</h1>
</textarea>
<br />
<br />
<br />
<h1 style="background: #274a78; border-radius: 5px; border: 2px dashed #f8fbf8; box-shadow: 0 0 3px 3px #274a78; color: #f8fbf8; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;">
❏参考記事、ブログ</h1>
<br />
こちらの記事やブログのサイト様を参考にさせていただきましたm(_ _)m<br />
<br />
<div class="mdMTMWidget01ItemTtl01" style="background-color: white; line-height: 18px; margin: 0px; padding: 0px;">
<div class="mdMTMWidget01ItemTtl01View" style="line-height: 1.3; padding: 0px; word-wrap: break-word;">
<span style="color: black; font-family: inherit; padding: 2px 0px;">・<a class="mdMTMWidget01ItemTtl01Link" href="http://squeeze.jp/blog/web-design/heading-design-css-only/" style="color: black; padding: 2px 0px;" target="_blank">H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -</a></span></div>
</div>
<div class="mdMTMWidget01ItemTtl01" style="background-color: white; line-height: 18px; margin: 0px; padding: 0px;">
<div class="mdMTMWidget01ItemTtl01View" style="line-height: 1.3; padding: 0px; word-wrap: break-word;">
<span style="color: black; font-family: inherit; padding: 2px 0px;">・<a class="mdMTMWidget01ItemTtl01Link" href="http://nelog.jp/wordpress-h1-h6" style="color: black; padding: 2px 0px;" target="_blank">少しの労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ</a></span><br />
・<a class="mdMTMWidget01ItemTtl01Link" href="http://plaza.rakuten.co.jp/shophunter/011003/" style="background-color: transparent; color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;" target="_blank">CSS でかっこいい h タグをつくろう | ショップハンター - 楽天ブログ</a><br />
・<a class="mdMTMWidget01ItemTtl01Link" href="http://thinkit.co.jp/story/2011/11/16/2298" style="color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;" target="_blank">第6回 CSS3で作るWebパーツ | Think IT(シンクイット)</a><br />
・<span style="color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;"><a class="mdMTMWidget01ItemTtl01Link" href="http://www.find-job.net/startup/css3-sample" style="color: black; line-height: 1.3; padding: 2px 0px;" target="_blank">●●っぽい表現ができる「CSS3」サンプル集 | Find Job! Startup</a></span><br />
・<span style="color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;"><a class="mdMTMWidget01ItemTtl01Link" href="http://kinomemo.info/create/1839/" style="color: black; line-height: 1.3; padding: 2px 0px;" target="_blank">【CSS】先頭に四角形が入った見出しのデザインを真似してみました | キノめも</a></span><br />
・<span style="color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;"><a class="mdMTMWidget01ItemTtl01Link" href="http://www.webcreatorbox.com/tech/css-heading-list-blockquote/" style="color: black; line-height: 1.3; padding: 2px 0px;">Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス</a></span><br />
・<span style="color: black; font-family: inherit; line-height: 1.3; padding: 2px 0px;"><a class="mdMTMWidget01ItemTtl01Link" href="http://weboook.blog22.fc2.com/blog-entry-348.html" style="color: black; line-height: 1.3; padding: 2px 0px;">CSSの擬似要素を使った見出しデザイン|Webpark</a></span><br />
<span style="font-family: inherit;">・<a class="mdMTMWidget01ItemTtl01Link" href="http://blog.3streamer.net/html5-css3/css3-styling-231/" style="background-color: #f8f8f8; color: black; line-height: 1.3; padding: 2px 0px;" target="_blank">コピペで出来るCSS3で見出しスタイリング | 3streamer blog</a></span></div>
</div>
<div class="mdMTMWidget01ItemUrl01" style="background-color: #f8f8f8; line-height: 18px; margin: 0px; padding: 0px;">
</div>
<br />
<br />
<br />
<br />
<br />
こちらも合わせてご確認ください☆<br />
<br />
<h1 style="font-family: bold; font-size: 24px; text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);">
関連記事</h1>
・<a href="http://k0j1-android.blogspot.jp/2015/11/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-見出し編(応用)</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/10/htmlcss.html">【HTML】【CSS】コピペで使えるサンプル集-ボタン編</a><br />
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_7.html">【HTML】【CSS】コピペで使えるサンプル集-背景編</a><br />
<div>
・<a href="http://k0j1-android.blogspot.com/2015/11/htmlcss_72.html">【HTML】【CSS】コピペで使えるサンプル集-引用部分編</a></div>
<div>
<br /></div>
<br />
<br />k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-27964871264865092782015-09-04T00:07:00.000+09:002015-09-04T00:11:45.595+09:00【写真販売】PIXTAでの写真販売今日はPIXTAで販売している写真について紹介していきます。<br />
<br />
家にデジカメで撮った良い風景の写真やお気に入りの写真とかがあれば<br />
ぜひ販売してもらいたいと思いますので、<br />
今回はPIXTAのサイトについて説明していきたいと思います。<br />
<br />
<h1 style="background-color: #fefdfa; border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 2.25em; line-height: 1.2; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em; position: relative;">
❏PIXTAについて</h1>
<div>
まずPIXTAのサイトについて概要を説明させていただくと、</div>
<div>
<br /></div>
<span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: white; font-weight: bold; line-height: 34.2000007629395px; text-align: center;">・PIXTA(ピクスタ)はプロアマ問わず、誰でも写真・イラスト・動画の販売が可能</span><br style="background-color: white; font-weight: bold; line-height: 34.2000007629395px; text-align: center;" /><span style="background-color: white; font-weight: bold; line-height: 34.2000007629395px; text-align: center;">・作品が購入されれば広告やWEBサイトなどの世界中の</span><span style="background-color: white; font-weight: bold; line-height: 34.2000007629395px; text-align: center;">メディアで使用されます</span></span><br />
<br />
☆写真は携帯カメラで撮ったものではなく、ある程度画質の良いデジカメで撮ったものなら<br />
販売可能なようです。<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'MS PGothic'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
</div>
<br />
<h1 style="background-color: #fefdfa; border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 2.25em; line-height: 1.2; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em; position: relative;">
❏販売方法と料金</h1>
<br />
作品を販売するためにも、まずはPIXTAでの作品の販売方法を知っておきたいと思います。<br />
作品は<b>単品購入</b>と<b>定額購入</b>があります。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-C1iaDe156cU/VehXVTOHnNI/AAAAAAAAoR8/290pmmwBxWE/s1600/%25E8%25B2%25A9%25E4%25BF%2583.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="98" src="http://1.bp.blogspot.com/-C1iaDe156cU/VehXVTOHnNI/AAAAAAAAoR8/290pmmwBxWE/s640/%25E8%25B2%25A9%25E4%25BF%2583.PNG" width="640" /></a></div>
<span id="goog_1699479016"></span><span id="goog_1699479017"></span><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #333333; font-family: 'Lucida grande', 'Lucida Sans Unicode', verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 17.3999996185303px; margin: 0px; orphans: auto; outline: 0px; padding: 0px; position: relative; text-align: left; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: 1; word-spacing: 0px;">
</div>
<div class="search-list-footer" style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; clear: both; color: #333333; font-family: 'Lucida grande', 'Lucida Sans Unicode', verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 17.3999996185303px; margin: 0px 0px 10px; orphans: auto; outline: 0px; padding: 0px; text-align: left; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: 1; word-spacing: 0px;">
</div>
単品購入は1点ずつの購入となり、画質に応じて料金が変わります。<br />
画質を落とせば少額の料金で購入できますが、このサイトを利用するような方は<br />
ある程度良い画質のものを購入しそうな気がしてます。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-dga6oqzcKLQ/VehXqNJzc5I/AAAAAAAAoSE/pMau4NilJFY/s1600/%25E5%258D%2598%25E5%2593%2581%25E8%25B3%25BC%25E5%2585%25A5.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="362" src="http://3.bp.blogspot.com/-dga6oqzcKLQ/VehXqNJzc5I/AAAAAAAAoSE/pMau4NilJFY/s640/%25E5%258D%2598%25E5%2593%2581%25E8%25B3%25BC%25E5%2585%25A5.PNG" width="640" /></a></div>
<br />
<br />
<br />
定額購入は25DL/日や250DL/月でダウンロードが可能な定額制の購入となり、<br />
大量に画像が必要な場合には便利になる制度かと思いますが少しお高めです(^^;<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-3mJXrLWeUdc/VehYPN_22YI/AAAAAAAAoSM/D6bQ4iq0G3I/s1600/%25E5%25AE%259A%25E9%25A1%258D%25E5%2588%25B6%25E2%2591%25A0.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="96" src="http://1.bp.blogspot.com/-3mJXrLWeUdc/VehYPN_22YI/AAAAAAAAoSM/D6bQ4iq0G3I/s640/%25E5%25AE%259A%25E9%25A1%258D%25E5%2588%25B6%25E2%2591%25A0.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-EplTtPAJ3uc/VehYPFI2knI/AAAAAAAAoSQ/DWNviJ29WxI/s1600/%25E5%25AE%259A%25E9%25A1%258D%25E5%2588%25B6%25E2%2591%25A1.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="240" src="http://2.bp.blogspot.com/-EplTtPAJ3uc/VehYPFI2knI/AAAAAAAAoSQ/DWNviJ29WxI/s640/%25E5%25AE%259A%25E9%25A1%258D%25E5%2588%25B6%25E2%2591%25A1.PNG" width="640" /></a></div>
<br />
<br />
定額購入は25DL/日や250DL/月でダウンロードが可能な定額制の購入となり、大量に画像が必要な場合には便利になる制度かと思いますが少しお高めです(^^;<br />
<br />
<br />
<h1 style="background-color: #fefdfa; border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 2.25em; line-height: 1.2; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em; position: relative;">
❏写真を販売するためには</h1>
<div>
これはPIXTA側で写真販売ガイドがありますので、こちらをご参照ください。</div>
<div>
<br /></div>
<div>
■<span style="font-family: 'Lucida grande', 'Lucida Sans Unicode', verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', メイリオ, sans-serif;">写真・イラスト・動画販売ガイド</span></div>
<div>
<span style="font-family: Lucida grande, Lucida Sans Unicode, verdana, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, MS Pゴシック, メイリオ, sans-serif;"><a href="https://pixta.jp/how_to_sell">https://pixta.jp/how_to_sell</a></span></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
簡単に概要だけ説明しますと、</div>
<div>
<br /></div>
<div>
①会員登録</div>
<div>
②入門テスト</div>
<div>
③写真をアップして審査</div>
<div>
④審査が通れば販売スタート</div>
<div>
⑤購入されればクレジット獲得</div>
<div>
<br /></div>
<div>
ここでは③が少し手間取ることになるかと思います。</div>
<div>
なぜならすでに販売された写真と似た写真は審査を通りにくいため、</div>
<div>
良い写真でも先に似た写真があればなかなか販売まで辿りつけないことになります。</div>
<div>
また、画質もある程度良くサイズを調整した上でアップする必要があります。</div>
<div>
ここは根気よくやる必要がありますね(゚Д゚)</div>
<div>
<br />
④で運良く審査がとおり、⑤で販売され購入されるとクレジットが獲得できます。<br />
10クレジット以上貯まると[1クレジット=108円]換算で現金に交換できます。<br />
<br />
<br />
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'MS PGothic'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
</div>
<br />
<h1 style="background-color: #fefdfa; border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 2.25em; line-height: 1.2; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em; position: relative;">
❏作品紹介</h1>
<div>
最後に私が販売している写真を一応紹介しておきます。</div>
<div>
2015/9/3時点で販売されている作品は以下になります。</div>
<div>
<br /></div>
<div>
■写真5枚<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://pixta.jp/photo/16987505" rel="nofollow" target="_blank"><img border="0" height="332" src="http://3.bp.blogspot.com/-NQe2smn4Uk4/Vehfu2WN5DI/AAAAAAAAoSs/9mEdhGfodCA/s640/1.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://pixta.jp/photo/16987502" rel="nofollow" target="_blank"><img border="0" height="330" src="http://1.bp.blogspot.com/-ZrWgBZvTaOM/Vehfu-COXtI/AAAAAAAAoSo/J_x0cHU1S2w/s640/2.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://pixta.jp/photo/16987506" rel="nofollow" target="_blank"><img border="0" height="326" src="http://3.bp.blogspot.com/-iGX8P1_bwUE/Vehfuwfm9AI/AAAAAAAAoSk/FMmwcpC_QBw/s640/3.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://pixta.jp/photo/16987503" rel="nofollow" target="_blank"><img border="0" height="338" src="http://4.bp.blogspot.com/-2g5VTaZ_juA/VehfvSh6oCI/AAAAAAAAoS0/rjpit3sZxdk/s640/4.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://pixta.jp/photo/16987501" rel="nofollow" target="_blank"><img border="0" height="334" src="http://3.bp.blogspot.com/-tR7gU1wEndY/VehfvpZJ5aI/AAAAAAAAoS8/WfqHBz32qgc/s640/5.PNG" width="640" /></a></div>
<br />
<br /></div>
</div>
■イラスト1枚
<br />
<a href="https://pixta.jp/illustration/1949761" rel="nofollow" target="_blank"><img alt="ばつx9" data-bind="attr: { src: item["url"], alt: item["title"], width: item["imageWidth"] }" src="https://t.pimg.jp/001/949/761/1/1949761.jpg" style="background-color: transparent; border: 0px; color: #333333; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" width="157" /></a>
<br />
■動画1つ
<br />
<a data-bind="click: $root.detailsList.openDetail, event: { contextmenu: $root.rightClickLog }, attr: { href: "/" + item["itemType"] + "/" + item["id"] }" href="https://pixta.jp/footage/5137933" style="background-color: white; color: #006bc4; font-family: 'Lucida grande', 'Lucida Sans Unicode', verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif; font-size: 12px; line-height: 17.3999996185303px; text-decoration: none; vertical-align: baseline;"></a><br />
<div class="item-list--small__wrap-inner" style="background-color: transparent; border: 0px; color: #333333; font-size: 12px; height: 140px; margin: 0px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline; width: 140px;">
<div class="item-list--small__image" data-bind="style: { height: item['height'] + 'px', width: item['width'] + 'px', marginTop: (($root.gallery().gallerySmall.squareSize - item['height']) / 2) + 'px', marginLeft: (($root.gallery().gallerySmall.squareSize - item['width']) / 2) + 'px' }" style="background-color: transparent; border: 0px; color: #333333; font-size: 12px; height: 67px; margin: 36.5px 0px 0px 10px; outline: 0px; overflow: hidden; padding: 0px; vertical-align: baseline; width: 120px;">
<a href="https://pixta.jp/footage/5137933" rel="nofollow" target="_blank"><img alt="ハート背景②" data-bind="attr: { src: item["url"], alt: item["title"], width: item["imageWidth"], height: item["imageHeight"] }" height="67" src="https://t.pimg.jp/icon/005/137/933/5137933.jpg" style="background-color: transparent; border: 0px; color: #333333; font-size: 12px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" width="120" /></a></div>
</div>
<br />
<br />
まだあまり販売・購入されていませんが、
<br />
良い作品ができあがったら販売していきたいなと思ってます。<br />
<br />
自分の作品がどこかで使われると考えてみるのも楽しみ方の一つかと思いますので、<br />
もし自分も販売してみたいと思った方はPIXTAを利用してみてはいかがでしょうか(^^)<br />
<br />k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-76519436945055600102015-08-31T01:50:00.000+09:002015-08-31T01:54:05.405+09:00【アプリ開発】アプリのショートカットを作成しばらくぶりの更新となってしまいましたが、<br />
アプリのショートカットの作成方法について書いていきたいと思います。<br />
更新が不定期ですいませんm(_ _)m<br />
<br />
<br />
データフォルダアプリでもアプリのショートカットを作成する方法を用いて対応していますので、<br />
今回その点について関数にまとめたりしたのでサンプルコードとして紹介しておきたいと思います。<br />
<br />
<h1 style="background-color: #fefdfa; border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 2.25em; line-height: 1.2; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em; position: relative;">
❏パーミッション</h1>
<div>
<br /></div>
必要なパーミッションは、アプリからショートカットを作成するためのパーミッションを追加します。<br />
<pre class="brush: java; first-line: 1; highlight: [,];" title="AndroidManifest.xml"> <uses-permission android:name="com.android.launcher.permission.INSTALL_SHORTCUT"></uses-permission>
</pre>
<br>
もしアプリからショートカットを削除する場合には、次のパーミッションも追加しておきます。<br />
<pre class="brush: java; first-line: 1; highlight: [,];" title="AndroidManifest.xml"> <uses-permission android:name="com.android.launcher.permission.UNINSTALL_SHORTCUT"></uses-permission>
</pre>
<br />
<br />
<h1 style="background-color: #fefdfa; border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 2.25em; line-height: 1.2; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em; position: relative;">
❏サンプルコード</h1>
このコードは、ギャラリーからintentで画像を取得して、取得した画像でショートカット作成を行うサンプルコードになります。<br />
<pre class="brush: java; first-line: 1; highlight: [,];" title="MainActivity.java"> @Override
protected void onActivityResult(int requestCode, int resultCode, Intent data)
{
if(requestCode == REQUEST_GALLERY && resultCode == RESULT_OK)
{
try {
InputStream in = getContentResolver().openInputStream(data.getData());
Bitmap img = BitmapFactory.decodeStream(in);
in.close();
// 選択した画像をアイコン(ショートカット)として追加
shortcutAdd(getString(R.string.app_name), img);
} catch (Exception e) {
e.printStackTrace();
}
}
}
/*********************************************************************
* アイコン(ショートカット)の作成
*********************************************************************/
private void shortcutAdd(String name, Bitmap bmp)
{
// Delete Shortcut
shortcutDel(name);
// Intent to be send, when shortcut is pressed by user ("launched")
Intent shortcutIntent = new Intent(Intent.ACTION_MAIN);
shortcutIntent.setClassName(this, MainActivity.class.getName());
Bitmap scaledBitmap = Bitmap.createScaledBitmap(bmp, 128, 128, true);
// Decorate the shortcut
Intent addIntent = new Intent();
addIntent.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
addIntent.putExtra(Intent.EXTRA_SHORTCUT_NAME, name);
addIntent.putExtra(Intent.EXTRA_SHORTCUT_ICON, scaledBitmap);
//addIntent.putExtra(Intent.EXTRA_SHORTCUT_ICON_RESOURCE, icon);
// Inform launcher to create shortcut
addIntent.setAction("com.android.launcher.action.INSTALL_SHORTCUT");
sendBroadcast(addIntent);
}
/*********************************************************************
* アイコン(ショートカット)の削除
*********************************************************************/
private void shortcutDel(String name)
{
// Intent to be send, when shortcut is pressed by user ("launched")
Intent shortcutIntent = new Intent(Intent.ACTION_MAIN);
shortcutIntent.setClassName(this, MainActivity.class.getName());
// Decorate the shortcut
Intent delIntent = new Intent();
delIntent.putExtra(Intent.EXTRA_SHORTCUT_INTENT, shortcutIntent);
delIntent.putExtra(Intent.EXTRA_SHORTCUT_NAME, name);
// Inform launcher to remove shortcut
delIntent.setAction("com.android.launcher.action.UNINSTALL_SHORTCUT");
sendBroadcast(delIntent);
}
</pre>
<br />
ショートカットの作成には"com.android.launcher.action.INSTALL_SHORTCUT"のIntentを<br>
ブロードキャスト送信することで行います。<br />
ブロードキャスト送信に渡すIntentには各情報をputExtraで渡して設定します。<br />
<span style="color: blue;">Intent.EXTRA_SHORTCUT_INTENT</span>には、作成するショートカットアイコンのclassを設定したIntentを渡します。<br />
<span style="color: blue;">Intent.EXTRA_SHORTCUT_NAME</span>には、作成するショートカットの名前のStringを渡します。<br />
<span style="color: blue;">Intent.EXTRA_SHORTCUT_ICON</span>には、作成するショートカットアイコンのBitmapを渡します。<br />
<span style="color: blue;">Intent.EXTRA_SHORTCUT_ICON_RESOURCE</span>を使用すれば、リソース(Parcelable)を渡すことでも<br>
作成するショートカットアイコンの設定が可能です。<br />
<br />
Intent.EXTRA_SHORTCUT_ICONでBitmapを渡す際は、サイズが大きすぎると設定されないため、アイコンサイズを128x128位に設定しています。<br />
<br />
ショートカットの削除する場合には"com.android.launcher.action.UNINSTALL_SHORTCUT"のIntentをブロードキャスト送信することで行います。<br />
<br />
<h1 style="background-color: #fefdfa; border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 2.25em; line-height: 1.2; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em; position: relative;">
❏その他</h1>
今回のサンプルコードはショートカットのアイコンをギャラリーから選択して好きなアイコンに設定して作成できるものを<br>
想定しています。<br />
<br />
アプリのアイコンについて動的に変更させたいと思っていたのですが、<br />
アプリのアイコンの指定はAndroidManifest.xmlで行われているため、アプリが動作している最中に<br />
直接編集することはできないため、動的な変更は無理であることがわかりましたΣ(゚Д゚)<br />
その代替案として、ショートカットを作成することで対応できる場合もあるかなと思います。<br />
<br />k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-59536997876096700062014-11-19T00:14:00.002+09:002014-11-19T00:17:16.832+09:00【アプリ開発】ライブラリ導入-JazzyViewPager今回新しいアプリを作成中で、そのアプリに新規にライブラリを導入してみましたので紹介していきます(^o^)/<br />
<br />
ページを左右にフリックする際に様々なエフェクトを追加できるライブラリです。<br />
<br />
<br />
<h1 style="border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 2.25em; line-height: 1.2; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em; position: relative;">
❏<a href="https://github.com/jfeinstein10/JazzyViewPager">JazzyViewPager</a></h1>
<div>
<br /></div>
<div>
ページ切替の際に色々と効果を入れてみたいと思っていましたが手を出せずにいましたので、<br />
まずはライブラリで試していきたいと思います(^^ゞ<br />
<br /></div>
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">エフェクト一覧(TrasitionEffect)</span></span></h3>
全部で12種類あるようです。<br />
設定でそれぞれ切り替えれるようにしてみましたので、それぞれのイメージも載せていきます。
<br />
<ol>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">Standard</span>
</li>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">Tablet</span>
</li>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">CubeIn</span>
</li>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">CubeOut</span>
</li>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">FlipVertical</span></li>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">FlipHorizontal</span></li>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">Stack</span>
</li>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">ZoomIn</span>
</li>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">ZoomOut</span>
</li>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">RotateUp</span>
</li>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">RotateDown</span>
</li>
<li><span class="pl-s" style="box-sizing: border-box; color: #6e5494;">Accordion</span>
</li>
</ol>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">1.Standard</span></span></h3>
一般的なフリックでのページ切替動作になります。<br />
普通にどのアプリでもみかける動作ですね。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-23MXAlYnpTw/VGtQ1gsqlJI/AAAAAAAAhVc/zckfzaao-ok/s1600/sq0lXv89f.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-23MXAlYnpTw/VGtQ1gsqlJI/AAAAAAAAhVc/zckfzaao-ok/s1600/sq0lXv89f.gif" height="640" width="360" /></a></div>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">2.Tablet</span></span></h3>
タブレットでみられるページ切替動作のようです。<br />
タブレット自体あまり操作していませんが、実際はこうゆう動作をしているんでしょうね(^^;<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-TY0Kg9eDRqk/VGtSs4U5laI/AAAAAAAAhVo/t5sk2dLjcrU/s1600/4IjuLi6e9.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-TY0Kg9eDRqk/VGtSs4U5laI/AAAAAAAAhVo/t5sk2dLjcrU/s1600/4IjuLi6e9.gif" height="640" width="360" /></a></div>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">3.CubeIn</span></span></h3>
<br />
手前側を中心にページが回転するようなページ切替動作になります。<br />
3Dダンジョンなんかで視点が回転するようなイメージでしょうか(´・ω・`)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-SUSXj0edMpc/VGtU2IXN5GI/AAAAAAAAhV8/ZIgXGNC5foE/s1600/kdpJZS046.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-SUSXj0edMpc/VGtU2IXN5GI/AAAAAAAAhV8/ZIgXGNC5foE/s1600/kdpJZS046.gif" height="640" width="360" /></a></div>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">4.CubeOut</span></span></h3>
奥側を中心にページが回転するようなページ切替動作になります。<br />
両方のページを見ることができるので、両方のページを確認したいときなんかに便利そうです♪<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-ijW2IkR0VgU/VGtWzsD92PI/AAAAAAAAhWM/CcTudzNgEl8/s1600/QC34m09b4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-ijW2IkR0VgU/VGtWzsD92PI/AAAAAAAAhWM/CcTudzNgEl8/s1600/QC34m09b4.gif" height="640" width="360" /></a></div>
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">5.FlipVertical</span></span></h3>
奥に倒れていくようなページ切替動作になります。<br />
ちょっと横にフリックした時の動作とあっていないので違和感がありますね(´・ω・`)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-g9kT7tdkTrw/VGtX349_YTI/AAAAAAAAhWY/9xNjPV0W4rM/s1600/EWT1rs199.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-g9kT7tdkTrw/VGtX349_YTI/AAAAAAAAhWY/9xNjPV0W4rM/s1600/EWT1rs199.gif" height="640" width="360" /></a></div>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">6.FlipHorizontal</span></span></h3>
真ん中を中心に縦にカードがめくれるようなページ切替動作になります。<br />
ページがウラとオモテで切り替わる感じで使い勝手が良さそうですね(^^)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-FLPtTLHiqZs/VGtZDk5QeKI/AAAAAAAAhWk/l4zTB9K4ZAU/s1600/ucouMP8a3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-FLPtTLHiqZs/VGtZDk5QeKI/AAAAAAAAhWk/l4zTB9K4ZAU/s1600/ucouMP8a3.gif" height="640" width="360" /></a></div>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">7.Stack</span></span></h3>
次のページが奥側から現れるようなページ切替動作になります。<br />
背景がない文字のみのページだと次のページが奥にみえてしまってますね(^^;<br />
背景があるページではうまく使えそうです(^o^)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-1g50AQUzr9I/VGtasol8SUI/AAAAAAAAhWw/8HL8ZH9glqE/s1600/prqP3u5e7.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-1g50AQUzr9I/VGtasol8SUI/AAAAAAAAhWw/8HL8ZH9glqE/s1600/prqP3u5e7.gif" height="640" width="360" /></a></div>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">8.ZoomIn</span></span></h3>
前のページは左に小さくなって消え次のページが右から大きくなって現れるページ切替動作になります。<br />
文字のみの場合でも見やすくて使いやすそうなエフェクトかと思います。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-7C4vcb4k1CQ/VGtb0yRkn_I/AAAAAAAAhW8/pwojpTuWiRg/s1600/sY9PBA971.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-7C4vcb4k1CQ/VGtb0yRkn_I/AAAAAAAAhW8/pwojpTuWiRg/s1600/sY9PBA971.gif" height="640" width="360" /></a></div>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">9.ZoomOut</span></span></h3>
前のページは左に大きくなって消え次のページが右から小さくなって現れるページ切替動作になります。<br />
ページ切り替え後、若干前のページが左に見えてしまっているのが気になります(・_・;<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-YBi3lYvCuso/VGtdgrrDlpI/AAAAAAAAhXI/_66uq_5P1EU/s1600/RqeH0Q8b9.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-YBi3lYvCuso/VGtdgrrDlpI/AAAAAAAAhXI/_66uq_5P1EU/s1600/RqeH0Q8b9.gif" height="640" width="360" /></a></div>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">10.RotateUp</span></span></h3>
上側を中心に円運動で回転していくようなページ切替動作になります。<br />
ページ切替がループするような作りだとうまく一周するように見せれるとかなと思いました(╹◡╹)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-EguC50f6RJc/VGterkda83I/AAAAAAAAhXU/8OvdsyqJ9mU/s1600/kCZWCr618.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-EguC50f6RJc/VGterkda83I/AAAAAAAAhXU/8OvdsyqJ9mU/s1600/kCZWCr618.gif" height="640" width="360" /></a></div>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">11.RotateDown</span></span></h3>
上側を中心に円運動で回転していくようなページ切替動作になります。<br />
画面下部に円形のボタンをつけるとイイ感じになりそうかなと思います♪<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-E9MyuMRPZrc/VGtfwT9R5sI/AAAAAAAAhXg/bnml0MnpaF8/s1600/B4GCxR6ea.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-E9MyuMRPZrc/VGtfwT9R5sI/AAAAAAAAhXg/bnml0MnpaF8/s1600/B4GCxR6ea.gif" height="640" width="360" /></a></div>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">12.Accordion</span></span></h3>
ページが折りたたまれて切り替わるページ切替動作です。<br />
背景や画像だと綺麗に切替ができてよさそうですね、データフォルダなんかでも使ってみたいエフェクトです( ´∀`)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ULso3jYFD-o/VGtgq4bFhCI/AAAAAAAAhXo/ryKdw81tw9E/s1600/NeJKOw679.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-ULso3jYFD-o/VGtgq4bFhCI/AAAAAAAAhXo/ryKdw81tw9E/s1600/NeJKOw679.gif" height="640" width="360" /></a></div>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.200000762939453px;">まとめ</span></span></h3>
<br />
ViewPagerのページ切替効果をつけるのは今後も色々なアプリで使用できるかと思います。<br />
動作がシンプルなアプリでもこのライブラリを使用すれば、アプリの品質も向上させることができますね(╹◡╹)<br />
<br />
今後はデータフォルダのアプリにも取り入れられればと思います(´・ω・`)<br />
<br />
<br />
<br />k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-39359490681077358572014-11-06T18:54:00.000+09:002014-12-02T07:23:34.409+09:00【アプリ開発】FragmentまとめFragmentについてまとめていきます(^^ゞ<br />
<br />
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'MS PGothic'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<h3 class="subtitle2" style="-webkit-text-stroke-width: 0px; background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-style: normal; font-variant: normal; letter-spacing: normal; margin: 0px 0px 20px; orphans: auto; padding: 0.3em 0.5em; position: relative; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: xx-small;"><span style="line-height: 27.2000007629395px;">注意事項</span></span></h3>
<div>
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.2000007629395px;">・Fragment内でActivity側のメンバ変数やメソッドを呼び出してはいけない</span></span></div>
<div>
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.2000007629395px;"> → 呼び出す場合はonAttach時に行う</span></span><br />
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.2000007629395px;"> → instansofで型チェックは行うべき</span></span></div>
<div>
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.2000007629395px;"> → コールバック関数を使用する</span></span><br />
・画面を回転させると引数なしのデフォルトコンストラクタで再生成される</div>
<div>
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.2000007629395px;"><br /></span></span></div>
<div>
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: xx-small;"><span style="line-height: 27.2000007629395px;">ライフサイクル</span></span></h3>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-cXQcJE4ypcQ/VEwcSv4e6iI/AAAAAAAAgfU/MRAyDvgNxwI/s1600/ZnJvbT1jbmJsb2dzJnVybD1jbWJ3NVNOd0lETzBBak55UVROeUFqTTBJekwzQUROeEFqTXZFak00VWpNMDhTYXYwMmJqNXladnhtWTBsbWJqNXljbGRXWXRsMkx2b0RjMFJIYQ.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-cXQcJE4ypcQ/VEwcSv4e6iI/AAAAAAAAgfU/MRAyDvgNxwI/s1600/ZnJvbT1jbmJsb2dzJnVybD1jbWJ3NVNOd0lETzBBak55UVROeUFqTTBJekwzQUROeEFqTXZFak00VWpNMDhTYXYwMmJqNXladnhtWTBsbWJqNXljbGRXWXRsMkx2b0RjMFJIYQ.png" height="640" width="321" /></a><a href="http://3.bp.blogspot.com/-p_r_fafXAFk/VEwcSfThM9I/AAAAAAAAgfQ/gI4puWN7DxE/s1600/ZnJvbT1jbmJsb2dzJnVybD1jbWJ3NVNPMU16TndZak0zSVROeUFqTTBJekwzQUROeEFqTXZFak00VWpNMDhTYXYwMmJqNXladnhtWTBsbWJqNXljbGRXWXRsMkx2b0RjMFJIYQ.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-p_r_fafXAFk/VEwcSfThM9I/AAAAAAAAgfQ/gI4puWN7DxE/s1600/ZnJvbT1jbmJsb2dzJnVybD1jbWJ3NVNPMU16TndZak0zSVROeUFqTTBJekwzQUROeEFqTXZFak00VWpNMDhTYXYwMmJqNXladnhtWTBsbWJqNXljbGRXWXRsMkx2b0RjMFJIYQ.png" height="640" width="236" /></a></div>
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.2000007629395px;"><br /></span></span></div>
<div>
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: xx-small;"><span style="line-height: 27.2000007629395px;"><br /></span></span></div>
<div>
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: xx-small;"><span style="line-height: 27.2000007629395px;">Fragment内の変数を保存、呼出方法</span></span></h3>
<div>
<br />
<pre class="brush: java; first-line: 1; highlight: [,];" title="サンプルコード"> //////////////////////////////////
@Override
public void onSaveInstanceState(final Bundle outState)
{
super.onSaveInstanceState(outState);
outState.putInt("KEY_FRAGMENT_ID", mListID);
outState.putString("KEY_FRAGMENT_SITENAMES", mSiteNameS);
}
@Override
public void onActivityCreated(Bundle savedInstanceState)
{
super.onActivityCreated(savedInstanceState);
if (savedInstanceState != null)
{
mListID = savedInstanceState.getInt("KEY_FRAGMENT_ID");
mSiteNameS = savedInstanceState.getString("KEY_FRAGMENT_SITENAMES");
}
}
//////////////////////////////////
</pre>
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: xx-small;"><span style="line-height: 27.2000007629395px;">Fragmentのサブクラス</span></span></h3>
・<a href="http://developer.android.com/reference/android/app/DialogFragment.html">DialogFragment</a><br />
・<a href="http://developer.android.com/reference/android/app/ListFragment.html">ListFragment</a><br />
・<a href="http://developer.android.com/reference/android/preference/PreferenceFragment.html">PreferenceFragment</a><br />
・<a href="http://developer.android.com/reference/android/webkit/WebViewFragment.html">WebViewFragment</a><br />
<br />
<div>
<div>
<div>
<div>
</div>
</div>
<div>
</div>
</div>
<div>
</div>
</div>
<div>
</div>
</div>
<div>
</div>
</div>
<div>
</div>
</div>
k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-18483240657130000622014-11-06T18:51:00.000+09:002014-11-06T18:52:08.185+09:00【アプリ開発】ActionBarに関するTipsActionBarに関してTips集としてここに書き込んでいきます。<br />
気づいた時点で更新していきます(・∀・)<br />
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="line-height: 27.2000007629395px;">タイトルバーを隠す</span></h3>
<pre class="brush: java; first-line: 1; highlight: [,];" title=""> //////////////////////////////////
final ActionBar actionBar = getActionBar();
// タイトルバーを消去
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
//////////////////////////////////
</pre>
<br />
<br />
k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-79356824854489958712014-11-02T10:20:00.002+09:002014-11-02T10:23:40.927+09:00【アプリ開発】RSS取得2ちゃんまとめ閲覧用アプリを作る機会があったため、<br />
RSSの取得のあたりについて書きたいと思います(^O^)<br />
<br />
<br />
<span style="-webkit-text-stroke-width: 0px; background-color: #fefdfa; color: #333333; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18.2000007629395px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"></span><br />
<h2 style="-webkit-text-stroke-width: 0px; background-color: white; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: normal; margin: 0px 0px 20px; orphans: auto; padding: 0.3em 0.5em; position: relative; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif;"><span style="font-size: medium; line-height: 27.2000007629395px;">RSS情報アイテムクラス</span></span></h2>
以下はRSSで取得した情報を保存するクラスです。<br />
<br />
<br />
<pre class="brush: java; first-line: 1; highlight: [,];" title="">import android.os.Parcel;
import android.os.Parcelable;
/***********************************************************************
* RSS情報アイテムクラス
***********************************************************************/
public class RssItem implements Parcelable
{
// 記事のサイト名
private CharSequence mSiteName;
// 記事のタイトル
private CharSequence mTitle;
// 記事の日付
private CharSequence mDate;
// 記事のリンク
private CharSequence mLink;
// 記事のカテゴリ
private CharSequence mCategory;
// コンストラクタ
public RssItem()
{
mSiteName = "";
mTitle = "";
mDate = "";
mLink = "";
mCategory = "";
}
private RssItem(Parcel in)
{
mSiteName = in.readString();
mTitle = in.readString();
mDate = in.readString();
mLink = in.readString();
mCategory = in.readString();
}
/***********************************************************************
* 日付の取得・セット
***********************************************************************/
public CharSequence getDate() {
return mDate;
}
public void setDate(CharSequence date) {
mDate = date;
}
/***********************************************************************
* タイトルの取得・セット
***********************************************************************/
public CharSequence getTitle() {
return mTitle;
}
public void setTitle(CharSequence title) {
mTitle = title;
}
/***********************************************************************
* サイト名の取得・セット
***********************************************************************/
public CharSequence getSiteName() {
return mSiteName;
}
public void setSiteName(CharSequence name) {
mSiteName = name;
}
/***********************************************************************
* リンクの取得・セット
***********************************************************************/
public CharSequence getLink() {
return mLink;
}
public void setLink(CharSequence link) {
mLink = link;
}
/***********************************************************************
* カテゴリの取得・セット
***********************************************************************/
public CharSequence getCategory() {
return mCategory;
}
public void setCategory(CharSequence category) {
mCategory = category;
}
@Override
public int describeContents()
{
return 0;
}
@Override
public void writeToParcel(Parcel out, int flags)
{
out.writeString(mSiteName.toString());
out.writeString(mTitle.toString());
out.writeString(mDate.toString());
out.writeString(mLink.toString());
out.writeString(mCategory.toString());
}
public static final Parcelable.Creator<rssitem> CREATOR
= new Parcelable.Creator<rssitem>()
{
public RssItem createFromParcel(Parcel in)
{
return new RssItem(in);
}
public RssItem[] newArray(int size)
{
return new RssItem[size];
}
};
}
</rssitem></rssitem></pre>
<br />
<br />
<span style="-webkit-text-stroke-width: 0px; background-color: #fefdfa; color: #333333; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18.2000007629395px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"></span><br />
<h2 style="-webkit-text-stroke-width: 0px; background-color: white; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: normal; margin: 0px 0px 20px; orphans: auto; padding: 0.3em 0.5em; position: relative; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif;"><span style="font-size: medium; line-height: 27.2000007629395px;">RSS情報アイテム取得処理</span></span></h2>
以下はRSSを読み取ってRSS情報アイテムクラスにセットしている処理です。
<br />
<br />
<pre class="brush: java; first-line: 1; highlight: [,];" title=""> // 判定用
boolean IsItemTag(String tag){ return (tag.equals("entry") || tag.equals("item")); }
boolean IsTitleTag(String tag){ return tag.equals("title"); }
boolean IsDateTag(String tag){ return (tag.equals("issued") || tag.equals("date")); }
boolean IsLinkTag(String tag){ return tag.equals("link"); }
boolean IsSubjectTag(String tag){ return tag.equals("subject"); }
/*******************************************************************************
* XMLをパースする
*
* @param InputStream is : XMLテキスト
*******************************************************************************/
public void parseXml(InputStream is) throws IOException, XmlPullParserException
{
// パーサー準備
XmlPullParser parser = Xml.newPullParser();
try
{
parser.setInput(is, null);
int eventType = parser.getEventType();
RssItem currentItem = null;
while (eventType != XmlPullParser.END_DOCUMENT)
{
String tag = null;
switch (eventType)
{
// 開始タグの判定
case XmlPullParser.START_TAG:
tag = parser.getName();
if (IsItemTag(tag))
{
// <item><entry>の場合、RssItemクラス生成
currentItem = new RssItem();
}
else if (currentItem != null)
{
if (IsTitleTag(tag))
{
// <title>の場合、タイトルセット
currentItem.setTitle(parser.nextText());
}
else if (IsDateTag(tag))
{
// <issued><date>の場合、日付セット
currentItem.setDate(parser.nextText());
}
else if(IsLinkTag(tag))
{
// <link>の場合、リンク先のURLをセット
String strLink = "";
for(int i=0; i<parser.getAttributeCount(); i++)
{
if(parser.getAttributeName(i).equals("href"))
{
strLink = parser.getAttributeValue(i);
}
}
if(strLink.equals(""))
{
strLink = parser.nextText();
}
currentItem.setLink(strLink);
}
else if(IsSubjectTag(tag))
{
// <subject>の場合、題名セット
currentItem.setCategory(parser.nextText());
}
}
break;
// 終了タグの判定
case XmlPullParser.END_TAG:
tag = parser.getName();
if (IsItemTag(tag))
{
:
}
break;
}
// 次のタグを取得
eventType = parser.next();
}
}
catch (Exception e)
{
e.printStackTrace();
}
}
</pre>
<br />
<br />
<br />
<br />
実際2ちゃんのアプリに組み込んで使用しています。<br />
友人から提案してもらったアイディアで作成したアプリで友人の方でアプリを公開していたのですが、<br />
現在はアプリ停止されています(・_・;)<br />
<br />
<br />
Googleは急にアプリ停止されたり、アカウント停止される危険性があるのでこわいところですね(´・ω・`)
k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-71569913442929969862014-09-07T11:53:00.002+09:002014-09-07T22:23:43.434+09:00【アプリ開発】画像ファイルなしで背景画像を作る③<div dir="ltr">
以前の記事<br />
「<a href="http://k0j1-android.blogspot.com/2013/10/blog-post_19.html">【アプリ開発】画像ファイルなしで背景画像を作る①</a>」<br />
「<a href="http://k0j1-android.blogspot.jp/2014/08/blog-post.html">【アプリ開発】画像ファイルなしで背景画像を作る②</a>」<br />
で、プログラムで背景を描画するサンプルアプリを紹介しました。<br />
<br /></div>
<div dir="ltr">
今回も第3弾として背景の描画を4つ追加してアプリを更新しました(^0^)/<br />
<br /></div>
<div dir="ltr">
前回同様、今回もその背景のサンプルコードとスクリーンショットを載せていきます(´・ω・`)<br />
画像の容量を節約しつつクールな背景画像として利用できればと思いますので、<br />
参考にオリジナルの背景としてアプリにご利用いただければうれしいです☆<br />
<br />
<br /></div>
<h2 style="background-color: white; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif;"><span style="font-size: large; line-height: 27.200000762939453px;">アプリ</span></span></h2>
<div class="separator" style="background-color: #fefdfa; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px; text-align: center;">
<a href="https://play.google.com/store/apps/details?id=com.takaharabooks.sample" style="clear: left; color: #7d181e; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;" target="_blank">❏BackgroundDraw ~sample~</a><a href="https://play.google.com/store/apps/details?id=com.takaharabooks.sample" style="clear: left; color: #d52a33; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-Ff4y0rMPBA8/UzZoB8IHSiI/AAAAAAAAZYU/hOQwJFShntI/s1600/%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3.PNG" height="207" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px; background: rgb(255, 255, 255); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px; padding: 8px; position: relative;" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
まずは、再度サンプルアプリを紹介します。<br />
今回紹介する背景も追加してアップデート済みですので、まずはお試しください(^0^)/♪<br />
<br />
<br />
<br />
<h2 style="background-color: white; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif;"><span style="font-size: large; line-height: 27.200000762939453px;">背景パターン(今回追加分)</span></span></h2>
前回までの10の背景パターンに加えて、以下の4つの背景パターンをアプリに追加しました。<br />
今回は多少実用的な背景ができたので、テーマをつけて紹介します。<br />
<br />
□雨あと<br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"> ・</b><b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.2000007629395px;">多数の線と円の</b><b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.2000007629395px;">模様(2色、半透明)</b><br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.2000007629395px;"><br /></b>
□四角模様(左下)<br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.2000007629395px;"> ・多数の四角形をちりばめた模様(2色、半透明) </b><br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.2000007629395px;"><br /></b>
□四角模様(上下)<br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"> ・</b><b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.2000007629395px;">多数の四角形をちりばめた模様(カラフル、半透明)</b><br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.2000007629395px;"><br /></b>
□四角模様(真ん中)<br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.2000007629395px;"> ・多数の四角形をちりばめた模様(1色、半透明) </b><br />
<br />
<br />
<br />
<h2 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: large;">雨あと</span></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-qOuUzILQNQc/VAvEPL9tfsI/AAAAAAAAcvU/yxZhT0YvRy4/s1600/device-2014-09-07-113240.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-qOuUzILQNQc/VAvEPL9tfsI/AAAAAAAAcvU/yxZhT0YvRy4/s1600/device-2014-09-07-113240.png" height="320" width="180" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
雨が降って波紋が広がるような画の背景です。<br />
<br />
まず線をランダムに描画して、2色の円を右下の方に描画しています。<br />
ランダムに取得したX座標とY座標が左上の座標(0,0)の半径240pxの円の範囲内に入らないようにして描画しています。<br />
<br />
<br /></div>
<pre class="brush: xml; first-line: 1; highlight: [,];" title=""> // 線と円の描画
public void DrawBackground011(Canvas csCanvas)
{
Random rand = new Random();
Paint csPaint = new Paint();
csPaint.setAntiAlias(true);
csPaint.setColor(Color.argb(128+rand.nextInt(80),rand.nextInt(256),rand.nextInt(256),rand.nextInt(256)));
RectF sOval = new RectF();
for(int x=0; x<=320; x+=20)
{
if(x==160) csPaint.setColor(Color.argb(128+rand.nextInt(80),rand.nextInt(256),rand.nextInt(256),rand.nextInt(256)));
for(int y=0; y<=320; y+=80)
{
int nX = 0, nY = 0;
boolean bLoop=true;
while(bLoop)
{
nX = rand.nextInt(320);
nY = rand.nextInt(320);
if(240 < Math.sqrt(nX*nX+nY*nY)) bLoop = false;
}
int nSize = rand.nextInt(30)+10;
sOval.set(nX, nY, nX+nSize, nY+nSize);
csCanvas.drawOval(sOval, csPaint);
}
int nX = rand.nextInt(320);
int nY = rand.nextInt(320);
int nSize = rand.nextInt(40);
csCanvas.drawLine(nX, nY, nX+nSize, nY+nSize, csPaint);
}
}
</pre>
<br />
<a name='more'></a><br />
<br />
<h2 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: large;">四角模様(左下)</span></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-MPxeIDE8eqY/VAvER0BNU4I/AAAAAAAAcvc/M_GvnGLBlMs/s1600/device-2014-09-07-113321.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-MPxeIDE8eqY/VAvER0BNU4I/AAAAAAAAcvc/M_GvnGLBlMs/s1600/device-2014-09-07-113321.png" height="320" width="180" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
こちらは良い名前が思いつかなかったので、良いタイトルがあればコメントください(^^;<br />
<br />
今度は四角形を左側と下側に列を作って描画しています。<br />
微妙にずらしながら左側は上から下に、下側は左から右に色を変えて描画しています。<br />
背景として使うには少し物足りない気がします(´・ω・`)<br />
<br /></div>
<pre class="brush: xml; first-line: 1; highlight: [,];" title=""> // 四角形の描画
public void DrawBackground012(Canvas csCanvas)
{
Random rand = new Random();
int nColor01 = Color.argb(128+rand.nextInt(80),rand.nextInt(256),rand.nextInt(256),rand.nextInt(256));
int nColor02 = Color.argb(128+rand.nextInt(80),rand.nextInt(256),rand.nextInt(256),rand.nextInt(256));
Paint csPaint = new Paint();
csPaint.setAntiAlias(true);
csPaint.setColor(nColor01);
RectF sRect = new RectF();
int x=20;
{
for(int y=0; y<=320; y+=10)
{
csPaint.setColor(y%20==0 ? nColor01 : nColor02);
int nX = 0, nY = 0;
nX = x + rand.nextInt(20);
nY = y;
int nSize = rand.nextInt(20)+2;
sRect.set(nX, nY, nX+nSize, nY+nSize);
csCanvas.drawRect(sRect, csPaint);
}
}
int y=280;
{
for(x=0; x<=320; x+=10)
{
csPaint.setColor(x%20==0 ? nColor01 : nColor02);
int nX = 0, nY = 0;
nX = x;
nY = y + rand.nextInt(20);
int nSize = rand.nextInt(20)+2;
sRect.set(nX, nY, nX+nSize, nY+nSize);
csCanvas.drawRect(sRect, csPaint);
}
}
}
</pre>
<br />
<br>
<h2 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: large;">四角模様(上下)</span></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-O4zSqW-IPuM/VAvESPiCFaI/AAAAAAAAcvk/MYRZuTdMEfU/s1600/device-2014-09-07-113330.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-O4zSqW-IPuM/VAvESPiCFaI/AAAAAAAAcvk/MYRZuTdMEfU/s1600/device-2014-09-07-113330.png" height="320" width="180" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
こちらも良い名前が思いつかなかったので、良いタイトルがあればコメントください(^^;<br />
<br />
今度は四角形を上下に四角形を描画しています。<br />
ひし形を描画するため、まずはキャンパスを45度ずらした後上側と下側になる場所に色とサイズを変えながら四角形を描画していきます。<br />
今回は色を変えて描画しましたが、アプリにあわせて色を統一しても使える背景かと思います(^^)<br />
<br /></div>
<pre class="brush: xml; first-line: 1; highlight: [,];" title=""> // キャンパスを回転させて四角形を描画
public void DrawBackground013(Canvas csCanvas)
{
Random rand = new Random();
csCanvas.rotate(45, 160, 160);
Paint csPaint = new Paint();
csPaint.setAntiAlias(true);
csPaint.setColor(Color.argb(128+rand.nextInt(80),rand.nextInt(256),rand.nextInt(256),rand.nextInt(256)));
RectF sRect = new RectF();
for(int x=0; x<=160; x+=20)
{
csPaint.setColor(Color.argb(128+rand.nextInt(80),rand.nextInt(256),rand.nextInt(256),rand.nextInt(256)));
for(int y=0; y<=320; y+=30)
{
int nX = 0, nY = 0;
nX = 0 + x + rand.nextInt(90) - 90;
nY = 160 - x + rand.nextInt(90) - 90;
int nSize = rand.nextInt(30)+2;
sRect.set(nX, nY, nX+nSize, nY+nSize);
csCanvas.drawRect(sRect, csPaint);
}
}
for(int x=0; x<=160; x+=20)
{
csPaint.setColor(Color.argb(128+rand.nextInt(80),rand.nextInt(256),rand.nextInt(256),rand.nextInt(256)));
for(int y=0; y<=320; y+=30)
{
int nX = 0, nY = 0;
nX = 160 + x - rand.nextInt(90) + 60;
nY = 320 - x - rand.nextInt(90) + 60;
int nSize = rand.nextInt(30)+2;
sRect.set(nX, nY, nX+nSize, nY+nSize);
csCanvas.drawRect(sRect, csPaint);
}
}
}
</pre>
<br>
<br>
<h2 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: large;">四角模様(真ん中)</span></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-1VgIjjvkNEA/VAvER4v8j_I/AAAAAAAAcvg/A2Y26pKkOyk/s1600/device-2014-09-07-113424.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-1VgIjjvkNEA/VAvER4v8j_I/AAAAAAAAcvg/A2Y26pKkOyk/s1600/device-2014-09-07-113424.png" height="320" width="180" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
こちらも良い名前が思いつかなかったので、良いタイトルがあればコメントください(^^;<br />
<br />
四角形を大小それぞれ描画しています。<br />
もう少し真ん中のラインに沿って大きめのサイズももう少し増やせるとより見栄えが良くなる気がしますが、とりあえずこれで完成させました(^O^;<br />
<br /></div>
<pre class="brush: xml; first-line: 1; highlight: [,];" title=""> // 四角形の描画
public void DrawBackground014(Canvas csCanvas)
{
Random rand = new Random();
//csCanvas.rotate(45, 160, 160);
int nColorR = rand.nextInt(256);
int nColorG = rand.nextInt(256);
int nColorB = rand.nextInt(256);
Paint csPaint = new Paint();
csPaint.setAntiAlias(true);
csPaint.setColor(Color.argb(128+rand.nextInt(80),nColorR,nColorG,nColorB));
RectF sRect = new RectF();
{
for(int y=0; y<=320; y+=5)
{
int nAddColor = rand.nextInt(50);
csPaint.setColor(Color.argb(50+rand.nextInt(150),nColorR+nAddColor,nColorG+nAddColor,nColorB+nAddColor));
int nX = 0, nY = 0;
nX = 20 + rand.nextInt(240);
nY = y + rand.nextInt(20);
int nSize = rand.nextInt(60)+2;
sRect.set(nX, nY, nX+nSize, nY+nSize);
csCanvas.drawRect(sRect, csPaint);
}
}
}
</pre>
<br>
<br>
<h2 style="background-color: white; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif;"><span style="font-size: large; line-height: 27.200000762939453px;">GitHubでの公開</span></span></h2>
今回このプロジェクトをGitHubで公開しましたので、興味をお持ちいただいた方は下記リンクから<br />
プロジェクトをご確認ください(^O^)/<br />
<div>
<br />
<div>
<h3>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">❏BackgroundSample</span></span></h3>
</div>
<div>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><a href="https://github.com/k0j1/BackgroundSample">https://github.com/k0j1/BackgroundSample</a></span></span></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
また背景を追加した際にはアプリとプロジェクトを更新してブログで紹介していきたいと思います♪<br />
<br />
<br />
<br /></div>
</div>
k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-61563583161339053322014-08-15T23:17:00.000+09:002014-09-07T11:57:11.317+09:00【アプリ開発】画像ファイルなしで背景画像を作る②以前の記事「<a href="http://k0j1-android.blogspot.com/2013/10/blog-post_19.html" style="background: rgb(255, 255, 255); box-sizing: border-box; color: #4183c4; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 16px; line-height: 25.600000381469727px; text-decoration: none;">【アプリ開発】画像ファイルなしで背景画像を作る①</a>」で、プログラムで背景を描画するサンプルアプリを紹介しましたが、<br />
そのアプリを更新して今回、背景の描画を3つ追加しました(^0^)/<br />
<br />
前回同様、今回もその背景のサンプルコードとスクリーンショットを載せていきます(´・ω・`)<br />
画像の容量を節約しつつクールな背景画像として利用できればと思いますので、<br />
参考にオリジナルの背景としてアプリにご利用いただければうれしいです☆<br />
<br />
<h2 style="background-color: white; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif;"><span style="font-size: large; line-height: 27.200000762939453px;">アプリ</span></span></h2>
<div class="separator" style="background-color: #fefdfa; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px; text-align: center;">
<a href="https://play.google.com/store/apps/details?id=com.takaharabooks.sample" style="clear: left; color: #7d181e; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;" target="_blank">❏BackgroundDraw ~sample~</a><a href="https://play.google.com/store/apps/details?id=com.takaharabooks.sample" style="clear: left; color: #d52a33; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-Ff4y0rMPBA8/UzZoB8IHSiI/AAAAAAAAZYU/hOQwJFShntI/s1600/%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3.PNG" height="207" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px; background: rgb(255, 255, 255); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px; padding: 8px; position: relative;" width="400" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
まずは、再度サンプルアプリを紹介します。<br />
今回紹介する背景も追加してアップデート済みですので、まずはお試しください(^0^)/♪<br />
<br />
<br />
<br />
<h2 style="background-color: white; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif;"><span style="font-size: large; line-height: 27.200000762939453px;">背景パターン(今回追加分)</span></span></h2>
前回の7つの背景パターンに加えて、以下の3つの背景パターンをアプリに追加しました。<br />
<br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"> ・四角形の幾何学模様(モノクロ) </b><br />
<b style="background-color: #fefdfa; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"> ・多数の四角形の幾何学模様(モノクロ) <br /> ・多数の線と円の統一色の模様(1色、半透明)</b><br />
<br />
<br />
<br />
<br />
<h2 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: large;">四角形の幾何学模様</span></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-BDVM2BJko7E/U-4REQ6PcgI/AAAAAAAAceU/ws07eD7UTZU/s1600/device-2014-08-15-225356.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-BDVM2BJko7E/U-4REQ6PcgI/AAAAAAAAceU/ws07eD7UTZU/s1600/device-2014-08-15-225356.png" height="320" width="180" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
背景名の命名は適当にそれっぽい名前をつけていますので、良い名前があればコメントください(^^;<br />
四角形を90度回転させながら段々小さく描画していきました。<br />
色は交互に白黒で変化させています。</div>
<pre class="brush: xml; first-line: 1; highlight: [,];" title=""> // 四角形の幾何学模様
public void DrawBackground008(Canvas csCanvas)
{
Paint csPaint = new Paint();
csPaint.setAntiAlias(true);
RectF sRect = new RectF();
for(int xy=320; xy>0; )
{
csPaint.setColor(Color.BLACK);
sRect.set(160-xy/2, 160-xy/2, 160+xy/2, 160+xy/2);
csCanvas.drawRect(sRect, csPaint);
xy/=Math.sqrt(2);
csCanvas.rotate(45, 160, 160);
csPaint.setColor(Color.WHITE);
sRect.set(160-xy/2, 160-xy/2, 160+xy/2, 160+xy/2);
csCanvas.drawRect(sRect, csPaint);
xy/=Math.sqrt(2);
csCanvas.rotate(45, 160, 160);
}
}
</pre>
<br />
<a name='more'></a><br />
<br />
<h2 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: large;">多数の四角形の幾何学模様(モノクロ)</span></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Wu_Us5R22Ig/U-4SYBGA-eI/AAAAAAAAceg/AFRD59_33kM/s1600/device-2014-08-15-225859.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-Wu_Us5R22Ig/U-4SYBGA-eI/AAAAAAAAceg/AFRD59_33kM/s1600/device-2014-08-15-225859.png" height="320" width="180" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
こちらも背景名の命名は適当にそれっぽい名前をつけています(^^;<br />
先ほどの背景をサイズを小さくして縦横4×4で敷き詰めてみました、苦労して描画してみた割には<br />
いまいち使いづらい背景となってしまったため、実際に使うにはもう少し工夫が必要かもしれないです(・_・;</div>
<pre class="brush: xml; first-line: 1; highlight: [,];" title=""> // 多数の四角形の幾何学模様
public void DrawBackground009(Canvas csCanvas)
{
Paint csPaint = new Paint();
csPaint.setAntiAlias(true);
RectF sRect = new RectF();
for(int y=0; y<320 for="" int="" nrotate="0;" x="" xy="" y="">0; )
{
csPaint.setColor(Color.BLACK);
sRect.set(x+40-xy/2, y+40-xy/2, x+40+xy/2, y+40+xy/2);
csCanvas.drawRect(sRect, csPaint);
xy/=Math.sqrt(2);
csCanvas.rotate(45, x+40, y+40);
csPaint.setColor(Color.WHITE);
sRect.set(x+40-xy/2, y+40-xy/2, x+40+xy/2, y+40+xy/2);
csCanvas.drawRect(sRect, csPaint);
xy/=Math.sqrt(2);
csCanvas.rotate(45, x+40, y+40);
nRotate += 90;
}
csCanvas.rotate(-nRotate, x+40, y+40);
}
}
}
</pre>
<br />
<h2 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: large;">多数の線と円の統一色の模様(1色、半透明)</span></h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-jCz-2-C4nD4/U-4UO_R5mxI/AAAAAAAAces/8p5jkp-rwm0/s1600/device-2014-08-15-225942.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-jCz-2-C4nD4/U-4UO_R5mxI/AAAAAAAAces/8p5jkp-rwm0/s1600/device-2014-08-15-225942.png" height="320" width="180" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
多数の円と線をランダムにサイズを変化させて描画した背景です。<br />
色は毎回ランダムで統一した色をセットしていますが、使用する際はアプリに合わせて色を統一してもらえればと思います。<br />
色を統一するとデザイン的にもすっきりして見えてくるものですね(^_^)</div>
<pre class="brush: xml; first-line: 1; highlight: [,];" title=""> // 多数の線と円の統一色の模様
public void DrawBackground010(Canvas csCanvas)
{
Random rand = new Random();
Paint csPaint = new Paint();
csPaint.setAntiAlias(true);
csPaint.setColor(Color.argb(128+rand.nextInt(80),rand.nextInt(256),rand.nextInt(256),rand.nextInt(256)));
RectF sOval = new RectF();
for(int x=0; x<=320; x+=20)
{
for(int y=0; y<=320; y+=80)
{
int nX = rand.nextInt(320);
int nY = rand.nextInt(320);
int nSize = rand.nextInt(30)+10;
sOval.set(nX, nY, nX+nSize, nY+nSize);
csCanvas.drawOval(sOval, csPaint);
}
int nX = rand.nextInt(320);
int nY = rand.nextInt(320);
int nSize = rand.nextInt(40);
csCanvas.drawLine(nX, nY, nX+nSize, nY+nSize, csPaint);
}
}
</pre>
<br />
<h2 style="background-color: white; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif;"><span style="font-size: large; line-height: 27.200000762939453px;">GitHubでの公開</span></span></h2>
今回このプロジェクトをGitHubで公開しましたので、興味をお持ちいただいた方は下記リンクから<br />
プロジェクトをご確認ください(^O^)/<br />
<div>
<br />
<div>
<h3>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">❏BackgroundSample</span></span></h3>
</div>
<div>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><a href="https://github.com/k0j1/BackgroundSample">https://github.com/k0j1/BackgroundSample</a></span></span></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
また背景を追加した際にはアプリとプロジェクトを更新してブログで紹介していきたいと思います♪<br />
<br />
<br />
<br /></div>
</div>
k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-34519587592783074522014-08-14T05:46:00.000+09:002014-08-14T06:02:20.022+09:00【アプリ開発】ProgressBarの色今回プログレスバーの色の設定で少し戸惑ったため処理方法を書き留めておきます。<br />
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">ProgressBarの色の設定方法</span></span></h3>
<div>
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">プログレスバーの色を変更して表示するための方法です。</span></span></div>
<pre class="brush: xml; first-line: 1; highlight: [,];" title="layout/xxx.xml">
<!-- 読込中表示プログレスバー -->
<ProgressBar
android:id="@+id/loadingProgress"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="@drawable/ic_progress_green"
android:layout_width="match_parent"
android:layout_height="3dp"/>
</pre>
<pre class="brush: xml; first-line: 1; highlight: [,];" title="drawable/ic_progress_green.xml">
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#000000"
android:centerColor="#000000"
android:centerY="0.5"
android:endColor="#000000"
android:angle="270"
/>
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_light"
android:centerY="0.5"
android:endColor="@color/holo_green_dark"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
</pre>
<br />
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">ProgressBarのアニメーション表示</span></span></h3>
<div>
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">プログレスバーを読み込み中のようにアニメーション表示するための方法です。</span></span></div>
<br />
<pre class="brush: xml; first-line: 1; highlight: [,];" title="layout/xxx.xml">
<!-- 読込中表示プログレスバー -->
<ProgressBar
android:id="@+id/loadingProgress"
android:layout_width="match_parent"
android:layout_height="3dp"
android:indeterminateDrawable="@drawable/ic_progress_indeterminate_green" />
</pre>
<br />
<pre class="brush: xml; first-line: 1; highlight: [,];" title="drawable/ic_progress_indeterminate_green.xml">
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false" >
<item android:duration="200">
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerY="1.0"
android:endColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_light"
android:startColor="@color/holo_green_dark"
android:type="linear" />
</shape>
</item>
<item android:duration="50">
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerY="0.8"
android:endColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_light"
android:startColor="@color/holo_green_dark"
android:type="linear" />
</shape>
</item>
<item android:duration="50">
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerY="0.6"
android:endColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_light"
android:startColor="@color/holo_green_dark"
android:type="linear" />
</shape>
</item>
<item android:duration="50">
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerY="0.4"
android:endColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_light"
android:startColor="@color/holo_green_dark"
android:type="linear" />
</shape>
</item>
<item android:duration="50">
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerY="0.2"
android:endColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_light"
android:startColor="@color/holo_green_dark"
android:type="linear" />
</shape>
</item>
<item android:duration="70">
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerY="0.0"
android:endColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_normal"
android:startColor="@color/holo_green_dark"
android:type="linear" />
</shape>
</item>
<item android:duration="100">
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerY="0.2"
android:endColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_normal"
android:startColor="@color/holo_green_dark"
android:type="linear" />
</shape>
</item>
<item android:duration="100">
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerY="0.4"
android:endColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_normal"
android:startColor="@color/holo_green_dark"
android:type="linear" />
</shape>
</item>
<item android:duration="100">
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerY="0.6"
android:endColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_normal"
android:startColor="@color/holo_green_dark"
android:type="linear" />
</shape>
</item>
<item android:duration="100">
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerY="0.8"
android:endColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_normal"
android:startColor="@color/holo_green_dark"
android:type="linear" />
</shape>
</item>
<item android:duration="100">
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerY="1.0"
android:endColor="@color/holo_green_dark"
android:centerColor="@color/holo_green_normal"
android:startColor="@color/holo_green_dark"
android:type="linear" />
</shape>
</item>
</animation-list>
</pre>k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-44258798187897380612014-07-16T04:48:00.000+09:002014-07-16T04:48:30.703+09:00【アプリ開発】TextViewの小ネタ(Tips)TextViewの便利な設定やちょっとした小技をまとめていきます☆<br />
<br />
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'MS PGothic'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<h3 class="subtitle2" style="-webkit-text-stroke-width: 0px; background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-style: normal; font-variant: normal; letter-spacing: normal; margin: 0px 0px 20px; orphans: auto; padding: 0.3em 0.5em; position: relative; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">URLやメールアドレスの自動リンク設定</span></span></h3>
<br />
<pre class="brush: java; first-line: 1; highlight: [,];" title=""> // 自動的にリンクを生成するように設定
TextView csLinkedTextView = new TextView(this);
csLinkedTextView.setText("URL:http://www.takahara-books.com/Android/");
csLinkedTextView.setAutoLinkMask(Linkify.ALL);
</pre>
<br />
<br />
<br />
<br />
<h3 class="subtitle2" style="-webkit-text-stroke-width: 0px; background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-style: normal; font-variant: normal; letter-spacing: normal; margin: 0px 0px 20px; orphans: auto; padding: 0.3em 0.5em; position: relative; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">フォントの指定</span></span></h3>
<br />
<pre class="brush: java; first-line: 1; highlight: [,];" title=""> // ビューに表示するフォントを指定
TextView csFontTextView = new TextView(this);
csFontTextView.setText("サンプル");
csFontTextView.setTypeface(Typeface.SERIF, Typeface.BOLD_ITALIC);
</pre>
<br />
<br />
<br />
<br />
<h3 class="subtitle2" style="-webkit-text-stroke-width: 0px; background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-style: normal; font-variant: normal; letter-spacing: normal; margin: 0px 0px 20px; orphans: auto; padding: 0.3em 0.5em; position: relative; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">自動補完の機能追加</span></span></h3>
<br />
<pre class="brush: java; first-line: 1; highlight: [,];" title=""> // 候補に表示される文字列
String[] strAutoWordlist = new String[]{
"Cupcake",
"Cute",
"Donut",
"Eclair",
"Froyo",
"Gingerbread",
"Honeycomb",
"IceCreamSandwich",
"Kitkat"
}
// アダプタを作成
ArrayAdapter<string> adapterAuto = new ArrayAdapter<string>(
this,
android.R.layout.simple_dropdown_item_1line,
strAutoWordlist
);
// AutoCompleteTextViewインスタンスを作成
AutoCompleteTextView csAutoCompTextView = new AutoCompleteTextView(this);
// アダプタをセット
csAutoCompTextView.setAdapter(adapterAuto);
</string></string></pre>
<br />
<br />
<br />
<br />k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-89095781468749861182014-06-13T21:05:00.000+09:002014-06-13T22:56:24.292+09:00【アプリ活用】DevAppsDirect<h4 class="clearfix" style="background-color: #e3e3e3; color: #646464; font-family: Raleway, Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.3em; margin: 0px 0px 15px; text-rendering: optimizelegibility;">
<img alt="icon" src="http://www.inappsquared.com/img/icons/devappsdirect_icon.png" height="40" style="border: 0px; height: auto; max-width: 100%; vertical-align: middle;" width="40" /> DevAppsDirect</h4>
<div>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;">GitHubなんかで公開されている数多くのライブラリのサンプルを実際にアプリ内でダウンロードして実行できるデモアプリです。全部確認してみましたが、自分のアプリにも取り入れたい物が結構ありましたので、いずれ使っていきたいですね。</span><br />
<br style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;" />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;">動作している端末によっては、デモの内起動できないものもありますが、デモ自体は随時更新されているので、日々新しいライブラリを確認することができてとても便利です☆</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br />今回その中で、簡単に組み込めそうで今後使っていきたいと思っているものを紹介していきます(^O^)/</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">①PagedDragDropGrid</span></span></h3>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-r4Mc5NHycjU/U5nFvGWmPrI/AAAAAAAAbKA/TdtEW5gC0AU/s1600/DevAppsDirect001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-r4Mc5NHycjU/U5nFvGWmPrI/AAAAAAAAbKA/TdtEW5gC0AU/s1600/DevAppsDirect001.png" height="320" width="180" /></a><a href="http://3.bp.blogspot.com/-zorneihtta4/U5nFxGR87TI/AAAAAAAAbKI/9D31OsBfrFU/s1600/DevAppsDirect002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-zorneihtta4/U5nFxGR87TI/AAAAAAAAbKI/9D31OsBfrFU/s1600/DevAppsDirect002.png" height="320" width="180" /></a><a href="http://2.bp.blogspot.com/-x_ZpzYBsUL4/U5nFya5-bwI/AAAAAAAAbKQ/H0EJF7jKp0Q/s1600/DevAppsDirect003.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-x_ZpzYBsUL4/U5nFya5-bwI/AAAAAAAAbKQ/H0EJF7jKp0Q/s1600/DevAppsDirect003.png" height="320" width="180" /></a></div>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
このライブラリはグリッドで画像等を表示し、アイテムを長押しするとそのアイテムを別な場所に<br />
移動することができます。自動で並び替えをせず、ユーザーが好きに並び順を決めたい場合に<br />
使えるかと思います。<br />
<br />
データフォルダでは自動で並び替えているため使いドコロが今のところありませんが、<br />
いずれ新しいアプリででも使用してみたいライブラリです(^^)<br />
<br />
<br />
対応OS:Android2.2(API 8)以上<br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">②Showcase View</span></span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-JAQHtUUiL84/U5nRIDWm8aI/AAAAAAAAbKg/Uaeg3Qro8F8/s1600/DevAppsDirect004.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-JAQHtUUiL84/U5nRIDWm8aI/AAAAAAAAbKg/Uaeg3Qro8F8/s1600/DevAppsDirect004.png" height="320" width="180" /></a><a href="http://3.bp.blogspot.com/-eJTSg4VkJWs/U5nRIYi3tqI/AAAAAAAAbKo/-kxwj2qXPkw/s1600/DevAppsDirect005.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-eJTSg4VkJWs/U5nRIYi3tqI/AAAAAAAAbKo/-kxwj2qXPkw/s1600/DevAppsDirect005.png" height="320" width="180" /></a><a href="http://2.bp.blogspot.com/-S5YOy63jd4U/U5nRIZntFzI/AAAAAAAAbKk/nia5wi9b3KI/s1600/DevAppsDirect006.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-S5YOy63jd4U/U5nRIZntFzI/AAAAAAAAbKk/nia5wi9b3KI/s1600/DevAppsDirect006.png" height="320" width="180" /></a></div>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;">最近色々なアプリでみかけるようになったライブラリですね。</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;">ヘルプやチュートリアルなどで、操作の説明するときなどに使われています。</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;">ボタンを強調してテキストで説明したり、アニメーションによる解説、強調位置を移動させて順々に説明することができます。</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;">使える用途も多いかと思いますし、初回のチュートリアルなんかで丁寧に解説したいときに取り入れていきたいなと思っています。</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;">できれば説明なしに直感で使えるアプリにできることが理想ですけど、</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;">機能を増やすとどうしても説明が必要になってきますしね(^^;</span><br />
<br />
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">③ArchMenu</span></span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Nbpes2AtEV4/U5nTzl1nL6I/AAAAAAAAbK8/3PwGMdMpPao/s1600/DevAppsDirect007.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-Nbpes2AtEV4/U5nTzl1nL6I/AAAAAAAAbK8/3PwGMdMpPao/s1600/DevAppsDirect007.png" height="320" width="180" /></a><a href="http://1.bp.blogspot.com/-WRQTxbFMjJg/U5nTzusSAZI/AAAAAAAAbLA/rYvqRY_g_TM/s1600/DevAppsDirect008.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-WRQTxbFMjJg/U5nTzusSAZI/AAAAAAAAbLA/rYvqRY_g_TM/s1600/DevAppsDirect008.png" height="320" width="180" /></a><a href="http://3.bp.blogspot.com/-UOPsZkE5m5k/U5nTzhZaTQI/AAAAAAAAbLE/2bZJjmc1ybY/s1600/DevAppsDirect009.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-UOPsZkE5m5k/U5nTzhZaTQI/AAAAAAAAbLE/2bZJjmc1ybY/s1600/DevAppsDirect009.png" height="320" width="180" /></a></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">画面上には2つのボタンがありますが、左上のボタンをタッチするとボタンからみぎにメニューが飛び出します。</span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">その下のボタンをタッチすると右上にメニューがそれぞれ飛び出してきます。</span></span></div>
<div>
<span style="color: #333333; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;"><br /></span></div>
<div>
<span style="color: #333333; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">NEXUS5では解像度の関係でメニューが小さく表示されてしまっているようですが、調整できれば</span></div>
<div>
<span style="color: #333333; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">ビジュアル的にもよさ気なので、ゲーム等のアプリを作った際には試してみたいライブラリです。</span></div>
<div>
<span style="color: #333333; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;"><br /></span></div>
<div>
<span style="color: #333333; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">色々ライブラリを見つけてて思うのですが、使いドコロを考えるのが難しいですよね(^^;</span></div>
<div>
<span style="color: #333333; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;"><br /></span></div>
<div>
<span style="color: #333333; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">対応OS:Android 2.0以上</span></div>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"></span><br />
<a name='more'></a><span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">④IconicTextView</span></span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-VtXmafHqbtE/U5nVw8UIUiI/AAAAAAAAbLc/pfZzIxn6-wo/s1600/DevAppsDirect010.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-VtXmafHqbtE/U5nVw8UIUiI/AAAAAAAAbLc/pfZzIxn6-wo/s1600/DevAppsDirect010.png" height="320" width="180" /></a><a href="http://3.bp.blogspot.com/-m9z2Nvuk-Kk/U5nVw-JfAmI/AAAAAAAAbLU/5QTCCotXcWs/s1600/DevAppsDirect011.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-m9z2Nvuk-Kk/U5nVw-JfAmI/AAAAAAAAbLU/5QTCCotXcWs/s1600/DevAppsDirect011.png" height="320" width="180" /></a><a href="http://4.bp.blogspot.com/-P5sgLnDWeEQ/U5nVw59QOLI/AAAAAAAAbLY/dqF8JRH516o/s1600/DevAppsDirect012.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-P5sgLnDWeEQ/U5nVw59QOLI/AAAAAAAAbLY/dqF8JRH516o/s1600/DevAppsDirect012.png" height="320" width="180" /></a></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">このライブラリはアイコン付きTextViewを大量にサポートしています。</span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">このライブラリだけであれば、ツール系のアプリなら機能だけ加えるだけでアプリを簡単に開発できますね。</span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">アイコンを自分で用意するとそれなりに大変ですので、こういったライブラリがあるととても助かります。</span></span></div>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">⑤SuperToolTips</span></span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-VWzpqzg-NYQ/U5naX_IQhaI/AAAAAAAAbL0/8tQqVYvk6g8/s1600/DevAppsDirect013.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-VWzpqzg-NYQ/U5naX_IQhaI/AAAAAAAAbL0/8tQqVYvk6g8/s1600/DevAppsDirect013.png" height="320" width="180" /></a><a href="http://1.bp.blogspot.com/-oGybPEhc7fw/U5naXw_VZfI/AAAAAAAAbLw/TM9bgh5Gsqk/s1600/DevAppsDirect014.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-oGybPEhc7fw/U5naXw_VZfI/AAAAAAAAbLw/TM9bgh5Gsqk/s1600/DevAppsDirect014.png" height="320" width="180" /></a><a href="http://1.bp.blogspot.com/-JKY543PZc4A/U5naXzdbyFI/AAAAAAAAbL4/0FQjQuoZFCA/s1600/DevAppsDirect015.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-JKY543PZc4A/U5naXzdbyFI/AAAAAAAAbL4/0FQjQuoZFCA/s1600/DevAppsDirect015.png" height="320" width="180" /></a></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span></div>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;">このライブラリでは様々なツールチップを付け加えられます。</span><br />
<span style="color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small;"><span style="background-color: white; line-height: 18.200000762939453px;">左上の赤い</span></span><span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small; line-height: 18.200000762939453px;">ツールチップのように</span><span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small; line-height: 18.200000762939453px;">影をつけたり</span><span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small; line-height: 18.200000762939453px;">、右下の紫のツールチップのようにアイコンを表示したりできます。</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small; line-height: 18.200000762939453px;">ボタンをタッチするとボタンから飛び出てくるアニメーションや</span><span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: x-small; line-height: 18.200000762939453px;">別な場所から飛んできて表示することができます。</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;">ちょっとしたメッセージを表示するときにポップな感じで表現できますね(*^_^*)</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;">対応OS:Android3.0以上</span><br />
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">⑥ColorArt</span></span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-3vBUk5-X1Gg/U5ndv3II0GI/AAAAAAAAbMM/CL4mGRja12Q/s1600/DevAppsDirect016.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-3vBUk5-X1Gg/U5ndv3II0GI/AAAAAAAAbMM/CL4mGRja12Q/s1600/DevAppsDirect016.png" height="320" width="180" /></a><a href="http://2.bp.blogspot.com/-s7FfQ7m5QiE/U5ndxin0xpI/AAAAAAAAbMc/Ps0m6JbIiRY/s1600/DevAppsDirect017.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-s7FfQ7m5QiE/U5ndxin0xpI/AAAAAAAAbMc/Ps0m6JbIiRY/s1600/DevAppsDirect017.png" height="320" width="180" /></a><a href="http://4.bp.blogspot.com/-94hQOuAew8Q/U5ndwhNZl8I/AAAAAAAAbMQ/ov2zvYJ__cE/s1600/DevAppsDirect018.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-94hQOuAew8Q/U5ndwhNZl8I/AAAAAAAAbMQ/ov2zvYJ__cE/s1600/DevAppsDirect018.png" height="320" width="180" /></a></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">このライブラリでは、表示されている画像を読み取り、背景やテキストのカラーを自動的に設定してくれる</span></span><span style="color: #333333; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">ようです。</span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">画像解析して動的に画像に合わせた画面を作成できる点は、デザイン的にもとても良いので、</span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">どの場面で使おうか色々と考えていくと楽しくなりますね(^O^)♪</span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">データフォルダでも、ファイルの詳細画面で使ってみたいのですが、ライブラリの対応OSが4.0以上なのがネックです(--;</span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">対応OSが4.0以上とかだと、既存のアプリではなく新規のアプリに投入する方が無難ですね。</span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span></div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">対応OS:4.0以上</span></span></div>
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.200000762939453px;"><br /></span>
<br />
<div>
</div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'MS PGothic'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<h3 class="subtitle2" style="-webkit-text-stroke-width: 0px; background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: black; font-family: 'MS PGothic'; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; margin: 0px 0px 20px; orphans: auto; padding: 0.3em 0.5em; position: relative; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">最後に</span></span></h3>
</div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">その他にもたくさんのライブラリがあります。</span></span><br />
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">ここでは紹介しきれませんでしたが、まだまだ使えるライブラリも多くありますので、</span></span><br />
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">一度アプリをダウンロードして確認してみて試してもらえると良いかと思います。</span></span><br />
<br />
アプリの説明動画もありますので、こちらも確認してみてください。</div>
<div>
<span style="color: #333333; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span></div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/vm-i42QaVT4" width="480"></iframe></div>
k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-41741864213403510572014-05-28T00:18:00.001+09:002014-05-31T05:38:49.870+09:00【アプリ開発】アイコンに多言語のテキスト追加アイコン等の画像を用意するとき、テキスト付きのアイコンを用意する場合があると思います。<br />
<br />
以前にも<a href="http://k0j1-android.blogspot.com/2013/10/blog-post_22.html">【アプリ開発】画像への描画</a>について書きましたが、今回はボタン用のアイコンに<br />
多言語のテキストを描画してわざわざ多言語用のアイコンを用意せずにアプリで利用しようという<br />
方法になります(^^)<br />
<br />
自分もよくテキスト付きのアイコンを使っていたのですが、<br />
日本語以外の言語に対応する場合、他の言語用のアイコンを用意する必要が出てしまい、<br />
とても面倒でした(´・ω・`)<br />
<br />
なので、テキストなしのアイコンのみ用意して、<br />
プログラム内で画像にテキストを描画したものをBitmapとして使う方法がとても便利でしたので、<br />
紹介していきます♪<br />
<br />
<br />
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'MS PGothic'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<h3 class="subtitle2" style="-webkit-text-stroke-width: 0px; background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-style: normal; font-variant: normal; letter-spacing: normal; margin: 0px 0px 20px; orphans: auto; padding: 0.3em 0.5em; position: relative; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">用意するアイコン</span></span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-nsKU9OmOqvI/U4Skn2BmJUI/AAAAAAAAasE/HeL3x4YzZv4/s1600/ic_collections_labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-nsKU9OmOqvI/U4Skn2BmJUI/AAAAAAAAasE/HeL3x4YzZv4/s1600/ic_collections_labels.png" /></a><a href="http://4.bp.blogspot.com/-Z20rTbHKoAk/U4Skn4dw_QI/AAAAAAAAar8/4ryrbm4gI4c/s1600/ic_collections_folder.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-Z20rTbHKoAk/U4Skn4dw_QI/AAAAAAAAar8/4ryrbm4gI4c/s1600/ic_collections_folder.png" /></a><a href="http://1.bp.blogspot.com/-yAEHDquYm9A/U4Skn_zkVlI/AAAAAAAAasA/dD5jwhc6fu8/s1600/ic_content_discard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-yAEHDquYm9A/U4Skn_zkVlI/AAAAAAAAasA/dD5jwhc6fu8/s1600/ic_content_discard.png" /></a></div>
<div>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">最近データフォルダで追加したアイコンになりますが、</span></span></div>
<div>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">データフォルダで複数選択時、画面下に表示するテキスト無しのアイコンになります。</span></span></div>
<div>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span></div>
<div>
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">データフォルダでの複数選択時</span></span></h3>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-8MxFn76dHVE/U4Sl2l9WnKI/AAAAAAAAasY/5yVC3w_ec4Y/s1600/device-2014-05-27-234840.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-8MxFn76dHVE/U4Sl2l9WnKI/AAAAAAAAasY/5yVC3w_ec4Y/s1600/device-2014-05-27-234840.png" height="320" width="180" /></a> <a href="http://2.bp.blogspot.com/-DowOGjGgP7Q/U4Sm_WTwniI/AAAAAAAAask/8J72MqGPfOI/s1600/device-2014-05-27-235327.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-DowOGjGgP7Q/U4Sm_WTwniI/AAAAAAAAask/8J72MqGPfOI/s1600/device-2014-05-27-235327.png" height="320" width="180" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">アイコンにテキストを描画してBitmapとして使用しています。</span></span><br />
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">最初に用意したテキスト無しのアイコンだけで他言語用のアイコンを作成できるため、</span></span><br />
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">個別に各言語用のアイコンを用意する必要がありません。</span></span><br />
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'MS PGothic'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">描画処理</span></span></h3>
<div style="font-family: 'MS PGothic'; font-size: medium; line-height: normal;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">以下の関数に読み込んだアイコンのBitmapと書き込みたいテキストを渡して、</span></span></div>
<div style="font-family: 'MS PGothic'; font-size: medium; line-height: normal;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">テキストの色とサイズを指定すれば、画像の下部にテキストを追加できます。</span></span><br />
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"></span></span><br />
<a name='more'></a></div>
<div style="font-family: 'MS PGothic'; font-size: medium; line-height: normal;">
<br /></div>
</div>
</div>
<pre class="brush: java; first-line: 1; highlight: [,];" title=""> /*************************************
* 画像の下部に文字列を書き込み
*
* @param csBmp テキストを描画する画像
* @param strText 画像に描画する文字列
* @param nTextColor 描画する文字列の色
* @param nTextSize 描画する文字列のサイズ
* @return none
**************************************/
public static Bitmap DrawUnderTextOnBitmap(Bitmap csBmp, String strText, int nTextColor, int nTextSize)
{
Bitmap csTempBmp = csBmp.copy(csBmp.getConfig(), true);
Canvas csHisCanvas = new Canvas(csTempBmp);
Paint sTextPaint = new Paint();
sTextPaint.setColor(nTextColor);
sTextPaint.setTextSize(nTextSize);
int nW = 10;
int nH = csBmp.getHeight()-nTextSize-5;
csHisCanvas.drawText(strText, nW, nH, sTextPaint);
return csTempBmp;
}
</pre>
<br />
<div>
<div style="font-family: 'MS PGothic'; font-size: medium; line-height: normal;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">テキストの描画位置は画面下部で固定していますが、そのあたりは変更してアレンジ可能かと思いますので、</span></div>
<div style="font-family: 'MS PGothic'; font-size: medium; line-height: normal;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">ご活用ください。</span></div>
<div style="font-family: 'MS PGothic'; font-size: medium; line-height: normal;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;"><br /></span></div>
<div style="font-family: 'MS PGothic'; font-size: medium; line-height: normal;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">また、画像をコピーして使用しているため、メモリを画像1つ分余計に消費します。</span></div>
<div style="font-family: 'MS PGothic'; font-size: medium; line-height: normal;">
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">引数として渡された画像がimmutable(不変)な場合、Canvasに直接渡すとエラーとなります。</span></div>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">画像がmutableな場合には問題ないのですが、ここではmutableな画像をコピーして作成して、</span></span><br />
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">その画像にテキストを追加するようにしています。</span></span><br />
<span style="background-color: #fcfcfc; color: #555555; font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif; font-size: 15px; line-height: 27.489599227905273px;"><br /></span>
<span style="background-color: #fcfcfc; color: #555555; font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif; font-size: 15px; line-height: 27.489599227905273px;"></span><br />
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">API Level 11(3.0) 以上であれば、引数で渡すBitmapを</span></span></div>
<div>
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;"><br /></span></span></div>
<pre class="brush: java; first-line: 1; highlight: [,];" title="">BitmapFactory.Options options = new BitmapFactory.Options();
options.inMutable = true;
Bitmap csBmp = BitmapFactory.decodeResource(getResources(), R.drawable.z9, options);
</pre>
<br />
<br />
<div>
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">上記のようにオプションで指定してmutableな画像として生成すれば余計なメモリ消費はおされられます。<br />
(データフォルダではAPI Level 8で使用しているため、これは未使用です^^;)<br />
</span></div>
<div>
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;"><br /></span>
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">色々と活用できるシーンがあるかと思いますので、</span><br />
<span style="font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif; font-size: x-small; line-height: 27.200000762939453px;">他のアプリでも活用した場合には紹介していきます(^O^)</span></div>
<br />k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-66967947425002518552014-05-23T21:23:00.000+09:002014-05-23T21:31:19.371+09:00【WEB】円形プログレスCSSとJavaScriptとHTMLのコードだけで使えるブログ用のパーツとして使えるものが他にもありましたので、紹介します(^^)<br />
<br />
円形のプログレスが上がったり下がったりするアニメーションをしますが、<br />
カスタマイズすれば色々と使えるのではないかと思います。<br />
<br />
<br />
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">円形プログレス</span></span></h3>
<br />
<br />
<br />
<!-- Lets make a gauge chart using canvas and js -->
<canvas height="300" id="canvas" width="300">
</canvas>
<style type="text/css">
/*Centering the gauge*/
#canvas {
background: #333;
display: block;
width: 300px;
margin: 100px auto;
}
/*Custom font for numbers*/
@font-face {
font-family: "bebas";
src: url("http://thecodeplayer.com/uploads/fonts/BebasNeue.otf");
}
</style>
<script>
window.onload = function(){
//canvas initialization
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//dimensions
var W = canvas.width;
var H = canvas.height;
//Variables
var degrees = 0;
var new_degrees = 0;
var difference = 0;
var color = "lightgreen"; //green looks better to me
var bgcolor = "#222";
var text;
var animation_loop, redraw_loop;
function init()
{
//Clear the canvas everytime a chart is drawn
ctx.clearRect(0, 0, W, H);
//Background 360 degree arc
ctx.beginPath();
ctx.strokeStyle = bgcolor;
ctx.lineWidth = 30;
ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false); //you can see the arc now
ctx.stroke();
//gauge will be a simple arc
//Angle in radians = angle in degrees * PI / 180
var radians = degrees * Math.PI / 180;
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = 30;
//The arc starts from the rightmost end. If we deduct 90 degrees from the angles
//the arc will start from the topmost end
ctx.arc(W/2, H/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false);
//you can see the arc now
ctx.stroke();
//Lets add the text
ctx.fillStyle = color;
ctx.font = "50px bebas";
text = Math.floor(degrees/360*100) + "%";
//Lets center the text
//deducting half of text width from position x
text_width = ctx.measureText(text).width;
//adding manual value to position y since the height of the text cannot
//be measured easily. There are hacks but we will keep it manual for now.
ctx.fillText(text, W/2 - text_width/2, H/2 + 15);
}
function draw()
{
//Cancel any movement animation if a new chart is requested
if(typeof animation_loop != undefined) clearInterval(animation_loop);
//random degree from 0 to 360
new_degrees = Math.round(Math.random()*360);
difference = new_degrees - degrees;
//This will animate the gauge to new positions
//The animation will take 1 second
//time for each frame is 1sec / difference in degrees
animation_loop = setInterval(animate_to, 1000/difference);
}
//function to make the chart move to new degrees
function animate_to()
{
//clear animation loop if degrees reaches to new_degrees
if(degrees == new_degrees)
clearInterval(animation_loop);
if(degrees < new_degrees)
degrees++;
else
degrees--;
init();
}
//Lets add some animation for fun
draw();
redraw_loop = setInterval(draw, 2000); //Draw a new chart every 2 seconds
}
</script>
<br />
<br />
<br />
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">参考</span></span></h3>
<div>
<a class="logo" href="http://thecodeplayer.com/" style="background-color: #c1c8cb; color: white; font-family: 'Crete Round', serif; font-size: 18px; font-style: italic; font-weight: bold; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 0px 0px 10px; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.498039) 1px 1px 0px;">TheCodePlayer</a></div>
<br />
というサイトで他にも色々と使ってみたいコードがあります♪<br />
<br />
また良い物があれば紹介していきます~(^O^)/<br />
k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-67925416385176604252014-05-23T20:56:00.001+09:002014-05-23T21:00:28.442+09:00【WEB】計算機<style type="text/css">
/* Using box shadows to create 3D effects */
#calculator {
width: 325px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
/* Top portion */
.top span.clear {
float: left;
}
/* Inset shadow on the screen to create indent */
.top .screen {
height: 40px;
width: 212px;
float: right;
padding: 0 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
/* Typography */
font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
}
/* Clear floats */
.keys, .top {overflow: hidden;}
/* Applying same to the keys */
.keys span, .top span.clear {
float: left;
position: relative;
top: 0;
cursor: pointer;
width: 66px;
height: 36px;
background: white;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
margin: 0 7px 11px 0;
color: #888;
line-height: 36px;
text-align: center;
/* prevent selection of text inside keys */
user-select: none;
/* Smoothing out hover and active states using css3 transitions */
transition: all 0.2s ease;
}
/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
background: #FFF0F5;
margin-right: 0;
}
.keys span.eval {
background: #f1ff92;
box-shadow: 0px 4px #9da853;
color: #888e5f;
}
.top span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}
/* Some hover effects */
.keys span:hover {
background: #9c89f6;
box-shadow: 0px 4px #6b54d3;
color: white;
}
.keys span.eval:hover {
background: #abb850;
box-shadow: 0px 4px #717a33;
color: #ffffff;
}
.top span.clear:hover {
background: #f68991;
box-shadow: 0px 4px #d3545d;
color: white;
}
/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
box-shadow: 0px 0px #6b54d3;
top: 4px;
}
.keys span.eval:active {
box-shadow: 0px 0px #717a33;
top: 4px;
}
.top span.clear:active {
top: 4px;
box-shadow: 0px 0px #d3545d;
}
</style>
<script>
// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
// Add onclick event to all the keys and perform operations
for(var i = 0; i < keys.length; i++) {
keys[i].onclick = function(e) {
// Get the input and button values
var input = document.querySelector('.screen');
var inputVal = input.innerHTML;
var btnVal = this.innerHTML;
// Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
// If clear key is pressed, erase everything
if(btnVal == 'C') {
input.innerHTML = '';
decimalAdded = false;
}
// If eval key is pressed, calculate and display the result
else if(btnVal == '=') {
var equation = inputVal;
var lastChar = equation[equation.length - 1];
// Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
// Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
if(operators.indexOf(lastChar) > -1 || lastChar == '.')
equation = equation.replace(/.$/, '');
if(equation)
input.innerHTML = eval(equation);
decimalAdded = false;
}
// Basic functionality of the calculator is complete. But there are some problems like
// 1. No two operators should be added consecutively.
// 2. The equation shouldn't start from an operator except minus
// 3. not more than 1 decimal should be there in a number
// We'll fix these issues using some simple checks
// indexOf works only in IE9+
else if(operators.indexOf(btnVal) > -1) {
// Operator is clicked
// Get the last character from the equation
var lastChar = inputVal[inputVal.length - 1];
// Only add operator if input is not empty and there is no operator at the last
if(inputVal != '' && operators.indexOf(lastChar) == -1)
input.innerHTML += btnVal;
// Allow minus if the string is empty
else if(inputVal == '' && btnVal == '-')
input.innerHTML += btnVal;
// Replace the last operator (if exists) with the newly pressed operator
if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
// Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
input.innerHTML = inputVal.replace(/.$/, btnVal);
}
decimalAdded =false;
}
// Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.
else if(btnVal == '.') {
if(!decimalAdded) {
input.innerHTML += btnVal;
decimalAdded = true;
}
}
// if any other key is pressed, just append it
else {
input.innerHTML += btnVal;
}
// prevent page jumps
e.preventDefault();
}
}
</script>
<br />
CSSとJavaScriptとHTMLのコードだけで使える計算機を見つけましたので紹介します(^^)<br />
(ブログでちゃんと動くかは未確認ですが(^^;))<br />
<br />
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">計算機</span></span></h3>
<br />
<br />
<br />
<div id="calculator">
<!-- Screen and clear key -->
<div class="top">
<span class="clear">C</span>
<div class="screen"></div>
</div>
<div class="keys">
<!-- operators and other keys -->
<span>7</span>
<span>8</span>
<span>9</span>
<span class="operator">+</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span class="operator">-</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class="operator">÷</span>
<span>0</span>
<span>.</span>
<span class="eval">=</span>
<span class="operator">x</span>
</div>
</div>
<!-- PrefixFree -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script><br />
<br />
<br />
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
<span style="font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, MS Pゴシック, sans-serif; font-size: x-small;"><span style="line-height: 27.200000762939453px;">参考</span></span></h3>
<div>
<a class="logo" href="http://thecodeplayer.com/" style="background-color: #c1c8cb; color: white; font-family: 'Crete Round', serif; font-size: 18px; font-style: italic; font-weight: bold; line-height: 24px; margin: 0px; outline: 0px; padding: 0px 0px 0px 10px; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.498039) 1px 1px 0px;">TheCodePlayer</a></div>
<div>
<br /></div>
<div>
というサイトで他にも色々と使ってみたいコードがあります♪</div>
<div>
また良い物があれば紹介していきます~(^O^)/</div>k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com0tag:blogger.com,1999:blog-5550332707924765092.post-39850016254376478912014-05-09T02:35:00.002+09:002014-05-09T02:38:26.628+09:00【アプリ開発】CSVファイル読込クラスCSVファイルを読み込むだけの汎用的なクラスが欲しくて作成しました(^^;<br />
<br />
<br />
<h3 class="subtitle2" style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;">
CSVファイル読込クラス</h3>
<div>
<br /></div>
<pre class="brush: java; first-line: 1; highlight: [,];" title="">/***************************************************************************
* CSVコントロールクラス
***************************************************************************/
public class CSVCtrl
{
/***************************************************************************
* CSVファイルから読み込んだデータリストを取得
*
* @param csContext コンテキスト
* @param strCsvFileName CSVファイル名
* @return 読み込んだCSVデータリスト
*
* @author k0j1
***************************************************************************/
static public List<stringtokenizer> ReadCSV(Context csContext, String strCsvFileName)
{
InputStream csInputStream = null;
BufferedReader csBufReader = null;
List<stringtokenizer> sCsvList = new ArrayList<stringtokenizer>();
try
{
AssetManager csAsset = csContext.getResources().getAssets();
csInputStream = csAsset.open(strCsvFileName);
csBufReader = new BufferedReader(new InputStreamReader(csInputStream));
// タイトル処理
// タイトルは読み捨てる
csBufReader.readLine();
// データ処理
{
// 最終行まで読み込む
for( String line = ""; (line = csBufReader.readLine()) != null; )
{
// 1行をデータの要素に分割
StringTokenizer csStringToken = new StringTokenizer(line, ",");
// リストに保持
sCsvList.add(csStringToken);
}
csBufReader.close();
}
} catch (FileNotFoundException e) {
// Fileオブジェクト生成時の例外捕捉
e.printStackTrace();
} catch (IOException e) {
// BufferedReaderオブジェクトのクローズ時の例外捕捉
e.printStackTrace();
}
return sCsvList;
}
}
</pre>
<br />
<br />
上記の関数で以下のような最初の1行がタイトル行であるCSVファイルを処理できます。<br />
<br />
<br />
❏timetable.csv
<br />
<pre class="brush: java; first-line: 1; highlight: [,];" title="">番号,50音順(1:あ行、2:か行、…),地域区分,区,愛称,経路区分,経路・時刻表名,URL
1,1,1,荒川区,さくら・汐入さくら,1,運行ルート,http://yamatocreation.cocotte.jp/bus/arakawa/keiro
2,1,1,荒川区,さくら・汐入さくら,2,さくら時刻表,http://yamatocreation.cocotte.jp/bus/arakawa/sakura
3,1,1,荒川区,さくら・汐入さくら,3,汐入さくら時刻表,http://yamatocreation.cocotte.jp/bus/arakawa/sioiri
4,1,1,荒川区,さくら・汐入さくら,4,町屋さくら時刻表,http://yamatocreation.cocotte.jp/bus/arakawa/matiya
:
</pre>
k0j1http://www.blogger.com/profile/16212492553887957782noreply@blogger.com2