옛날, 자작 CSS로 만든 사이트를 Bulma로 전환 (간단한 Bulma 사용법)
처음에
옛날부터 젊음에 이르렀던 CSS/HTML로 만든 사이트를 BULMA로 전환해본 비망록
결론
역시, 디자인에 관해서는 중도반단에 챌린지한다면 어떤 것을 실장하는 편이 좋다고 생각했습니다.
전환 자체도 1시간 정도로 종료했고, 깨끗이 했습니다.
변경 전
변경 후
절차
구식 HTML 사이트와 CSS를 준비했습니다.
이번 사이트는 CSS가 해당 HTML 내에 들어 있었기 때문에 1 파일이었습니다만…
1, 기존 CSS를 모두 삭제
부주의하게 남아 있으면 나쁜 일을 할 것 같아서 모두 삭제했습니다.
2, Bulma 불러오기
헤더부에 아래와 같은 1행을 넣습니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
3, 베이스를 어떻게 쓰는지 알아보기
우선, 전체 구성이 최초이므로 Bulma 의 Layout 를 참조합니다.
이 중, Container 를 참조해 body 요소 바로 아래에 포함합니다.
이런 느낌이군요.
<body>
<div class="container">
<div class="notification">
</div>
</div>
</body>
4, 타이틀을 어떻게 할지 생각한다
타이틀에 관해서는 hero 라는 것이 있었으므로 이것을 이용했습니다.
이런 느낌에 기재하면 깨끗해졌습니다.
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<h1 class="title">
hasito.com
</h1>
<h2 class="subtitle">
しがないサラリーマンプログラマ
</h2>
</div>
</div>
</section>
5, 전체 구성을 생각한다
다음으로, 현재의 구성에서 크게 바꾸지 않는 방법으로 조금 보았는데…
tiles이 같기 때문에 이것을 그대로 유용했습니다.
이런 느낌의 구성입니다.
해당 요소에 각 콘텐츠를 묻어 갈 뿐이지요.
완성은 아래와 같습니다.
고민한 곳
거기까지 없었기 때문에 비망록적으로 써 둡니다.
Hero와 tiles 사이에 margin이 태어나지 않습니다.
정규적인 해결 방법이 있겠지만, 빨리 찾을 수 없었기 때문에 개행으로 도망치고 있습니다…
tiles가 가장 긴 요소에 따라 다릅니다.
예를 들어 가로축에 긴 요소가 하나 있으면 다른 요소도 길게 취하려고 해서 불모호하게 됩니다.
나 사이트는 Twitter가 길이 지정 없음이었기 때문에 6000px 정도가 꽤 보기 어려워져 버렸습니다.
Twitter 삽입은 data-height="x" 에서 높이를 지정할 수 있기 때문에 이것으로 해결했습니다.
Reference
이 문제에 관하여(옛날, 자작 CSS로 만든 사이트를 Bulma로 전환 (간단한 Bulma 사용법)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hashito/items/80842b6ee4432ca5987d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
역시, 디자인에 관해서는 중도반단에 챌린지한다면 어떤 것을 실장하는 편이 좋다고 생각했습니다.
전환 자체도 1시간 정도로 종료했고, 깨끗이 했습니다.
변경 전
변경 후
절차
구식 HTML 사이트와 CSS를 준비했습니다.
이번 사이트는 CSS가 해당 HTML 내에 들어 있었기 때문에 1 파일이었습니다만…
1, 기존 CSS를 모두 삭제
부주의하게 남아 있으면 나쁜 일을 할 것 같아서 모두 삭제했습니다.
2, Bulma 불러오기
헤더부에 아래와 같은 1행을 넣습니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
3, 베이스를 어떻게 쓰는지 알아보기
우선, 전체 구성이 최초이므로 Bulma 의 Layout 를 참조합니다.
이 중, Container 를 참조해 body 요소 바로 아래에 포함합니다.
이런 느낌이군요.
<body>
<div class="container">
<div class="notification">
</div>
</div>
</body>
4, 타이틀을 어떻게 할지 생각한다
타이틀에 관해서는 hero 라는 것이 있었으므로 이것을 이용했습니다.
이런 느낌에 기재하면 깨끗해졌습니다.
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<h1 class="title">
hasito.com
</h1>
<h2 class="subtitle">
しがないサラリーマンプログラマ
</h2>
</div>
</div>
</section>
5, 전체 구성을 생각한다
다음으로, 현재의 구성에서 크게 바꾸지 않는 방법으로 조금 보았는데…
tiles이 같기 때문에 이것을 그대로 유용했습니다.
이런 느낌의 구성입니다.
해당 요소에 각 콘텐츠를 묻어 갈 뿐이지요.
완성은 아래와 같습니다.
고민한 곳
거기까지 없었기 때문에 비망록적으로 써 둡니다.
Hero와 tiles 사이에 margin이 태어나지 않습니다.
정규적인 해결 방법이 있겠지만, 빨리 찾을 수 없었기 때문에 개행으로 도망치고 있습니다…
tiles가 가장 긴 요소에 따라 다릅니다.
예를 들어 가로축에 긴 요소가 하나 있으면 다른 요소도 길게 취하려고 해서 불모호하게 됩니다.
나 사이트는 Twitter가 길이 지정 없음이었기 때문에 6000px 정도가 꽤 보기 어려워져 버렸습니다.
Twitter 삽입은 data-height="x" 에서 높이를 지정할 수 있기 때문에 이것으로 해결했습니다.
Reference
이 문제에 관하여(옛날, 자작 CSS로 만든 사이트를 Bulma로 전환 (간단한 Bulma 사용법)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hashito/items/80842b6ee4432ca5987d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<body>
<div class="container">
<div class="notification">
</div>
</div>
</body>
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<h1 class="title">
hasito.com
</h1>
<h2 class="subtitle">
しがないサラリーマンプログラマ
</h2>
</div>
</div>
</section>
거기까지 없었기 때문에 비망록적으로 써 둡니다.
Hero와 tiles 사이에 margin이 태어나지 않습니다.
정규적인 해결 방법이 있겠지만, 빨리 찾을 수 없었기 때문에 개행으로 도망치고 있습니다…
tiles가 가장 긴 요소에 따라 다릅니다.
예를 들어 가로축에 긴 요소가 하나 있으면 다른 요소도 길게 취하려고 해서 불모호하게 됩니다.
나 사이트는 Twitter가 길이 지정 없음이었기 때문에 6000px 정도가 꽤 보기 어려워져 버렸습니다.
Twitter 삽입은
data-height="x" 에서 높이를 지정할 수 있기 때문에 이것으로 해결했습니다.
Reference
이 문제에 관하여(옛날, 자작 CSS로 만든 사이트를 Bulma로 전환 (간단한 Bulma 사용법)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hashito/items/80842b6ee4432ca5987d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
