🍇
[WebApp開発] 〜入門編〜（一覧）
○はじめに
本記事を読めは、Eclipseで開発環境を用意し、
java,jsp,Servletとデータベースを使用して、
以下のシンプルなWebAppを作ることができる構成になっています。
主な仕様は、以下です。
仕様
①テキストボックスに文字列を入力し送信ボタンを押すと、DB送信文字列として表示
②SQL命令の書かれたボタンを押すと、データベースに対してSQL命令が実行
③セッションをリセットすると、セッションで保持されていたデータ削除
これらの動作は、画面の上部に書かれている機能が組み合わさってできています。
本記事では、それらについて書いた記事のリンクをまとめたものです。
素人目線なのですが、あのTwitterも非常に簡素化していけば、
これらの機能が集まって動いているものではないでしょうか。
お遊びですが、見た目だけcssでTwitter風にしてみました(笑)
cssは、この記事の最後に載せています。アイコンはフリー素材です。
機会があれば応用編で、もっとTwitterライクなWebAppをご紹介できたらなと思っています。
○制作ステップ
◆Eclipse
①Eclipseの導入
②TOMCAT
③Projdect作成
◆Servlet
①導入〜HelloWorld〜
②エコー機能
③バリデーション
④フィルターとリスナー
⑤セッション
⑥リダイレクトとリロード対策（PRGパターン）
◆DateBase
①HSQLDBのダウンロードと基本操作
②DB機能
③DAOパターン
○WebAppの構成
・実装した状態で、下記のリンクにアクセス
・以下の画面が表示されます
◆ディレクトリ構成
◆ライブラリ
・タグライブラリ
(1)jstl JAR 1.1.2
(2)standard JAR 1.1.2
⇨参照記事：JSPとJSTL（タグライブラリ＜@taglib＞）
・バリデーションに関するライブラリ
(1)Bean Validation API (2.0.1.Final)
(2)hibernate-validator(5.3.4.Final)
(3)slf4j-api (1.6.1)
(4) jboss-logging (3.1.4.GA)
(5)classmate (1.0.9.14-jre14)
⇨参照記事：[Servlet]バリデーション機能(Bean Validation)の実装
・データベースに関するドライバ（ライブラリ）
(1)hsqldb.jar
ダウンロードしたHSQLDBのフォルダ内
＜{HSQLDBのディレクトリ}/lib/hsqldb.jar＞
⇨[DB]DB機能の実装:SQL(Select/Insert/Update/Delete)
◆ソースコード
①echo.jsp
echo.jsp
<%@page language="java" contentType = "text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page isELIgnored= "false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Echo機能＋Validation機能+TimeFilter機能(Listener)+Session機能+リロード対策＋DB機能(DAO)</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/TwitterLike.css">
</head>
<body>
<img src="${pageContext.request.contextPath}/img/TwitterLike.png" width="40" height="40">
<h3 style="display:inline;">Echo機能＋Validation機能+TimeFilter機能(Listener)+Session機能+リロード対策+DB機能(DAO)</h3>
<br>
<%-- リセットのリクエストパラメータを渡す--%>
<a id = reset href="echo?reset">セッションのリセット</a>
<%-- 入力フォーム --%>
<form action="echo" method="post">
<br /><label>入力してください : </label>
<%-- テキストボックス(m) --%>
<input type="text" name="m">
<%-- Validationメッセージの出力 --%>
<%-- var="vm" → c:out で valueにセットする際に使う名称 --%>
<%-- [' ']には、 MessageForm.javaのテキストボックスのメッセージ保持用のパラメータ名を入れる --%>
<a>
<c:forEach items="${validationMessage['textMessage']}" var="vm">
<c:out value="${vm}"/>
</c:forEach>
</a>
<br />
<%-- 送信ボタン --%>
<input type="submit" /> <br />
</form>
<br />
<%-- Echoメッセージの出力--%>
<label>DB送信文字列 : </label>
<a>
<c:if test="${ not empty message }">
「${ message }」です。
</c:if>
</a>
<br />
<%-- DBAccessフォーム --%>
<form action="dbaccess" method="post" name="DataBase" onsubmit="return SQL()" >
<%-- Selectボタン --%>
<input type="submit" value="Select" onclick="DataBase.SubmitType.value='select'" />
<%-- Insertボタン --%>
<input type="submit" value="Insert" onclick="DataBase.SubmitType.value='insert'" />
<%-- Updateボタン --%>
<input type="submit" value="Update" onclick="DataBase.SubmitType.value='update'" />
<%-- Deleteボタン --%>
<input type="submit" value="Delete" onclick="DataBase.SubmitType.value='delete'" />
<a>
<c:if test="${ not empty SQLmessage }">
「${ SQLmessage }」
</c:if>
</a>
<input name="SubmitType" type="hidden" value="" />
</form>
<br />
<%-- SQL結果の出力--%>
<a id = SQLresult>
<c:if test="${ not empty Resultmessage }">
${ Resultmessage }
</c:if>
</a>
<%-- SQL結果の出力--%>
<script type="text/javascript">
function SQL() {
if (DataBase.SubmitType.value == 'select') {
}
if (DataBase.SubmitType.value == 'insert') {
}
if (DataBase.SubmitType.value == 'update') {
}
if (DataBase.SubmitType.value == 'delete') {
}
return true;
}
</script>
</body>
②EchoServlet.java
EchoServlet.java
package input;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.validation.ConstraintViolation;
import javax.validation.Validation;
import javax.validation.Validator;
import javax.validation.ValidatorFactory;
//対応するjspのFormのaction名
@WebServlet(urlPatterns = {"/echo"})
//Validation機能を持たせたEchoサーブレットクラス
public class EchoServlet extends HttpServlet{
private static final long serialVersionUID = 1L;
//画面からPostされた場合に起動するメインとなるメソッド
@Override
protected void doPost(HttpServletRequest request , HttpServletResponse response)throws ServletException,
IOException {
//取得文字のエンコード設定(文字化け防止)
request.setCharacterEncoding("UTF-8");
//セッションの取得
HttpSession session = request.getSession();
//Validation機能
//テキストボックスのtextを保持したFormの作成
TextForm SetForm = toSetForm(request);
//toValidationFormをバリデーションに通す。
//引っかかった場合はrequestにvalidationMessageをセットする
setValidationAttribute(session,SetForm);
//Echo機能
//Echoメッセージのセット
if(session.getAttribute("validationMessage") == null) {
//バリデーションメッセージがrequestに付与されていない場合、
//Formに保持していたtextをrequestにEcho用に付与する
String EchoMessage = SetForm.getTextMessage();
//取得したセッションのmessageに対してセットする
session.setAttribute("message",EchoMessage);
}
//Echo保持されている時の、バリデーションが働いた時,EchoMessageは初期化
if(session.getAttribute("validationMessage") != null) {
//取得したセッションのmessageに対してセットする
session.setAttribute("message",null);
}
//セッションIDの取得
String session_id = session.getId();
//コンソールに出力
System.out.println("セッションID:" + session_id );
System.out.println("validationMessage<session>):"+session.getAttribute("validationMessage"));
System.out.println("message<session>):"+session.getAttribute("message"));
//リダイレクト
//コンテキストルート（InputFunction）の取得
String contextPath = getServletContext().getContextPath();
//リダイレクトpathを設定（表示させるページ→echo.jsp）
String path = contextPath + "/echo.jsp";
//実際にリダイレクトを行っている関数
response.sendRedirect(path);
// //RequestDispatcher
// RequestDispatcher dispatcher = request.getRequestDispatcher("echo.jsp");
// dispatcher.forward(request, response);
}
//「セッションのリセット」のリクエストパラメータが渡された場合が押された場合、セッションを無効にする
@Override
protected void doGet(HttpServletRequest request , HttpServletResponse response) throws ServletException,IOException {
Map<String , String[]> parameterMap = request.getParameterMap();
if(parameterMap.containsKey("reset") == true) {
//セッションの取得
HttpSession session = request.getSession();
//セッションを無効にする
session.invalidate();
}
//リダイレクト
//コンテキストルート（InputFunction）の取得
String contextPath = getServletContext().getContextPath();
//リダイレクトpathを設定（表示させるページ→echo.jsp）
String path = contextPath + "/echo.jsp";
//実際にリダイレクトを行っている関数
response.sendRedirect(path);
//PRGパターンの場合,RequestDispatcherは不要
// RequestDispatcher dispatcher = request.getRequestDispatcher("echo.jsp");
// dispatcher.forward(request,response);
}
//テキストを保持したFormを作成するメソッド
private TextForm toSetForm(HttpServletRequest request) {
//バリデーションに通すためのフォームのインスタンス作成
TextForm SetForm = new TextForm();
//テキストボックスの文字列を取得
String text = request.getParameter("m");
//テキストボックスが空欄ではない場合
if(text.isEmpty() == false) {
//テキストを保持したFormを返す（今回は実装してないがNull以外のバリデーション機能もあるため）
SetForm.setTextMessage(text);
}
return SetForm;
}
//バリデーション用のメソッド
private void setValidationAttribute(HttpSession session, TextForm toValidationForm) {
//toValidationFormに対してバリデーションを実行
Map<String,List<String>> validationMessage = validate(session,toValidationForm);
//バリデーションメッセージがセットされている場合、requestにバリデーションメッセージを付与
if(validationMessage.isEmpty() == false) {
session.setAttribute("validationMessage", validationMessage);
return;
}
//Sessionで保持されていたバリデーションメッセージの初期化
if(validationMessage.isEmpty() == true) {
session.setAttribute("validationMessage", null);
return;
}
}
//validate
private Map<String , List<String>> validate(HttpSession session,TextForm toSetForm){
ValidatorFactory validatorFactory = Validation.buildDefaultValidatorFactory();
Validator validator = validatorFactory.getValidator();
Set<ConstraintViolation<TextForm>> validationResult = validator.validate(toSetForm);
Map<String , List<String>> ret = new HashMap<String , List<String>>();
for(ConstraintViolation<TextForm> violation : validationResult) {
String propertyPath = violation.getPropertyPath().toString();
List<String> messages = ret.get(propertyPath);
if(messages == null) {
messages = new ArrayList<String>();
ret.put(propertyPath, messages);
}
messages.add(violation.getMessage());
}
return ret;
}
}
③TextForm.java
TextForm.java
package input;
import java.io.Serializable;
import javax.validation.constraints.NotNull;
//テキストボックスのメッセージを保持するForm（バリデーション機能を追加）
public class TextForm implements Serializable{
private static final long serialVersionUID = 1L;
//バリデーション用（空欄の場合のエラーメッセージ設定）
@NotNull ( message ="この項目は必須入力です。")
//テキストボックスのメッセージ保持用
private String textMessage;
//テキストボックスのメッセージのセット
public void setTextMessage(String textMessage) {
this.textMessage = textMessage;
}
//テキストボックスのメッセージのゲット
public String getTextMessage() {
String textMessage = this.textMessage;
return textMessage;
}
}
④TimeFilter.java
TimeFilter.java
package filter;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
//("/echo")のURLにアクセスした際に呼ばれる
@WebFilter("/echo")
public class TimeFilter implements Filter{
//init
public void init(FilterConfig conf) throws ServletException {
}
//doFilter
@Override
public void doFilter(ServletRequest request,ServletResponse response,FilterChain chain) {
//処理時間の計測開始
System.out.println("TimeFilter# 時間の計測を開始します。");
long start = System.currentTimeMillis();
try {
// Servletを呼び出す。または、別のfliterを呼び出す。
chain.doFilter(request,response);
}
catch(Exception e) {
System.out.println("Error");
}
//処理時間の計測終了
finally {
long end = System.currentTimeMillis();
System.out.println("TimeFilter# 処理時間は,"+ (end - start) + "ms でした。");
}
}
//destroy
public void destroy() {
}
}
⑤FilterRegister.java
FilterRegister.java
package listener;
import java.util.EnumSet;
import javax.servlet.DispatcherType;
import javax.servlet.Filter;
import javax.servlet.FilterRegistration;
import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;
import filter.TimeFilter;
@WebListener
public class FilterRegister implements ServletContextListener{
@Override
public void contextInitialized(ServletContextEvent servletContextEvent) {
System.out.println("START FilterRegister#contextInitialized()");
ServletContext context = servletContextEvent.getServletContext();
//呼び出すFilterの登録
addFilter(context , "TimeFilter" , TimeFilter.class, "/echo" );
//複数Filterを順序を指定して呼び出す際は、呼び出す順番で以下にaddFilter()を追記
//addFilter(context , "フィルターのクラス名" , フィルターのクラス名.class, "URL" );
System.out.println("END FilterRegister#contextInitialized()");
}
private void addFilter(ServletContext context, String filterName , Class<? extends Filter> filterClass , String... urlPatterns) {
context.addFilter(filterName, filterClass);
FilterRegistration filterRegistration = context.getFilterRegistration(filterName);
EnumSet<DispatcherType> dispatcherTypes = EnumSet.of(DispatcherType.REQUEST , DispatcherType.FORWARD );
filterRegistration.addMappingForUrlPatterns (dispatcherTypes , false , urlPatterns);
}
@Override
public void contextDestroyed(ServletContextEvent servletContextEvent) {
}
}
⑥DBAccessor.java
DBAccessor.java
package dbaccessor;
import dao.Textdata;
import dao.TextdataDao;
import java.util.List;
import java.util.ArrayList;
import java.io.IOException;
import javax.security.auth.message.callback.PrivateKeyCallback.Request;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
import java.sql.ResultSet;
//対応するjspのFormのaction名
@WebServlet(urlPatterns = {"/dbaccess"})
//Validation機能を持たせたEchoサーブレットクラス
public class DBAccessor extends HttpServlet{
private static final long serialVersionUID = 1L;
private static final String driver = "org.hsqldb.jdbcDriver";
private static final String url = "jdbc:hsqldb:hsql://localhost/mydb/textdb";
private static final String user = "SA";
private static final String password = "";
//画面からPostされた場合に起動するメインとなるメソッド
@Override
protected void doPost(HttpServletRequest request , HttpServletResponse response)throws ServletException,
IOException {
String name = request.getParameter("SubmitType");
switch(name) {
case "select":
TextdataDao textdataDao = new TextdataDao();
List<Textdata> alltextdata;
try {
alltextdata = textdataDao.selectAll(request);
printData(alltextdata);
Textdata textdata = new Textdata();
textdata.setText("テキストデータDao");
alltextdata = textdataDao.selectAll(request);
printData(alltextdata);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
break;
case "insert":
try {
Class.forName(driver);
Connection connection = DriverManager.getConnection(url,user,password);
connection.setAutoCommit(false);
insert(connection,request);
connection.commit();
connection.close();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
break;
case "update":
try {
Class.forName(driver);
Connection connection = DriverManager.getConnection(url,user,password);
connection.setAutoCommit(false);
update(connection,request);
connection.commit();
connection.close();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
break;
case "delete":
try {
Class.forName(driver);
Connection connection = DriverManager.getConnection(url,user,password);
connection.setAutoCommit(false);
delete(connection,request);
connection.commit();
connection.close();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
break;
default:
//それ以外の処理
System.out.println("error");
break;
}
//リダイレクト
//コンテキストルート（InputFunction）の取得
String contextPath = getServletContext().getContextPath();
//リダイレクトpathを設定（表示させるページ→echo.jsp）
String path = contextPath + "/echo.jsp";
//実際にリダイレクトを行っている関数
response.sendRedirect(path);
}
private void printData(List<Textdata> alltextdata) {
for (Textdata textdata : alltextdata) {
System.out.println(textdata);
}
System.out.println();
}
//Insert
protected void insert(Connection connection,HttpServletRequest request) throws SQLException {
Statement statement = connection.createStatement();
HttpSession session = request.getSession();
try{
String inserttext = session.getAttribute("message").toString();
String sql = "INSERT INTO textdata (text) VALUES('" +inserttext + "')";
int updateCount = statement.executeUpdate(sql);
if (updateCount == 1) {
session.setAttribute("SQLmessage","登録成功");
System.out.println("登録成功");
} else {
session.setAttribute("SQLmessage","登録失敗");
System.out.println("登録失敗");
}
} catch (RuntimeException e) {
session.setAttribute("SQLmessage","登録失敗");
System.out.println("登録失敗");
statement.close();
return;
}
statement.close();
}
//Update
protected void update(Connection connection,HttpServletRequest request) throws SQLException {
Statement statement = connection.createStatement();
HttpSession session = request.getSession();
try {
String updatetext = session.getAttribute("message").toString();
String sql = "UPDATE textdata SET text = 'Updateテキストデータ' WHERE text = '"+updatetext+"'";
int updateCount = statement.executeUpdate(sql);
if (updateCount == 1) {
session.setAttribute("SQLmessage","更新成功");
System.out.println("更新成功");
} else {
session.setAttribute("SQLmessage","更新失敗");
System.out.println("更新失敗");
}
} catch (RuntimeException e) {
session.setAttribute("SQLmessage","更新失敗");
System.out.println("更新失敗");
statement.close();
return;
}
statement.close();
}
protected void delete(Connection connection , HttpServletRequest request) throws SQLException {
Statement statement = connection.createStatement();
String sql = "DELETE FROM textdata ";
HttpSession session = request.getSession();
int updateCount = statement.executeUpdate(sql);
if (updateCount >= 1) {
session.setAttribute("SQLmessage","削除成功");
System.out.println("削除成功");
} else {
session.setAttribute("SQLmessage","削除失敗");
System.out.println("削除失敗");
}
statement.close();
}
}
⑦Textdata.java
Textdata.java
package dao;
public class Textdata{
private String text;
public void setText(String text) {
this.text = text;
}
public String getText() {
return text;
}
@Override
public String toString() {
return "Textdata [ text = " + text + " ] ";
}
}
⑧TextdataDAO.java
TextdataDAO.java
package dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class TextdataDao {
static {
String driver = "org.hsqldb.jdbcDriver";
try {
Class.forName(driver);
} catch(ClassNotFoundException e){
throw new RuntimeException(e);
}
}
private static Connection getConnection() throws SQLException{
String url = "jdbc:hsqldb:hsql://localhost/mydb/textdb";
String user = "SA";
String password = "";
Connection connection = DriverManager.getConnection(url , user , password);
connection.setAutoCommit(false);
return connection;
}
public List<Textdata> selectAll(HttpServletRequest request) throws SQLException{
Connection connection = getConnection();
String sql = "SELECT * FROM textdata";
PreparedStatement statement = connection.prepareStatement(sql);
List<Textdata> ret = new ArrayList<Textdata>();
HttpSession session = request.getSession();
ArrayList<String> textlist = new ArrayList<String>();
int count = 0;
ResultSet rs = statement.executeQuery();
while (rs.next()) {
Textdata textdata = new Textdata();
String Text =rs.getString("text");
textdata.setText(Text);
System.out.println(Text);
textlist.add(Text);
count ++ ;
}
session.setAttribute("SQLmessage","読込成功");
session.setAttribute("Resultmessage",textlist);
if(count == 0) {
session.setAttribute("Resultmessage","登録されているテキストデータはありません");
}
rs.close();
statement.close();
connection.close();
return ret;
}
public int insert (Textdata textdata) throws SQLException {
Connection connection = getConnection();
String getIdsql = " SELECT NEXT VALUES FOR my_seq "
+ " FROM information_schema.system_tables "
+ " WHERE table_name = 'SYSTEM_TABLES' " ;
PreparedStatement statement = connection.prepareStatement(getIdsql);
ResultSet rs = statement.executeQuery();
rs.next();
//int id = rs.get)nt(1);
rs.close();
statement.close();
//textdata.setId(id);
String sql = " INSERT INTO textdata (text) VALUES (?) ";
statement = connection.prepareStatement(sql);
//statement.setInt(1, id);
//statement.setInt(2, textdata.getText());
//statement.setInt(1, id);
int updateCount = statement.executeUpdate();
statement.close();
connection.commit();
connection.close();
return updateCount;
}
}
⑨TwitterLike.css
TwitterLike.css
@charset "utf-8";
h3{
height:20px;
width:20px;
color : #ffffff; /* 文字色 */
background: #549DD1; /* 背景色 */
text-align : center; /* 文字位置 */
vertical-align: 13px; /* 垂直位置 */
border : 1px solid #003300; /* 枠の指定 */
font-family:'メイリオ', 'Meiryo', sans-serif; /* フォント */
}
label{
font-family:'メイリオ', 'Meiryo', sans-serif; /* フォント */
font-weight: bold; /* フォント太さ */
background: #f5f5f5; /* 背景色 */
}
a{
font-family:'メイリオ', 'Meiryo', sans-serif; /* フォント */
cursor : default; /* カーソル */
}
#SQLresult{
font-family:'メイリオ', 'Meiryo', sans-serif; /* フォント */
font-size: 20px; /* 文字サイズ */
background: #f5f5f5; /* 背景色 */
}
#reset{
font-family:'メイリオ', 'Meiryo', sans-serif; /* フォント */
font-size: 13px; /* 文字サイズ */
cursor : pointer; /* カーソル */
}
#reset:hover{
cursor : pointer; /* カーソル */
font-weight: bold; /* フォント太さ */
}
input[type="text"] {
height:30px;
width:300px;
font-size: 15px; /* 文字サイズ */
font-family:'メイリオ', 'Meiryo', sans-serif; /* フォント */
border : 1px solid #003300; /* 枠の指定 */
}
input[type="submit"] {
/* マウスが載ったとき */
display: inline-flex;
border-radius: 40px; /* 角丸 */
font-size: 13px; /* 文字サイズ */
text-align : center; /* 文字位置 */
cursor : pointer; /* カーソル */
padding: .8em 1.5em; /* 余白 */
background: #00acee; /* 背景色 */
color : #ffffff; /* 文字色 */
line-height : 1em; /* 1行の高さ */
margin: 10px; /* マージン */
border : 1px solid #003300; /* 枠の指定 */
font-family:'メイリオ', 'Meiryo', sans-serif; /* フォント */
font-weight: bold; /* フォント太さ */
}
input[type="submit"]:hover {
/* マウスが載ったとき */
display: inline-flex;
border-radius: 40px; /* 角丸 */
font-size: 13px; /* 文字サイズ */
text-align : center; /* 文字位置 */
cursor : pointer; /* カーソル */
padding: .8em 1.5em; /* 余白 */
background: #0096D1; /* 背景色 */
color : #ffffff; /* 文字色 */
line-height : 1em; /* 1行の高さ */
margin: 10px; /* マージン */
border : 1px solid #003300; /* 枠の指定 */
font-family:'メイリオ', 'Meiryo', sans-serif; /* フォント */
font-weight: bold; /* フォント太さ */
}
input[type="submit"]:active {
/* クリックされたとき */
display: inline-flex;
border-radius: 40px; /* 角丸 */
font-size: 13px; /* 文字サイズ */
text-align : center; /* 文字位置 */
cursor : pointer; /* カーソル */
padding: .8em 1.5em; /* 余白 */
background: #0096D1; /* 背景色 */
color : #ffffff; /* 文字色 */
line-height : 1em; /* 1行の高さ */
margin: 10px; /* マージン */
border : 1px solid #003300; /* 枠の指定 */
font-family:'メイリオ', 'Meiryo', sans-serif; /* フォント */
font-weight: bold; /* フォント太さ */
}
○さいごに
いかがだったでしょうか。
最後までお読みいただきありがとうございました。
WebApp開発を進めていきましょう。
○参考
本記事は、以下の書籍を参考にしています。
より詳しく知りたい方は、どうぞ。
Discussion