CSS로 명함을 만들어 보았습니다.

4342 단어 디자인CSS3명함
안녕하세요! 키나코 그래~!
이 기사는 Life is Tech! Tokai Mentors Advent Calendar 2018의 5 일째 기사입니다.

여러분, 자신의 명함을 가지고 있습니까?
곧 리메이크를 할까 고민 중입니다

그래서 이번에는 명함을 만들려고합니다!
다만 모처럼이기 때문에 바뀐 방법으로 해보고 싶지?

CSS로 명함을 만들어 보았습니다.



자, 이번에는 명함에 다음 요소를 넣으려고합니다.
　·이름
··연락처
・SNS

거친 디자인은 이런 느낌.


그럼, 조속히 만들어 갑시다!

HTML


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>名刺</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>

<body>

    <div class="namecard">
        <p class="name">ほげ 太郎</p>
        <span class="phonetic">hoge taro</span>

        <div class="contact">
            <span><i class="fab fa-twitter"></i>Twitter</span>
            <span><i class="fab fa-facebook"></i>Facebook</span>
            <span><i class="far fa-envelope"></i>MailAddress</span>
        </div>

        <img src="cat.png" alt="ねこちゃん">
    </div>

</body>

</html>

↓ 미리보기하면 이런 느낌. ↓

고양이의 이미지는 「한코에서 어쏘」라는 사이트의 소재를 사용하게 했습니다.
여기에서 CSS로 명함 같아 갑니다.

CSS


@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');

* {
    margin: 0;
    padding: 0;

    font-family: 'Sawarabi Mincho', sans-serif;
}

.namecard {
    /*名刺の区切れ目がわかるような線*/
    border: 1px solid #ddd;

    /*名刺の大きさ（縦横比さえ合ってれば良いと思います）*/
    width: 22.75rem;
    height: 11.75rem;

    /*名刺の余白*/
    margin: 2rem;
    padding: 3rem;

    /*装飾*/
    color: #333;
}

.name {
    /*文字の装飾*/
    font-size: 2rem;

    /*微妙にずれてるのを修正*/
    margin-top: -0.5rem;
    margin-left: -0.25rem;
}

.contact {
    /*flexboxにして縦並びにしています*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    /*余白*/
    margin-top: 3.5rem;

    /*装飾*/
    font-size: 0.8rem;
}

.contact span {
    margin-top: 0.25rem;
}

.contact i {
    /*SNSなどのアイコンの位置調整*/
    width: 1.25rem;
}

.namecard img {
    /*画像のサイズ指定*/
    width: 8rem;

    /*画像の位置指定*/
    position: relative;
    left: 15.25rem;
    bottom: 7rem;
}

↓미리보기하면 이런 느낌↓

납작한 맛에 가기 위해 GoogleFonts을 사용해 보았습니다.
조금 심플하다고 생각합니다만, 명함은 이런 것이군요

요약



어땠어?
디자인 툴을 사용하지 않고 명함을 만드는 것의 장점은 정보의 변경이 용이한 일이나 여백 조정 등을 곧바로 할 수 있다고 생각합니다.

htps : // 기주 b. 코 m / 아스카 오코치 키나코 / 메이시 _ Cs
여기에 이번 샘플 코드를 넣어 두었으므로, 꼭 스스로도 만들어 보세요.

그럼 키나코에서!
디자인을 생각할 때 참고하고 싶은 세련된 사이트
RGB 값만으로는 색이 하나로 정해지지 않는다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage