すべてのカテゴリ

「詳細はこちら→」などというリンクがあって、マウスをのせると矢印だけがひょこっと動くボタン見たことありますでしょうか？これも意外と簡単に出来ますので、ご紹介いたします🎵完成見本↓マウスを乗せると色が少し薄くなり、→だけヒョコッと右に動く。html1️⃣（Google Fontsアイコン使用）完成見本では、矢印にGoogle Fontsのアイコンを使用しています。同じようにGoogle Fontsのアイコンを使用したい場合は、headタグ内に下記のようなコードを書きます。（普通の矢印を使うタイプも下記でご紹介します。）▼headタグ内<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,700,0,0" />そしてbodyタグ内には下記のようなコードを書きます。▼bodyタグ内<a href="fonts.google.com" class="btn01">詳細はこちら<span class="material-symbols-rounded arrow-right"> arrow_right_alt </span></a>⭐️クリックした先のURLはaタグのhref内に入れます。CSS1️⃣<style>   .btn01 {    border-radius: 5px;    background: purple;    di

バナーの上にマウスを乗せたらバナーの色が薄明るくなったり、リンクにカーソルを合わせたら文字の色が変化したりする時ありますよね、このようにマウスを乗せた時に起こる変化のことをホバーエフェクトと言います。今回は画像の上にマウスを置いたら画像が暗めになって、拡大するというホバーエフェクトを作っていきます！完成見本はこちら！↓マウスを置くと画像がグレーがかって拡大するhtmlはこちら！<div class="category">   <a href="★リンクURL★">    <img src="img/banner01.jpg" alt="" />    <span>New Item</span>   </a>   <a href="★リンクURL★">    <img src="img/banner02.jpg" alt="" />    <span>Bag</span>   </a>  </div>CSSはこちら！<style>   .category {    display: flex;    flex-direction: row;    gap: 2rem;    text-align: center;   }   .category a {    position: relative;    width: 300px;    height: 300px;    overflow: hidden;    color:

【空飛ぶバイク】実現性が凄く高い空飛ぶバイクの試作品が完成し販売予約が開始されました。でもまだまだ仮組状態で本当にこれで予約開始してしまい大丈夫なのでしょうか？値段は今の所「4160万円」ですが開発当初から値段が徐々に上がってて完成時にいくらになるか不明です。このバイクの名前は「スピーダー」と言います。「モスピーダー」と全然違い分離変形しません！作った会社は「ジェットパックエビエイション」社略して「JPA」と言う会社です。この会社は以前ジェットエンジンをリュックの様に背負って空を飛べるフライングジェットスーツを作りました。〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓【性能】この空飛ぶバイクもジェットエンジンで飛びます。燃料は現時点で軽油を使っていますが将来的に水素やエタノールを使う予定だそうです。この空飛ぶバイクの正式な種類は「垂直離着陸機」になります。完成すれば最高高度「4,572m」まで上昇でき最高速度「240㎞」で移動できます。エンジンは合計8機装備していて360度回転します。エンジンを回転させる事により推進方向を変えてバランスを保ち移動します。推進力が1200ポンドあり約22馬力です。〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓＝〓【初期性能】これは連続飛行時間が「30分」しか飛べず非常に短いです。しかし折り畳みの翼を付ける事により最大1時間の飛行が可能という事です。でもこんな小さな機体で高度4572m行くのはかなり怖い気がします。しかし「JPA」はその高度でも十分安定性を保てるように8個のエンジンが別々に稼働し細かく姿勢制御が出来ると言います。あの仮組状態のプロトタイプはエン