yuka

2024年内にWordpress PHP JavaScript CSS設計をマスターする

yuka

2024年内にWordpress PHP JavaScript CSS設計をマスターする

ヘッダーのnavをgridで

HTML <header class="header"> <div class="header-inner"> <h1 class="header-logo"><a href="#"><img src="image/logo-mini-bk.png" alt=""></a></h1> <nav class="header-nav"> <ul class="nav__inner">

yuka

    • @extendと@mixin

      ボーダーあり＆右下配置を作るにあたり、使いまわせるように、基準とボーダーver.と右下配置ver.を想定したコーディングをしていく。 HTML <li class="card"> <figure class="card__img-wrapper_square"><img src="image/img05.jpeg" alt="" class="card__img"></figure> <div class="card__main"> <a hre

      yuka

      • 【display:grid;】レスポンシブに表示する

        スマホでは1カラム。画面サイズが大きくなるにつれカラムが増えていく、レスポンシブなグリッドを作っていく HTML <div class="gallery"> <ul class="grid-inner"> <li class="card"> <figure class="card__img-wrap"><img src="image/img05.jpeg" alt="" class="card__img card__img_square"></figu

        yuka

        • 【CSS設計】基礎まとめ

          命名規則 Block-name__Element-name_Modifier-name Block 周りに影響を及ぼすスタイリング(position,float,margin)をしてはいけない block内にblockがネスト→MIX Element block内に必ずないといけない blockの名前を継承しないといけない Modifier 見た目、状態、振る舞いを定義するためのもの 単独で使うことはない。必ずBlockかElementがある状態で2つ目以降のクラス名と

          yuka

        ヘッダーのnavをgridで

        yuka