So-net無料ブログ作成
パソコン ブログトップ

CSS:連続写真を重ねてX'masイルミネーションやスライドショーをブログで表示したい。② [パソコン]

htmlとcssファイルはU-page+、画像はブログにUPした画像でスライドショー表示しました。


htmlファイルの例
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>CSSでイルミネーション・html画像指定</title>
    <link rel="stylesheet" href="irumi5.css" type="text/css">
  </head>
<body>
<br> <br> CSS スライドショーのテスト<br> <br>
⑤イルミネーション・html画像指定
<DIV class="photo-illumination5">
 <IMG  src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8335.JPG">
 <IMG  src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8390-e8fc7.JPG">
 <IMG  src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8260-752ae.JPG">
 <IMG  src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_1075-7ff11.JPG">
 <IMG  src="http://suikasuship.blog.so-net.ne.jp/_images/blog/_82a/suikasuship/m_IMG_8390-e8fc7.JPG">
</DIV>
</body>


ブログ画像ファイルのURL調査方法

  ①画像をブログに登録する。(下書き保存)


  ②公開してるページから画像を開きサムネイルを表示させる。PhotoList.png
 

③サムネイルを右クリックでプロパティを表示させる。property.png

  ④URLをコピーしてU-page+のhtmlに設定する。



CSSファイルの内容(irumi5.css


.photo-illumination5 {    /* CSS クラス名 photo-illumination5                */
    height: 800px;          /* 表示したい大きさ                                         */
    margin: 0 0 -120 0;   /* 上右下左のマージンをまとめて指定する            */
    max-width: 100%;    /* 領域の幅の最大値                                         */
    position: relative;      /* ボックスの配置方法 relative=絶対位置への配置 */
    width: 800px;           /* 表示したい大きさ、height と合わせる              */
}


.photo-illumination5 img {     /* CSS クラス名 photo-illumination5 の 子孫セレクタ = img */
    animation: illum5show 10s infinite; /* アニメーションプロパティ一括指定 空白で区切る   */
        /* animation-name、 animation-duration、 animation-timing-function、*/
        /* animation-delay、animation-iteration-count、 animation-direction    */
        /* animation-name アニメーション名 = illum5show                               */
        /* animation-duratio アニメーション一回分の時間の長さを指定 秒              */
        /* animation-iteration-count 繰り返し回数を指定 infinite=無限                */
    -webkit-animation: illum5show 10s infinite;  /* -webkit-  ベンダープレフィックス Chrome、Safari指令 */
    height: auto;             /* 領域の高さを指定 自動設定                               */
    max-width: 100%;    /* 領域の幅の最大値                                            */
    opacity: 0;                /* 要素の透明度を指定 0.0(完全に透明)               */
    position: absolute;     /* ボックスの配置方法  絶対位置=画像を全て重ねる  */
}


/* @keyframes = アニメーションのキーフレーム (通過点)で制御する */
@keyframes illum5show {      /* animation-name illum5show のキーフレームを指定            */
    0% {opacity:0}         /* opacity(要素透明度指定) 0.0(完全に透明)~1.0(完全に不透明) */
    0.2% {opacity:1}      /* 5個の画像なので1つ20%で不透明にする                                   */
    20% {opacity:1}       /*  */
    20.2% {opacity:0}
 }
/* -webkit- = ベンダープレフィックス Chrome、Safari指令 */
@-webkit-keyframes illum5show {
    0% {opacity:0}       /* opacity(要素透明度指定) 0.0(完全に透明)~1.0(完全に不透明)*/
    0.2% {opacity:1}    /* 5個の画像なので1つ20%で不透明にする                                  */
    20% {opacity:1} 
    20.2% {opacity:0}
}


/* 各画像のアニメーションの開始時間をずらす                                                */
/* CSS クラス名 photo-illumination5                                                          */
/* E:nth-of-type(n) 、疑似クラス、 n番目のその種類の要素にスタイルを適用する */
.photo-illumination5 img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}
.photo-illumination5 img:nth-of-type(2) {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}
.photo-illumination5 img:nth-of-type(3) {
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}
.photo-illumination5 img:nth-of-type(4) {
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}
.photo-illumination5 img:nth-of-type(5) {
    animation-delay: 8s;
    -webkit-animation-delay: 8s;
}


確認です。



ダイエット中、7月末に84Kgでスタートして 現在体重81.4Kg  年末までに80Kgが目標

nice!(1)  コメント(2) 
共通テーマ:旅行

CSS:連続写真を重ねてX'masイルミネーションやスライドショーをブログで表示したい。 [パソコン]

ブログでクリスマス・ツリーが点滅している様子を再現したくてテストしています
タイトルをクリックするとCSSアニメーションのページにリンクします。



使いまわしがしたいので①から④まで同じCSSで行っています。
htmlは5枚の連続写真を<DIV class="photo-illumination5">で囲みます。

  <body>
  <br> <br> CSS スライドショーのテスト<br> <br>
  ①(5枚の連続写真) お台場・X'masツリーとレインボーブリッジ
  <DIV class="photo-illumination5">
     <IMG  src="./IMG_8333.JPG">
     <IMG  src="./IMG_8334.JPG">
     <IMG  src="./IMG_8335.JPG">
     <IMG  src="./IMG_8336.JPG">
     <IMG  src="./IMG_8337.JPG">
  </DIV>
  </body></html>


今のところ、(U-Page+)にcss、html、画像ファイルを置いた場合はOK。
後はブログのcss編集での確認になります。
 cssアニメーションはかなりCPUを食いそう。
 ①から④を一気に表示させたらスマホではカクカクした表示でした。
なので今回のテストのようにU-Page+にリンクした方が良さそうです。
その場合はU-Page+は10mByteしかないので写真はブログに登録してU-Page+のhtmlから画像をリンクできるか?

作成したCSSは IE、Chrome、Safari だけ対応しています。

今回はここまでにします。


ダイエット中、7月末に84Kgでスタートして 現在体重81.4Kg  年末までに80Kgが目標

るるぶ東京 舞浜 お台場'14 (国内シリーズ) まっぷる イタリア mini '18 (まっぷるマガジン)

nice!(1)  コメント(0) 
共通テーマ:旅行

エクセル、今日のおかずは何が良いですか?回転CSSで遊んでみました。 [パソコン]

DSCN9513.jpg

何年か前にエクセルで作成しようとした「食べたいおかずリスト」を流用しました。

別ウィンドウが開きますおかずは何が良いですか?

行の中央付近をカーソルでタッチすると回転します。
本当はランダムに今日の「おかず」と「果物」が出てくれば良いなと思っていたのですが
「おかず」を考えることが大変で中断しています。
変にエクセルで合成された「牡蛎のけんちん汁」とかでてきます。
(冬に食べてみたい気もするけど。)

エクセルじゃなくても良いじゃないか  は ・・・聞き流しますヽ(^。^)ノ

ブラウザによっては回転しません。
IE11   回転しません
chrome  回転しました
Firefox 回転しました


ダイエット中、7月末に84Kgでスタートして 現在体重81.9Kg  年末までに80Kgが目標


nice!(2)  コメント(0) 
共通テーマ:趣味・カルチャー

エクセル、未入力のセルに移動して点滅表示させる方法 [パソコン]

エクセルで指定した順番にセルを移動して情報を入力させたい場合があります。
例えば 

以下の例では年齢の7を入れてenterで電話番号のセルに移動しています。
マクロを使用しますがセルの背景色を変更することなく目立たせることができます。
タイマーは使用していません、点滅はセルをコピーした時に枠が点線になって回転する表示になります
inputblink1.png


方法:
① 次にどこを入力すべきかを判定するVLOOKUP表を作ります。
 緑の部分はセルの位置
 黄色の部分はセルの位置の文字をコピー
 青はVLOOKUPの結果
黄色のセルは上から順番に=c3,=c4,=g4,=c6,0 を設定します。最後の0はストッパーです。
緑のセルは上から順にc3,c4,g4,c6,a1 を設定します。
青のセルは=VLOOKUP(0,J3:K7,2,FALSE)で黄色のセルの0を見つけて次に入力すべき緑のセルを求めています。
例では黄色が0の横のc6を求めています。c6は電話番号のセルですinputblink2.png


②マクロでEnterを押された時に指定されたセルをコピーさせます。
指定されたセルとははここの例では青のセル(j2)です。
マクロは標準モジュールとして登録してください。
Auto_Openはエクセルを開いたときに実行される関数です。名前は変えないでください。


Sub Auto_Open()
    '自動実行マクロの定義
    'Sheet1アクティブになったら
    Worksheets("Sheet1").OnSheetActivate = "Sheet1sub"
    'Sheet1以外がアクティブになったら
    Worksheets("Sheet1").OnSheetDeactivate = "Sheet2sub"

End Sub

'============================================
'Sheet1がアクティブになった時に実行されるマクロ
'============================================
Sub Sheet1sub()
    'テンキーのEnter
    Application.OnKey "{Enter}", "BlinkerSub"
    '大きいEnter
    Application.OnKey "~", "BlinkerSub"
    'ブリンカー表示
    BlinkerSub
End Sub

'================================================
'Sheet1以外がアクティブになった時に実行されるマクロ
'================================================
Sub Sheet2sub()
    'テンキーのEnter割り当て解除
    Application.OnKey "{Enter}"
    '大きいEnter割り当て解除
    Application.OnKey "{~}"

End Sub
'================================================
'ブリンカーマクロ
'================================================
Sub BlinkerSub()
'目立たたせます。 コピーセルはj2に指定
    Range(Range("j2")).Select
    Selection.Copy
End Sub

nice!(0)  コメント(0) 
共通テーマ:パソコン・インターネット

セルの参照トレース [パソコン]

エクセルでセルがどこで参照されているか? すぐわかる方法が用意されていました。


調べたいセルを選択して 数式タブ → 参照先のトレース で矢印を引いてくれます。

Microsoft Excel 2016 (最新)|カード版|Win対応

Microsoft Excel 2016 (最新)|カード版|Win対応

  • 出版社/メーカー: マイクロソフト
  • メディア: License


自分で作成した税金計算(定年キャッシュフロー)の計算対象年齢で調べてみた

sanshou.png


sen.png


nice!(0)  コメント(0) 
共通テーマ:パソコン・インターネット

VLOOKUPでの複合条件検索 [パソコン]

LPCashflowを作る時にVLOOKUP関数で控除条件を求めたので 備忘録。

Microsoft Excel 2016 (最新)|オンラインコード版|Windows版







VLOOKUP関数では65歳未満でかつ収入が130万以下などの複合条件が使えません。
そのため あらかじめIF関数で条件に一致する場合は〇、一致しない場合は×を設定してその〇×をLOOKUP関数で検索しています。



4nennkinnkoujyo.png

最初に複合条件に合致するかIF文で〇×を設定します。


IF(AND(S20<B27, F20 < D27),"〇","×")

引数1 論理式
 AND   で複合条件の論理積を指定します。
 S20 (計算対象年齢)
 B27 (表の年齢)
 F20 (公的年金等収入額)
 D27 (表の公的年金等収入額)
引数2 真の場合の返却値 
引数3 偽の場合の返却値


 (計算対象年齢)が63で (公的年金等収入額)が200の場合は図のように最初の行が×になります。



VLOOKUP関数で上から順に〇を見つけさせます。


=VLOOKUP("〇",I27:O34, 2,FALSE)
引数1 検索する文字列
引数2 検索する表の範囲、上から順に検索していきます
引数3 取り出したいデータの列位置
引数4 データが見つからなかった場合の返却値の指定、
    FALSE 「#N/A」エラー
    TRUE   そのデータを超えない最大値を検索


最初に見つけた〇の行で公的年金控除額を求めています
所得税の配偶者控除額
住民税の配偶者控除額
所得税率 もVLOOKUPで求めています。

現在84Kg 変化なし。 目標は年末に80Kg



nice!(0)  コメント(0) 
共通テーマ:パソコン・インターネット

Windows10にしたらプチフリしたけどドライバーの再インストールで直った [パソコン]

Windows7のノートパソコンをSSDに換装してWindows10にして使用していたのですがプチフリが多発していました。


現象は
 Windiwsを起動、停止するときHDDがIO中になり2分ぐらいプチフリすることがある。
 インターネットブラウザを起動する時、違うページに移動する時など30秒ぐらいプチフリすることがある。
 イベントビューアでみるとエラーが多発している。
   ディスク 0 xxxx の論理ブロック アドレス xx で IO操作が再試行されました。


自分でSDDに換装して相性が悪いのかなと、しばらく我慢して使っていましたがもしかしてドライバー?
と思い直してメーカーのサイトからストレージドライバーをダウンロードしてインストールしたら直ったようです。


構成
 Lenovo G570
 RAM 8GB
 64Bit
 Core-i5
 Windows7 → Windows10 無料アップデート
 SSD CFD販売 SSD 256GB 2.5inch TOSHIBA製 内蔵型 SATA6Gbps CSSD-S6T256NHG6Q
 常駐アプリは eset SMART SECURITY8


lenovoのサイトからWindows7用のドライバーをダウンロードして再インストール
 Intel ラピッド・ストレージ・テクノロジー Windows 7 (32bit, 64bit) - Lenovo G570
 IN1RST08WW5.exe


インストールして3,4日しますが順調 ヽ( ^∀^)ノ 
10.6Gのファイルコピーが 87秒。

タグ:プチフリ G570
パソコン ブログトップ