[クイックキャンパスNekaraku杯第2期]-30日勉強

HTML&CSSコース

Google SEOでうまく表現したいなら適当なHeadingがあればいいのに!
ボタンにグラフィックを入れられません!-->aの中の数字はいいです!(ロール=button通知ロール)
できればaとbuttonの意味は考えられますが、文法を考えて使います!

イディヤメインメニューの作成

aのキャラクターをbuttonに設定し、aria-pressed=falseを押すとjsをtrueに変更します!

<div class="ediya-drink">
  <h2 class="a11y-hidden">이디야 음료</h2>
  <ul class="ediya-menu reset-list">
    <li class="ediya-menu__item">
      <a href="#"
         role="button"
         aria-haspopup="dialog"
         aria-pressed="false">
        <figure>
          <img src="./images/iced-cherry-blossoms.png"
               alt
               width="323"
               height="323" />
          <figcaption>ICED 벚꽃라떼</figcaption>
        </figure>
      </a>
      <div 
           class="ediya-menu__item--detail"
           role="dialog"
           aria-modal="false"
           aria-labelledby="ediya-menu__item1">
        <h3 id="ediya-menu__item1"
            class="ediya-menu__item--name">ICED 벚꽃라떼<span lang="en">Cherry Blossom Latte</span></h3>
        <p>은은한 벚꽃향과 라즈베리 화이트 초콜릿 토핑이 올라간 핑크빛 라떼</p>
        <div class="ediya-menu__item--multi-column is-2">
          <dl>
            <dt>칼로리</dt>
            <dd>(393kcal)</dd>
            <dt>당류</dt>
            <dd>(35g)</dd>
            <dt>단백질</dt>
            <dd>(7g)</dd>
            <dt>포화지방</dt>
            <dd>(18.6g)</dd>
            <dt>나트륨</dt>
            <dd>(149mg)</dd>
            <dt>카페인</dt>
            <dd>(0mg)</dd>
          </dl>
        </div>
        <button type="button"
                class="button button-close-panel"
                title="닫기"
                aria-label="음료 정보 패널 닫기">
          <span aria-hidden="true">×</span>
        </button>
      </div>
    </li>
    ...
  </ul>
</div>

.ediya-drink {
    padding: 1.125rem;
}

.ediya-menu {
    /* background-color: yellow; */
    display: flex;
    flex-flow: row wrap;
    gap: 1.125rem;
}

.ediya-menu__item {
    flex: 1 1 40%;
    position: relative;
    /* display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto; */
}

.ediya-menu__item a {
    display: block;
    background-color: var(--gray);
    color: var(--black2);
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

.ediya-menu__item figure {
    margin: 0;
    padding-top: 1.25rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.ediya-menu__item img {
    transform: scale(0.85);
    transition: all 400ms ease;
    -webkit-user-select: none;
    user-select: none;
}

.ediya-menu__item a:hover img {
    transform: scale(1);
}

.ediya-menu__item figcaption {
    margin-bottom: 2.8125rem;
}

メインメニューモードウィンドウcss

.ediya-menu__item--detail {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.5);
    
    /* 전통적인 방식 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--gray);
    padding: 1.875rem 1.25rem;

    /* grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2; */
    display: flex;
    flex-flow: column nowrap;
    transition: all 400ms ease
}

.ediya-menu__item--detail.is-active{
    opacity: 1;
}

.ediya-menu__item--name {
    color: #202022;
    font-size: 1.125rem;
    border-bottom: 2px solid currentColor;
    padding-bottom: 1.125rem;
}
.ediya-menu__item--name [lang="en"] {
    display: block;
    font-size: 0.875rem;
    color: var(--gray);
}

.ediya-menu__item--detail p {
    line-height: 1.5;
    flex-grow: 1;
}

.ediya-menu__item--multi-column {
    background-color: var(--silver);
    column-count: 2;
    column-rule: 1px solid var(--black2);

    margin: 0 -1.25rem -1.875rem ;
}

.ediya-menu__item--multi-column dl {
    margin: 0;
    overflow: hidden;
}

.ediya-menu__item--multi-column dt {
    float: left;
    width: 40%;
    margin-left: 10%;
    margin-top: 0.5rem;
}

.ediya-menu__item--multi-column dd {
    margin-left: 0;
    float: left;
    width: 40%;
    margin-right: 10%;
    margin-top: 0.5rem;
}

.ediya-menu__item--detail .button-close-panel {
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    color: var(--gray);
}

イディヤアニメーションの作成

@keyframes moveFromLeft {
    0% {
        transform: translateX(-4rem);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes moveFromRight {
    0% {
        transform: translateX(4rem);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes moveFromTop {
    0% {
        transform: translateY(4rem);
    }
    100% {
        transform: translateY(0);
    }
}

.header-container {
    animation: moveFromTop 600ms forwards;
}

.brand {
    animation-name: moveFromLeft;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}
.header .button-open-menu {
    user-select: none;
    padding: 0;
    background-color: #fff;
    animation-name: moveFromRight;
    animation-duration: 800ms;
    animation-delay: 150ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

タイトル領域position:fixedに配置すると、十分なスペースが消費されるため、この部分のアニメーションのみが移動するので、より自然に作成することができる
もっと簡単になりたい.

@keyframes transform-none {
	to {
		transform: none;
		opacity: 1;
	}
}

この方法では,3つのアニメーションを作らなくても問題を解決できる.
移動が必要だからといってtranslateにこだわるのではなく、透明度と同じ属性と値を使ってみましょう.

教室のサイト

WHATWG

BEM OOCSS SMACSS

backdrop-filter

position: sticky;

プロジェクトでのBEMメソッドの使用を推奨
ピクチャラベルとソースコード:ソースラベルの画像がサポートされていない場合は、ピクチャラベルのimgファイルをロードして表示します(最新の画像フォーマット:webp,avif<--両方とも高い画像圧縮率を有します)
user-select: none;
currentColor
タイミング関数を使用してアニメーションを拡張
backdrop-filter: blur(20px);