2013-07-15から1日間の記事一覧

Q12 ボタンのように機能するリンクを設定

<html lang="ja"> <head> <meta charset="UTF-8"> <title>ボタンのように機能するリンクを設定しなさい</title> <style> body,ul,li { margin: 0; padding: 0; } a { text-decoration: none; } body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; padding: 50px 0 0 100px; } ul { width: 220px; list-styl</meta></head></html>…

Q11 リンクにマウスが乗った時に文字がオレンジ色になるよう指定

<html lang="ja"> <head> <meta charset="UTF-8"> <title>リンクにマウスが乗った時に文字がオレンジ色になるよう指定</title> <style> body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } h1 { font-size: 16px; } p a { border-bottom: 1px dotted skyblue; color: skyblue; } p a:hover { color: oran</meta></head></html>…

Q14 様々な文字の設定

<html lang="ja"> <head> <meta charset="UTF-8"> <title>様々な文字の設定</title> <style> p { padding: 0; margin: 0; } body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; letter-spacing: -0.1em; font-weight: 500; } p#a { font-size: 100%; } p#b { font-size: 1em; } p#c { font-siz…</meta></head></html>

Q13 様々な枠線の設定

<html lang="ja"> <head> <meta charset="UTF-8"> <title>様々な枠線の設定</title> <style> body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; width: 400px; font-size: 18px; } p#a { border: 1px solid; padding:5px } p#b { border: 3px solid; padding: 5px; } p#c { border: 1px solid…</meta></head></html>