わけいの多肉ブログ

wakeiコラージュより 前回ご紹介した「バックグラウンド的にふわっと表示が切り替わるスライドショー」のソースを紹介したいと思います。 非常に長かったので、思い切って不要な部分を削除し短くしました。 バックグラウンド的にふわっと表示が切り替わるスライドショー …

続きを読む

ズームしながらふわっと表示が切り替わるスライドショー ズームしながらフェードイン・フェードアウトしてふわっと表示が切り替わるスライドショーです。 wakei バックグラウンド的にふわっと表示が切り替わるスライドショー バックグラウンド的に大きなサイズ表示です。 使用してい…

続きを読む

先日アップしたサムネイルクリックでスライドショーのソースです。 サムネイルをクリックすると切り替わるスライドショー 画像下の5つのサムネイルをクリックすると、画像が切り替わりるスライドショーです。 ※赤い枠で囲まれているサムネイルは、選択中の画像です。 ※表示枚…

続きを読む

サムネイルをクリックすると切り替わるスライドショー 画像下の5つのサムネイルをクリックすると、画像が切り替わりるスライドショーです。 ※赤い枠で囲まれているサムネイルは、選択中の画像です。 ※表示枚数は、用意した画像枚数をHTMLで何枚でも表示できます。CSSの変更は不要です。 …

続きを読む

先日公開した、「スライドして元に戻るスライドショー」ですが、 ソースも付けようとは思いましたが夜中だったので、ソースなしでアップして寝てしまいました。 ソースのコメント付きのバージョーンが出来たのでアップします。 スライドして元に戻るスライドショー 5枚の写真が自動的にスライドして最初に戻って、またスライドします。 …

続きを読む

スライドして元に戻るスライドショー 5枚の写真が自動的にスライドして最初に戻って、またスライドします。

続きを読む

Excelで作った表があって、これをブログに掲載したいけど･･･ この表をHTMLで表を作るのは、とても面倒です。 Microsoft アカウントを持っている人なら、OneDriveという無料クラウドが使えるはずです。 こんな時に、OneDriveクラウド経由なら、この表をブログに埋め込むことが出来ます。 そこで、今回はマイクロソフトのOneDriveを利用したExcelの埋…

続きを読む

先日、話題のプログラミング言語の「Python」を使ってみました。 Windows10では、基本的にはPythonのプログラムをインストールしないと使えません。 プログラムのダウンロード Pythonのプログラムは無料でダウンロードできます。 私は、http://www.python.org/　からダウンロードしました。 多数のプログラムの中から、私は「Windows …

続きを読む

文字を動かす ! 「画像にマスクをかけ文字を動かす」にチャレンジ 上の画像にマウスが重なると、マスクがかかり文字とともに回転します。 ※現在マスクは入手困難ですが、このマスクはタダ同然でした。 前回紹介した画像の文字は静止したままでしたが、 今回は、画像にマウスが重なった場合の色々な動きを加えてみます。 以下の画像は、前回と同じ画像を…

続きを読む

この画像に、画像やアイコン、文字を重ねてみます。 アップ画像はこの1枚だけです。他の画像は全てリンク画像です。 言葉の定義 アップ画像： 自分でアップして表示する画像 リンク画像： 他のサイトの画像をリンクで表示する 1-1　YouTubeボタンを重ねる アップ画像にリンク画像のYouTubeボタンを重ねてみます。 …

続きを読む

埋め込み関係で紹介していなかったもので、思いついたのが「Facebookの埋め込み」、「YouTubeの埋め込み」、「Googleマップの埋め込み」ですので、今回はそれらを一気に紹介します。 Facebookの埋め込み Facebookの投稿の右上の「･･･」アイコンをクリックして、「＜/＞埋め込み」を選べば「埋め込みコード」をコピーできる画面になります。 下の…

続きを読む

自分や他の人のブログを自分のブログに埋め込みたい時ってありませんか？ 少数のブログではそれに対応しているものもありますが、ウェブリブログを始めブログの埋め込みに対応していないものが多いようです。 今回は、そういったブログを埋め込む方法を説明します。 1　ブログ記事を埋め込む 「ブログをブログに埋め込む」って何のこと？、と思う方もいると思いますので、 まずは、別の…

続きを読む

先日、ツイートをブログ記事に埋め込む方法を紹介しました。 今回は、インスタグラムをブログに埋め込む方法を紹介します。 1　Instagramをブログに埋め込む 基本的には次の3ステップで埋め込みが出来ます。 ① パソコンからInstagramを開き、目的の画像・動画を表示 ② 画像の右上の「…」をクリック ③ 埋め込みのボタンから、埋め込みコードをコピー・（ブ…

続きを読む

1　　ブログにTwitterのツイートを埋め込みたい ブログの記事中に、Twitterの内容を使いたいときに、リンクは分けるけど、ツイートそのものをブログに埋め込む方法を紹介したいと思います。 その方法はTwitterのヘルプセンターに次のように書かれています。 ウェブサイトやブログに…

続きを読む

StockSnapによるPixabayからの画像 4カ月表示するカレンダー このカレンダーは、HTMLとCSSとJavaScriptを使ったものです。 ※ソースは、HTMLは3行（ボタン部2行、カレンダー部1行）ですが、CSSとJavaScriptが非常に長いです。 自動的に、本日を含む月から4カ月分を表示するカレンダーです。 ※追記（2/5）：最初の投稿時は6カ月表示で…

続きを読む

1　写真を少し傾ける ときには、写真にフレームを付けて、傾けてみるのもワンポイントで効果的です。 ※個人的な感想では、沢山ある画像の1枚程度がいいように思います。 多いと、逆効果な気がします。 下の事例の写真は、写真とフレームを傾けた感じにの表現です。写真の構図によっては、活き活きとした感じを演出できます。 この例では、時計回りに「9度傾け」ています。 …

続きを読む

映画スターウォーズのオープニング スターウォーズのオープニング風の画面は以前紹介しましたが、 動画などを見ると、かなり違うようなので、再度挑戦しました。 では、その出来栄えですが･･･ A few days ago, during... …

続きを読む

　映画スターウォーズのような文字 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor nisl id est auctor mollis sed non urna. Sed et ornare neque. Sed ut perspiciatis, unde omnis…

続きを読む

1　最近使われているプログラミング言語 色々なプログラミング言語が登場していますが、いまだに残っているものもあったり、改良されて進化したもの、役割を終え消えたもの、ここ数年になって急速に使われだしたもの･･･色々あるようです。 私自身が聞きなれないプログラミング言語が多いので、現状と過去からの推移を調べてみました。 2　2019年のよく使われているプログラミング言語 YouT…

続きを読む

【世界各地の週間お天気予報】 1月27日（月）～2月2日（日）の世界各地の週間お天気予報です。 ※予報内容は（それとなく考えましたが）でたらめです、もしかしたら偶然あたることもあるかも知れません。 ※緊急速報：大相撲春場所で前頭十七枚目の徳勝龍（奈良県出身）が初優勝しました。成績は14勝1敗。　　　【1月27日（月）～2月2日（日）の世界各地の週間お天気予報】　 【…

続きを読む

1　左右往復も・CSS編 「右から左」とその逆の「左から右」は紹介しましたが、CSSを使った「左右往復」を紹介します。 すぐ下の動きがCSSを使って表現したものです。 　あっちを立てれば～　こっちが立たず～　 ※白い枠の中に、表現してみましたが気にしないでください。 下で、ソースを紹介しま…

続きを読む

1　文字が流れる・逆バージョン 前回、「文字が右から左へ流れる」編をご紹介しました。 折角ですので、その逆バージョンも、以下に紹介します。 　　　出発するぞ～！　　じゃあ 👆上のテキストが左から右へと流れています。 「右から左へ」バージョンのソースをほんの少し入れ替えただけです。 以下にそのソースを紹介します。 …

続きを読む

1　文字が流れる 本日は、「文字が流れる」方法を紹介します。 お～い！　待ってくれ～　 👆上のテキストが右から左へと流れています。 簡単な事例なので、ぜひ使ってみてください。 以下に、ソースを紹介します。 PezibearによるPixabayからの画像（流れのイメージで使いました） 2　ソースで…

続きを読む

まえがき　枠いっぱいの横並び 枠の中に文字や画像などの要素を枠いっぱいに横並びにしたいときがあります。 でも思うように、横並びになってくれないときがありますね。 そんなときに、CSSの「 display : flex ; 」を使用すると要素を枠いっぱいに横並びにすることが出来ます。 また、外枠の幅に応じて自動的に折り返してくれます。 こんな感じを自在に（これ…

続きを読む

1　Windowsのバージョンとは ソフトウェアにバージョンが書いてあれば、それが間違いなくバージョンですが、Windowsの場合も当初はバージョンが明記されていました。 それが、Windows95、Windows98、WindowsXP、Windows Vistaと来て、バージョンがよく分からなくなりました。 続くWindows7、Windows8・8.1、Windows…

続きを読む

Windows10のアップデート後にネットワークにつながった 2019/11/15に ・Windows10更新プログラム・KB4524570のアップデートがありました。 このアップデートには、驚きの修正が入っていました。 😊　アップデートの再起動でもWi-Fiがつながった！　😊 過去2019年08月28日のWindows10のバージョンアップ以降…

続きを読む

ⅰ 3Dを理解するのに虚数が便利 先日の「transformプロパティの3D変形にチャレンジ」の記事を書くにあたり、3次元のものを回転させる場面が出てきました。 これを理解するのはとても苦労しました。 3Dなので「ｘ、ｙ、ｚ」の軸が登場するのですが、 例えば「ｚ= 1の点をｙ軸を90度回転させるとどうなるか」との問いに対して、 答えは「x = 1」なのですが、これを頭の中で理解する…

続きを読む

transform：matrix3dを使った3ｄ変形にチャレンジ 先日の記事の「CSS3のtransformプロパティを使って要素を変形する」でいくつかの変形を紹介しましたが、その記事の中の「① マトリックス変形」の中で「・3D変形：matrix3d()～（）内の値は16個あるので省略」としました。 16個の数値とは、4x4の行列を指定しているのですが、つまり数学で言…

続きを読む

flexbox機能の一つのflex-wrapプロパティについて CSSで簡単にレイアウトが組めるボックスとしてflexboxという機能があります。 その機能の一部に、「flex-wrap」プロパティがあります。 通常は他の機能と組み合わせて利用されることが多く、例えばflex-direction、justyy-contentなどのプロパティがありますが、まずは使用頻度の…

続きを読む

要素をtransformを使って変形させる CSSのtransformプロパティを使うと、要素に5種類の変形を適用させることが出来ます。 その5種類の変形とは①マトリックス変形、②回転、③縮尺（拡大･縮小）、④傾斜、⑤移動をひっくるめた表現です。 その場合に2D変形と3D変形とがあります。 ①～⑤は、それぞれ次の関数がありますが、3DとかZ軸がの表現が使われているのが3D…

続きを読む