@7nabaの技術ブログ

デザイン


上記のようなデザインページを作成する。

  • input要素はフォーカス時に枠線色が変化する。
  • button要素はフォーカス時に色が変化する。
<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <meta http-equiv="content-language" content="ja">  
    <title>投稿ページ</title>  
    <link rel="stylesheet" href="style.css">  
  </head>  
  <body>  
    <section>  
      <div id="form">  
        <input type="text" id="write-title" size="40" placeholder="タイトル">  
        <textarea name="" id="write-article" cols="50" rows="10" placeholder="メッセージ"></textarea>  
        <input type="button" id="post" value="投稿">  
      </div>  
    </section>  
  </body>  
</html>  
#form {  
  display: flex;  
  flex-direction: column;  
  width: 60%;  
  margin: 10px auto;  
}  
#form  > input,textarea {  
  border:0;  
  padding:10px;  
  border:solid 1px #d9dfe6;  
  font-size: 16px;  
  margin:0 0 10px;  
  /* 角に丸みをつける */  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
  resize: none; /* テキストエリアのリサイズ禁止 */  
}  
input#write-title:focus, textarea:focus {  
  outline: none;  
  border-color:#353535;  
}  
input#post {  
  outline: none;  
  width: 100px;  
  margin: 0 0 0 auto;  
}  
input#post:hover {  
  outline: none;  
  background-color: #d9dfe6;  
  border: solid 1px #353535;  
}  

このログへのコメント

コメントはありません