会員登録後、有料プランで広告を非表示に
詳しくはこちら
メインカテゴリーを選択しなおす
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、雪うさぎのアニメーションを作ってみました。「Result」で確認できます（レスポンシブ対応済）。 See the Pen Snow Rabbit by あっちのそらら (@acchinosoraranocode) on CodePen. CSSのアニメーション機能（@keyframes）で、下記の処理を順に実行させています。 雪うさぎを画面外に配置（スタート位置） 雪うさぎの縦位置を移動し、落下を表現 雪うさぎの縦横比率を交互に変え、着地時のぷるぷる感を表現 雪うさぎの横位置を移動＋角度を変更し、転がり…
初心者のためのHTML入門ガイド：HTMLの基礎をホームページを作成しながら勉強しよう
初心者向けHTMLガイドで自作ホームページの作成やホームページのカスタマイズに挑戦しませんか？HTMLの基本的な作法やタグの説明から公開方法まで、手順を追ってご紹介します。一緒にデジタルスキルアップを目指しましょう。
公開したBreak Plateを知り合いに宣伝。youtube用の動画も作成したけれど、僕のチャンネルはこのブログ用の動画しかないので、宣伝効果は怪しいもの😅そう思っていたら、Twitter（X)で、AlFiさんとしまづさんが宣伝ツイートをリポストして下さった。 まだまだフォロワーの少ない僕にはとてもありがたい🙏Unityroomを見ると、数千とか万単位で遊ばれているゲームがあるけれど、早く僕もあれだけ遊ばれるゲームを作れるようになりたいものだ😊さて、最近は残業続きで開発も遅延していたけれど、ブログの更新も停滞していた。 月末に向けて、まだしばらくは繁忙期間なのだけど、それでも少しは余裕が出て…
こんにちはです。あっちのそららです。今回は、HTMLとCSS（ウェブ制作などで使う言語）で、夏にピッタリなひまわりの花を作ってみました。「Result」でイラストを確認できます（レスポンシブ対応済）。 See the Pen Sunflower by あっちのそらら (@acchinosoraranocode) on CodePen. 今年、CSSで三角関数がサポートされたので、試しに花びらの部分に取り入れました。三角関数の表現のひとつとして、要素を円周上に並べることができます。以下、今回の三角関数の工程をざっくり解説します。まずHTMLで、花びらの数に応じた番号を付与します。今回は10個なの…
Visual Studio Code のインストール から初期設定 日本語対応化まで図を使って説明。駆け出しプログラマー必見
プログラミング初心者でも、Visual Studio Codeのインストールから初期設定・日本語化までができるようこの記事では、図を使って説明してます。Visual Studio CodeはMicrosoftが開発してるテキストエディタでプ
CSSで画像を重ねて表示,【position:relative】と【position:absolute】を使うと可能です。文字の重ねも出来ました。
「position:relative」と「position:absolute」を使うとCSSで画像と画像を重ねたり、画像と文字を重ねたりするのが、簡単に出来きます。この方法を覚えると、いちいち画像加工して重ねた画像を作って反映させる必要がな
【サンプルコードあり】HTML・CSS ボタン作成1サイトに数種類のbuttonをコーディングする時の簡単なやり方。
HTML・CSSコーディングの時。いろんなボタンがあるが多くのサイトは、1サイトで数パターンのボタンが必要になる場合が多い。そんな場合は、まず基本のボタンを1つ作成して、そのボタンを基本にして作っていくようにしてます。例えば、下記のボタン。
![[HTML備忘録] HTML5 テンプレート](https://static.blogmura.com/image/no-image-07d9f35fd786d693ec0205a760f8cf63.webp)
最近、HTMLドキュメントをテキストエディタで編集しながらページを作ることがあるのですが、そんな時に使えるHTML5のテンプレートをここに置いておきます。 [目次] HTML5のテンプレート (UTF-8) ...
