CSS プログラミング基本 | Web 開発 | 実験

はじめに

この実験では、CSS（Cascading Style Sheets）プログラミングの基本を学びます。この実験では、CSS の構文、セレクター、プロパティ、値の基本を学びます。この実験が終わるとき、あなたは CSS プログラミングの堅牢な基礎を築き、視覚的に魅力的な Web ページを作成できるようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 94%です。学習者から 100% の好評価を得ています。

交互テキスト

VM 内には既にindex.htmlとstyle.cssが用意されています。

交互テキストのアニメーションを作成するには、次の手順に従ってください。

交互表示するテキストを保持するために、クラスが"alternating"でidが"alternating-text"の<span>要素を作成します。

<p>I love coding in <span class="alternating" id="alternating-text"></span>.</p>

CSS では、display: noneを設定することで<span>要素を非表示にするalternating-textというアニメーションを定義します。

.alternating {
  animation-name: alternating-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes alternating-text {
  90% {
    display: none;
  }
}

JavaScript では、交互表示する異なる単語の配列を定義し、最初の単語を使って<span>要素のコンテンツを初期化します。

const texts = ["Java", "Python", "C", "C++", "C#", "Javascript"];
const element = document.getElementById("alternating-text");

let i = 0;
element.innerHTML = texts[0];

EventTarget.addEventListener()を使って、'animationiteration'イベントのイベントリスナーを定義します。これにより、アニメーションの反復が完了するたびにイベントハンドラが実行されます。イベントハンドラでは、Element.innerHTMLを使ってtexts配列の次の要素を<span>要素のコンテンツとして表示します。

const listener = (e) => {
  i = i < texts.length - 1 ? i + 1 : 0;
  element.innerHTML = texts[i];
};

element.addEventListener("animationiteration", listener, false);

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます！あなたは交互テキストの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。

視覚的に魅力的な Web のための CSS 基本

はじめに

交互テキスト

まとめ