yuka

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

yuka

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

2columnから始まるレスポンシブgrid

HTML<section class="company"> <div class="card-wrap"> <ul class="card-container"> <li class="card"><a href="#" class="card__lin…

yuka
yuka
2週間前
1

行数超えたら「...」で省略

1行の場合 .text{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} 複数行の場合 .text{-webkit-line-clamp: 3;display:-webkit-box;-webkit-box-orien…

yuka
yuka
2週間前

@useの備忘録

他のscssを読み込む時は@useを使う @use '_reset.scss'; 普通は'reset'だけで済むが、フルにファイル名を書くと勝手にファイルを作ってくれるからおすすめらしい。

yuka
yuka
2週間前

ヘッダーの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…

yuka
yuka
2か月前
1

@extendと@mixin

ボーダーあり＆右下配置を作るにあたり、使いまわせるように、基準とボーダーver.と右下配置ver.を想定したコーディングをしていく。 HTML <li class="card"> <figure…

yuka
yuka
2か月前
1

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

スマホでは1カラム。画面サイズが大きくなるにつれカラムが増えていく、レスポンシブなグリッドを作っていく HTML <div class="gallery"> <ul class="grid-inner"> <…

yuka
yuka
2か月前

【CSS設計】基礎まとめ

命名規則 Block-name__Element-name_Modifier-name Block 周りに影響を及ぼすスタイリング(position,float,margin)をしてはいけない block内にblockがネスト→MIX Elemen…

yuka
yuka
2か月前
1

2columnから始まるレスポンシブgrid

HTML<section class="company"> <div class="card-wrap"> <ul class="card-container"> <li class="card"><a href="#" class="card__link"></a><img src="image/img02.jpeg" alt="" class="card__image"><p class="card__te

yuka

行数超えたら「...」で省略

1行の場合 .text{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} 複数行の場合 .text{-webkit-line-clamp: 3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

yuka

@useの備忘録

他のscssを読み込む時は@useを使う @use '_reset.scss'; 普通は'reset'だけで済むが、フルにファイル名を書くと勝手にファイルを作ってくれるからおすすめらしい。

yuka

ヘッダーの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