CSSを使って画像をぼかしたり戻したりしよう

今回はCSSを使って画像をぼかしてマウスポインターを乗せると画像を戻す処理をしてみます。

CSSを使用するので、Photoshopを使ったりすることなく簡単にできます。

SCP財団の方はもう少し下から読んでください。

まずはソースから

スタイルシート
<style>
.frame{
    width:300px;
    max-width:100%;
    float: right;
    clear: right;
    margin: 0 2em 1em 2em;
    border: solid 5px #666;
    box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.img{
    -webkit-filter: blur(16px);
    filter: blur(16px);
    -webkit-transition: .1s;
    transition: .1s;
}
.img:hover{
    -webkit-filter: blur(0);
    filter: blur(0);
}
</style>


HTML
<div class="frame">
<img class="img" src="sample.jpg" />
</div>



簡単な解説

filter: blur(16px)
画像をぼかすには、filterプロパティのblurという関数を使います。
blurの括弧内の数値が大きいほどぼかしが強くなります。
0は、ぼかしがない状態です。

まずはスタイルシートで画像をぼかします。

マウスポインターを乗せたときの動きは疑似クラス「ホバー(:hover)」を使います。 

.img:hover{
    -webkit-filter: blur(0);
    filter: blur(0);
}
HTMLで定義したimg内にマウスポインタが乗ったときに、blurの数値を0にしています。

transitionは、ぼかしが変化するまでの時間を設定しています。

SCP財団の方はこちら↓

[[module CSS]]
.frame{
    width:300px;
    max-width:100%;
    float: right;
    clear: right;
    margin: 0 2em 1em 2em;
    border: solid 5px #666;
    box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.img{
    -webkit-filter: blur(16px);
    filter: blur(16px);
    -webkit-transition: .1s;
    transition: .1s;
}
.img:hover{
    -webkit-filter: blur(0);
    filter: blur(0);
}
[[/module]]
[[div class="frame"]]
[[image http://scp-jp-sandbox2.wikidot.com/local--files/techno-senmon/S__5242896.jpg 
class="img" alt="hand" title="SCP-XXX-JPに布団を持参しようとするSCP-XXX-JP-1"]]
◇グロ注意◇
カーソルを合わせるとモザイクが取れます
[[/div]]

動いている理屈は上記の通りで、wikidot用にタグを書き換えています。





let's fun!






[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]
価格：2138円（税込、送料無料) (2018/11/13時点)

楽天で購入

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

知識ゼロからのJavaScript入門 [ 小笠原寛 ]
価格：2570円（税込、送料無料) (2018/11/13時点)

楽天で購入

時刻: 0 件のコメント:
ラベル: , , ,
前回に引き続きscp用につかったjavascriptの解説をします。

今回はページの内容を切り替える方法です。

では早速ソース
<script type="text/javascript">
var flg =0;
function btn(){
  if(flg==0){
       document.getElementById("pro1").style.display="none";
       document.getElementById("pro2").style.display="block"; 
       flg = 1 ;
  }else{
       document.getElementById("pro1").style.display="block";
       document.getElementById("pro2").style.display="none"; 
       flg = 0 ;
  }
}
</script>
<div id="pro1" style="display: block;">
内容①
</div>
<div id="pro2" style="display: none;">
内容②
</div>
<input type="button" value="ボタン" onclick="btn();">

divに囲まれた内容をstyle.displayを用いて表示の切り替えをしています。

displayがblockなら表示、noneなら非表示

これをボタンが押されたときに切り替えるように、javascriptで制御しています。





HTML、CSS、javascriptのお勉強
[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]
価格：2138円（税込、送料無料) (2018/11/7時点)

楽天で購入



時刻: 0 件のコメント:
ラベル: , ,

【javascript】ポップアップ表示（Alert）について

こんにちは

ちょっと最近SCPでcss+jsをやるようになったので少し解説と備忘録
<script type="text/javascript">
window.onload = function(){
    alert("xxxxx");
}
</script>

window.onloadは、ページが読み込まれた際に動きます。
alertで、ポップアップ表示されます。

ボタンを押したら動くようにしたい場合は、onclickを使います。
<script type="text/javascript">
function test(){
    alert("xxxxx");
}
</script>

<input type="button" value="ボタン" onclick="test();">

このポップアップは、ブラウザに依存します。
「SweetAlert」を使用すればスタイリッシュにデザインできます。 
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script type="text/javascript">
$(function(){
     swal({
    title: "タイトル",
    text: "内容",
        confirmButtonText: 'OK',
        confirmButtonColor: '#DD6B55'
    });
});
</script>


SweetAlertはJQueryをつかっているので、window.onloadは、$で省略しています。

色々オプションつけてカスタマイズできるので
詳しくは公式サイトをチェックしてみてください。

HTML、CSS、javascriptのお勉強
[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]
価格：2138円（税込、送料無料) (2018/11/7時点)

楽天で購入



時刻: 0 件のコメント:
ラベル: , ,

4K/8Kテレビ放送に伴う消費者負担について

4K/8Kテレビ放送に伴う消費者負担について


とりあえずwikipediaより↓

Jump to navigationJump to search
4K 8Kテレビ放送（よんけーはちけーテレビほうそう）は、現行の高精細度テレビジョン放送、1080i（2K）や720pに比べ、映像・動画の解像度（画素数）が高い映像4Kや8Kの「スーパーハイビジョン」で行われる放送の通称。
2013年に次世代放送推進フォーラム（NexTV-F）が設立され試験放送を行った。[1]2016年4月1日にはNexTV-Fとデジタル放送推進協会（Dpa）が合併し、放送サービス高度化推進協会（A-PAB）が発足[1]。
2018年12月1日からは、BSで本格的に家庭向け4K・8K放送が行われる。


ざっくり言うと、「新しく高画質な放送をしますよ」

放送を見るためには対応したテレビやチューナーを買わないといけません。
そのテレビやチューナーにはACASチップというものが埋め込まれています。

なぜACASチップなのか

ACASチップは、B-CASカードと同等の機能です。
チップにする背景として、カードの不正改ざん事件があり、セキュリティ強化のためにチップ化してテレビに内蔵するわけです。
今後はACASチップ内蔵が標準にしたいようです。


そもそもB-CASカードってなんだっけ

テレビを購入した際にいっしょに入っている赤のカードです。
テレビに挿入しないと番組を見ることができません。

このカードの目的は２つ
　①著作権保護
　②限定受信機能

 ②は有料放送のためのもので、契約してお金を払っていない人が有料チャンネルを見られないように制御しているわけです。

ちなみにこのカードの所有権はB-CAS社にあります。
譲渡や売買は著作権法違反となります。

地上波を見るのにカードを使っているのは世界でも日本くらいなガラパゴスなシステムです。

所謂利権の塊でしょうか。。。
約20名の会社で売り上げは約100億、出資はNHKやBSデジタルテレビ事業社で社長は元NHK総務局長。

これを天下りといわずなんというのか。

じゃあなぜACASチップにするのか

前述のとおりセキュリティ強化が表面上の理由。
裏の理由は、テレビに対して契約状況が紐づけられることにあります。
「このテレビNHKの受信契約とってないじゃーん」とすぐわかります。

 NHKのための機能ですよね。


ACASチップになるメリット

ないんじゃないかな。。。

ACASチップになるデメリット

１．チップ料金負担は消費者
　（B-CASカードはテレビ局が負担しているそうです）

２．チップが壊れた際の修理費ももちろん消費者

３．NHKからの集金人がすぐやってくる


たぶんほとんどの人がACASチップのことを知らないと思います。

ですが、一般社団法人新CAS協議会というのが立ち上がり、もう4K/8K放送がはじまるといっているんです。

消費者への説明はないのだろうか









続きを読む »
時刻: 0 件のコメント:
ラベル:

プログラミング言語は何からはじめたらよいのか

プログラミング言語は何からはじめたらよいのか

 結論から言うとなんでもいいです。


 言語によってそれぞれ特徴があります。
これを作るならこの言語がいい！っていうのはありますが、
特に作りたいものはないけど勉強したいという人は、なんでもいいです。

 日本語でも、標準語が理解できれば関西弁も津軽弁もある程度は理解できるように
javaが理解できればC#もpythonもそこまで学習コストはかからないはずです。

言語別の特徴を記載しておきます。

 【swift】
iOS（iPhone）、Mac、Apple TV、Apple Watchで利用するアプリが作成できる。
開発にはMacが必要。

 【php】
多くのWEBサイトで利用されている。

 【c#】
ゲーム開発などで利用されている。

 【c】
組み込み系（家電、ロボットなど）とや、研究のシミュレーション、家庭用ゲーム機のプログラミングで使用されている。

 【java】
システムエンジニアなら誰でも知っているくらいの流行の言語。
業務アプリからAndroidまでなんでも作れる。

 【python】
今人気急上昇中の言語。
記述ルールによりソースコードが見やすい。
人工知能のプログラミングに利用されている。

時刻: 0 件のコメント:
ラベル: ,

サマータイムは何がいいのか

こんにちは

最近話題になっているサマータイム

 サマータイムってなんなの？オリンピックと何の関係が？ってのを説明します
メリット・デメリットも記載しようと思いましたが、メリットを感じなかったのでカット



サマータイムとはなんぞや

1年のうち夏を中心とする時期に太陽が出ている時間帯を有効に利用する目的で、
標準時を1時間進める制度またはその進められた時刻のこと
夏の日照時間が長い欧米諸国などで多く導入されています

 昼間の明るいうちに仕事をし、夜の余暇時間を長く持ちましょうということです

東京オリンピックとなんの関係があるのか

 夏のオリンピックはとても暑いです。暑い時間を避けてスタートしたいので、
サマータイム導入してズラしませんか？という森元さんのご意見

 それに対して政府は、2019年と2020年の2年間限定で、サマータイムを導入するための検討を本格的に始めた

 この対象は全国です。東京だけではございませんので要注意。
もしサマータイムが導入されてしまったら

 サマータイム導入当日、あらゆる手持ちの時計の針を1時間すすめましょう！
もし忘れたら学校や会社に必ず遅刻します
電波時計は捨てましょう

 ちなみにサマータイム導入当日は、1日が1時間になります
（サマータイム終了時に1日が25時間になって相殺）
このサマータイムによる時差で生活リズムが乱れます
今より早く起床しなければなりませんからね
この件で一番怯えているのはシステムエンジニアではないでしょうか
2000年問題の再来ですね
2019年にはサマータイムのお試し導入があるそうなので、
もう1年も猶予がありませんね。。。


最後に

たぶんサマータイムは実現しないと思います
無理がありすぎる

競技時間ずらせばいいんじゃないのかしら

というか世界基準時間でやるのでは？



まぁ頑張ってくれや（他人事）




時刻: 0 件のコメント:
ラベル:

【シンタックスハイライター】Bloggerにソースコードを記載しよう

ソースコードをブログに記載するときに、なるべくキレイに見せることができないか。
Google code-rettifyを使ってみます。


 ブログのヘッダーを編集してスクリプトやCSSを利用できるのでBloggerはかなりオススメです。
 というわけでヘッダーを編集します。
①左メニューの「テーマ」を選択し、「HTMLの編集」ボタンを押す。


②ブログのヘッダーに、以下を記述します。 

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"><script>

③デフォルト設定では、5行おきにしか行番号を記述してくれないので、CSSを加えます。 ここはお好みですが、私は下記のCSSを記載しています。 


pre.prettyprint {
 margin: 0;
 padding: 0 0 0 25px;
 background-color: #FFF;
 border: 1px dotted #888;
  white-space: pre;
  overflow: auto;
}
ol.linenums {
 margin-top: 0;
 margin-bottom: 0;
 background-color: #FFF;
}
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {
 padding-left: 15px;
 line-height: 1.5;
 border-left: 2px solid #6CE26C;
list-style-type: decimal;
}
li.L1,li.L3,li.L5,li.L7,li.L9 {
 background: #F8F8F8;
}


④ブログを書く。 HTMLモードで記事を書きます。 

 ソースコードは、<pre class="prettyprint"> </pre>で囲みます。

行番号を表示する場合は、<pre class="prettyprint linenums"> </pre>

時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)

CSSを使って画像をぼかしたり戻したりしよう

今回はCSSを使って画像をぼかしてマウスポインターを乗せると画像を戻す処理をしてみます。 CSSを使用するので、Photoshopを使ったりすることなく簡単にできます。 SCP財団の方はもう少し下から読んでください。 まずはソースから スタイルシート <s...

  • CSSを使って画像をぼかしたり戻したりしよう
    今回はCSSを使って画像をぼかしてマウスポインターを乗せると画像を戻す処理をしてみます。 CSSを使用するので、Photoshopを使ったりすることなく簡単にできます。 SCP財団の方はもう少し下から読んでください。 まずはソースから スタイルシート <s...
  • サマータイムは何がいいのか
    こんにちは 最近話題になっている サマータイム サマータイムってなんなの？オリンピックと何の関係が？ってのを説明します メリット・デメリットも記載しようと思いましたが、メリットを感じなかったのでカット サマータイムとはなんぞや 1年のうち夏を中心とする時期...
  • プログラミング言語は何からはじめたらよいのか
    プログラミング言語は何からはじめたらよいのか 結論から言うとなんでもいいです。 言語によってそれぞれ特徴があります。 これを作るならこの言語がいい！っていうのはありますが、 特に作りたいものはないけど勉強したいという人は、なんでもいいです。 日本語でも、標準語...