<style>
#click_button{
border-radius:10px;
font-size:20px;
}
#result_area{
//ここに要素を追加する
}
>/style>HTMLファイル内に上記のようにスタイルシートのコードを書いたとします。コードが長くなってHTMLの記述が読み難くなった時、新しいファイルを作成して、記述を外出しします。
今回はstyle.cssというファイルを生成して、コードを移行します。
切り出し前のファイルをindex.htmlだとすると、index.htmlがあるフォルダ内にcssフォルダを作成し、cssフォルダ内にstyle.cssファイルを作ります。style.cssファイルには、
#click_button{
border-radius:10px;
font-size:20px;
}
#result_area{
//ここに要素を追加する
}切り出し元のindex.htmlに記述されていたスタイルシートのコードから、を抜いたものを記載し、
index.htmlの方は、
<link rel="stylesheet" href="./css/style.css" type="text/css">
中身を抜いた<style>タグに上記の様にhref=”./css/style.css”と追加すると、切り出したスタイルシートのコードを読み込み実行することができます。
他ページでも同じスタイルシートを使いたい場合に外部ファイルに切り出してまとめておくと便利です。
例:コードを切り出した後のindex.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>button</title> <link rel="stylesheet" href="./css/style.css" type="text/css"> </head> <body> <input type="button" id="click_button" value="押す"> </body> </html>
0 件のコメント:
コメントを投稿