わけいの多肉ブログ

画像は、わけいのコラージュより 写真集の自動ページめくり ちょっと横着ですが、ページめくり自動操作機能付きの写真集です。 「画面左上の更新アイコン」「F5キー」で次の写真集に変わります。 Turning pages 　　 ** Images loaded randomly from Picsum.photo…

続きを読む

画像は、わけいのコラージュより さすがは8月、暑いです。 のどが渇きますが、熱中症対策に水分補給！ 夏はレモンスカッシュが似合う 　おかわり自由　もう1杯いかがですか …

続きを読む

画像は、わけいのコラージュより 今回は、CodePenで公開されていた、R. Kumarさんのオリジナルの「Technology Web Page」をブログでの再現に挑戦してみたいと思います。 ホーム 技術 取り組み …

続きを読む

画像は、わけいのコラージュより ※ボヤキ：この記事は、昨日8/1に投稿するはずでしたが、出かける用事があって、うっかり保存せずに閉じてしまいました。 ･･･半分が消えてしまいました。 気を取り直して、残りの半分を書きましたが、ほぼ全面的に書き直しました。 書き変えろ！ということだったようですね、結果的には昨日投稿しなくてよかったと思います。 いよいよ夏も8月です…

続きを読む

今回は、この画像を使って、以下で遊んでみます。 7月も、今日で終わりです。 台風が発生しない7月は、観測史上初めてらしく、それは有難いです。 でも、台風じゃなくても、豪雨で各地に大きな災害があったので、 結果的には、台風が沢山到来したような状態と同じ気がします。 1　モザイク風フォト この1枚のフォトを、モザイク風にして表示。 とても面白…

続きを読む

画像は、わけいのコラージュより 私は、小さいころからイラスト･マンガを描くのは苦手だったのですが、 クラスにはたいてい上手な子がいました、特に女の子が多かった気がします。 少女漫画の目の輝きは、すごいですね！ 目のイラストをしみじみと眺めると、いろいろ工夫しているんですね。 そんなわけで、今回はPCアニメ･目の描き方の話題です。 1　アニメの目…

続きを読む

画像は、わけいのコラージュより くらげの飼育 世の中にはクラゲをペットにする人がいるそうで、 クラゲと飼育キットを売ってるペットショップもあるそうです。 でも、グッピーでも大変なのに、クラゲとなると水･光･温度･餌管理などとても大変そうです。 その点、PC上だと管理不要で簡単なんですけどね。 …

続きを読む

画像は、わけいのコラージュより スクロールで回転する箱 スクロールすると箱が回転します。 箱が一回りすると、箱の下にスクロールできます。 なお、箱の4面のアイコンは･･･ ① 緑色～ギフト ② 水色～バースデーケーキ ③ ベージュ色～レトロカメラ ④ ピンク色～ワイングラス ･･･です。 最初に青の画面があるので…

続きを読む

3Dのような景色の感じ～

続きを読む

画像は、Pixabayより 前回の記事の一部を、変えてみました。 コールドブリューコーヒー を楽しむ／明･暗の画面切換え版 下の画面の左上or左下の「Dark★」or「Light☀」をクリックすると画面の明･暗が切り替わります。 Dark star_rate …

続きを読む

Cold Brew Coffee 画像は、Pixabayより コールドブリューコーヒー を楽しむ 最近はカフェのメニューでもよく見かける「コールドブリューコーヒー」。 熱を加えずに、時間をかけ水で抽出したのがコールドブリュー コーヒー。 香り高い風味が引き出され、まろやかな味わいが楽しめる！ …

続きを読む

画像は、わけいのコラージュより。 25枚の画像があります。 これを1枚づつではなく、一気に一覧で表示したいのですが、 色々な表示方法があります。 今回は、4種類のレイアウトボタンを選択して表示方法を変えるものです。 CSSだけで実現した色々なスタイルのレイアウト 表示モードの変更：　ラジオボタンにチェックを入れてください。 ① グリッド…

続きを読む

画像は、わけいのコラージュより CSSを使ったフレックスボックスレイアウトとグリッドレイアウトを紹介しました。 今回は、JavaScriptのライブラリのMasonryを使った自由度の高いレイアウトの紹介です。 JavaScriptのライブラリを使う方法は、CSSの記述より非常にシンプルで使いやすいです。 難しい細かい設定は全てMasonr…

続きを読む

画像は、わけいのコラージュより 先日フレックスボックスレイアウトの関係に触れましたので、今回は同様に自由なレイアウトを実現するためのグリッドレイアウトを使ってかつレスポンシブなレイアウト、それがどんなものかを体験していただければと思います。 1　レスポンシブ･グリッドレイアウトの体験 ・事項の2の実例では、カラフルなカードに番号(1-26)が書か…

続きを読む

シンプルにデバイスの画素数サイズが分かる Simple device mockups in CSS シンプルで分かりやすい各デバイスの画素数でのサイズです。 デバイスは、デバイス内の画像のサイズに合わせて自動的にサイズを調整します。 デバイス全体の相対的な比較 以下に登場するスマホ、タブレット、デスクトップPCの相対的な大きさです…

続きを読む

画像は、わけいのコラージュより Webサイトやブログで画像やテキストなどを、自由度のあるレイアウトをCSSで実現しようとする際に、よく使われるのがフレックスボックスレイアウトとグリッドレイアウトです。 今回は、フレックスボックスレイアウトに関する違いを体験する学習の紹介です。 参考になれば幸いです。 フレックスボックス･レイアウトの学習がで…

続きを読む

画像は、わけいのコラージュより マウスを動かすと水玉がいっぱい！

続きを読む

画像は、Pixabayから きらきら星の玉 こんな夜空の星は現実にはないと思いますが、 あったらさぞかし綺麗でしょうね。 花火のように消えてしまわないで、一晩中キラキラと･･･ 翌日も、その次の日も･･･ …

続きを読む

今回は、iPhoneアクセサリに最適なワイアレスヘッドフォンのCM風の紹介です。 このヘッドフォンは、以下の特徴があります。 ・臨場感あふれるサウンドで自分の世界に没頭、外部音取り込みモードで周囲の状況に配慮できます。 ・ヘッドフォンを折りたたむと電源のオン･オフができます。 ・人間工学に基づくデザインで、長時間装着でもとても快適です。 ・バ…

続きを読む

画像は、わけいのコラージュより 当てよう 1 - 20 の数字、当り数はいくつ？ 速度 ({{ dramaDescription }}): 終盤ゆっくり …

続きを読む

1　ありそうで･なさそうな計算機 2進数の最も基本的な計算です。 0 + 1 = 1 1 + 1 = 10 ですね。 では、　1101 + 111 = ? これいくつになりますか？ 私の持っている電卓では計算できません。 私の頭ではもっと無理です。 あれっ？　ところでどうやって2進数を計算するんだろう？ でも大丈…

続きを読む

画像は、わけいのトマト缶ラベルより 太陽に近い4つの惑星 太陽に最も近い4つの惑星「水星」「金星」「地球」「火星」の大きさと自転の様子です。 サイズはおおよその数値です。 地球と火星の自転速度はほぼ同じで1日かかります。 1日で1周だと見ていても回転している気がしないので回転速度は早めてあります。 地球･火星で30秒で1周するよう…

続きを読む

画像は、わけいのコラージュより 　いきなり画面が、真っ黒になって「Loading 〇%」の表示が出て、驚かれたかもしれません。 実は、これも演出の一つなんです。驚いた方、すみませんでした。 今回は、前回に引き続き「ScrollTrigger」を使った画像表示の一例です。 スクロール･トリガーを使って画像が左右から スクロールに…

続きを読む

画像は、わけいのコラージュより スクロール速度に対応して画像が傾くスクロールトリガー 10枚の画像を表示しています。 スクロールすると、画像がゆらゆらと傾いて戻ります。 スクロールの速度が速いと、傾き具合も大きいのですが、分かりにくいかも知れません。 …

続きを読む

画像は、わけいのコラージュより 先日、アイソメトリックについてご説明しました。 アイソメトリック図法は、立体的な物体と人物などを組み合わせて描くイラスト、例えば･･･ ・「〇〇整備予想図」 ・「〇〇モール完成イメージ図」 ・「〇〇街のPRイラスト」 ・「〇〇製品の××」 などでの使用をよく見かけます。 これらは実際の縮図ではなく･･･ …

続きを読む

Isometric Layout･アイソメトリックなカードデザイン …

続きを読む

犬アルバム 🐶 (JavaScriptライブラリのvue 使用) 「わんちゃんギャラリー」です。　🐶　🐶 🐶　🐶わんっ！ 下の小さい写真をクリックすると、上側に大きく表示されます。 　🐶🐶　🐶🐶🐶　🐶🐶　🐶🐶🐶･･･ 上の写真の中に、うちの愛犬「心和」の写真が2枚あります。 最後から2番目(購入時…

続きを読む

画像は、わけいのコラージュより マウスの軌跡を追う流れ星の輝跡 マウスの軌跡に合わせて、流れ星のようにキラキラと光ります。

続きを読む

写真は、わけいのコラージュより 今回は、写真を画面上でマスキングテープでとめて表示するスタイルです。 写真をマスキングテープで止める 1 上に1枚スタイル 2 上に2枚スタイル 3 はすに2枚スタイル 4 左右に2枚スタイル 5…

続きを読む

ベネズエラの楽園･ラグランサバナを旅する …

続きを読む