メインカテゴリーを選択しなおす
こんにちはです。あっちのそららです。今回は、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のテンプレートをここに置いておきます。 [目次] HTML5のテンプレート (UTF-8) ...