Subject-01

Subject-02

Subject-03

Subject-04

名刺を作成してみよう

htmlとCSSを使用して、以下のような名刺を作成してみましょう。
自分の内容で作成し、自由にアレンジして下さい。

見本ページを新しいタブで開く

ページ構成

    subject2-2

  • index.html
  • style.css

ヒント

どうしても難しい方は、ソースを見ながら真似してみましょう。

ソースを表示

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>名刺</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="container">

<p class="left">北海道情報大学</p>
<p class="left">情報メディア学部 1年</p>

<p class="center">情報　太郎</p>

<p class="right">[Mail]:aaa@bbb.ccc</p>
<p class="right">[Tel]:000-0000</p>

</div>

</body>
</html>
style.css
#logo{
    font-size:32px;
}
.left{
    text-align:left;
    font-size:16px;
}
.center{
    text-align:center;
    font-size:32px;
}
.right{
    text-align:right;
    font-size:14px;
}
#container{
    background:rgb(80%,90%,100%);
    color:rgb(0%,50%,70%);
    width:380px;
    border:1px solid rgb(0%,50%,70%);
    padding:10px 20px;
}
PAGE TOP