홈페이지 레이아웃 팁 5개 - 장체에서 희구까지 레이아웃-

개시하다

며칠 전에 이런 기사를 썼어요.
https://zenn.dev/yamatoiizuka/articles/150ee437e3b610
네트워크 조판을 계속하다.이번에는 가늘어 보이기 때문에 Tips 포맷입니다.자세한 인코딩은 CodePen의 내용을 보십시오.

장체/평체

장체평화체transform: scaleX();는 가능할 것 같지만 문자의 폭뿐만 아니라 상자의 폭도 달라진다.이런 상황을 피하기 위해 장체의 경우 그 컨테이너의 넓이가 확대된다.SCSS 등으로 쓰기가 편해요.
style.scss

p {   
  $scale: 0.85;    // $scale > 1 で平体
  width: 100% / $scale;
  transform-origin: left top;
  transform: scaleX($scale);
}

텍스트 안쪽 밑줄

밑줄.
보통 쓰기

border-bottom: 5px solid orange;

하지만 글 안쪽의 밑줄은 border-bottom로 표시할 수 없다(노력하면 할 수 있을 것 같다).아래와 같이 사용liner-gradient.

background: linear-gradient(transparent 70%, orange 70%);

border-bottom와 상기liner-gradient를 병용하면 문자의 하단을 뛰어넘는 밑줄을 그을 수 있다.하지만 환경에 따라 틈이 생길 수 있으니 실전에 뛰어들지 않는 게 좋다.

border-bottom: 4px solid orange;
background: linear-gradient(transparent 60%, orange 60%);

미묘한 줄 바꿈을 피하고 한 줄에 넣다

span#one-line {
  white-space: nowrap;
}

줄을 바꾸는 것을 멈춘 후 줄과 부모 요소의 각각의 너비transform: scaleX()를 취하여 장체를 걸었다.JS라고 써.

세로 코일(배율)

font-feature-settings: 'palt';

가로로 설정된 tsume 그룹 설정이기 때문에 주의해야 합니다.세로로 쓸 때

font-feature-settings: 'vpal';

.

하이쿠 의 편집 판

희구의 조판에서 각 희구의 글자 수가 다르더라도 관례에 따라 천지를 정렬해야 한다.이 견본은 기본 문자수와 문자간letter-spacing을 설정하고 문자수가 기준 문자수보다 적으면 문자간이 확대되고 조정되며 문자수가 많으면 글씨체transform: scaleY();를 더해 조정한다.vanilla가 귀찮아서 jQuery로 썼어요.