{"id":132,"date":"2017-06-16T16:08:25","date_gmt":"2017-06-16T07:08:25","guid":{"rendered":"https:\/\/webst8.com\/code\/?p=132"},"modified":"2024-08-18T08:31:10","modified_gmt":"2024-08-17T23:31:10","slug":"css-major-basic-property","status":"publish","type":"post","link":"https:\/\/webst8.com\/code\/css-major-basic-property\/","title":{"rendered":"\u3010CSS HTML\u3011CSS\u30b3\u30fc\u30c9\u306e\u66f8\u304d\u65b9\u3068\u30d7\u30ed\u30d1\u30c6\u30a3\u30fb\u30bf\u30b0\u4e00\u89a7"},"content":{"rendered":"<p>\u4eca\u56de\u306f\u3001\u3053\u308c\u304b\u3089\u81ea\u5206\u3067\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u4f5c\u6210\u3057\u3088\u3046\u3068CSS\u306e\u52c9\u5f37\u3092\u59cb\u3081\u305f\u521d\u5fc3\u8005\u306e\u65b9\u5411\u3051\u306b\u3001CSS\u306e\u57fa\u672c\u3068\u66f8\u304d\u65b9\u3084\u3088\u304f\u4f7f\u3046\u30d7\u30ed\u30d1\u30c6\u30a3\u4e00\u89a7\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n<p>\u203bHTML\u3092\u52c9\u5f37\u3057\u305f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/\">\u3010\u521d\u5fc3\u8005\u5411\u3051\u3011\u77e5\u3063\u3066\u304a\u304d\u305f\u3044HTML\u306e\u57fa\u672c\u3068\u3088\u304f\u4f7f\u3046\u30bf\u30b0\u4e00\u89a7\u300d<\/a>\u306e\u8a18\u4e8b\u3092\u3054\u53c2\u8003\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<div class=\"list-frame primary\">\n<p class=\"list-frame-p\">HTML\u30fbCSS\u3092\u66f8\u304f\u969b\u306f\u958b\u767a\u7528\u30a8\u30c7\u30a3\u30bf\u30fc\u3092\u5229\u7528\u3059\u308b\u3068\u4fbf\u5229<\/p>\n<p>HTML\u30fbCSS\u306f\u30c6\u30ad\u30b9\u30c8\u306a\u306e\u3067\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u30fc\u3067\u3042\u308c\u3070\u306a\u3093\u3067\u3082\u8a18\u8ff0\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u3059\u304c\u3001Visual Studio Code (\u4ee5\u4e0bVS Code)\u306a\u3069\u306e\u958b\u767a\u7528\u30a8\u30c7\u30a3\u30bf\u30fc\u3092\u5229\u7528\u3059\u308b\u306e\u304c\u4e00\u822c\u7684\u3067\u3059\u3002<\/p>\n<p>VS Code\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/vscode-install\/\">\u3010VSCode\u3011Visual Studio Code\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u30fb\u8a2d\u5b9a\u624b\u9806<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/09\/vscode.png\" alt=\"VSCode\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u624b\u9806\" width=\"1200\" height=\"605\" class=\"alignnone size-full wp-image-28069\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/09\/vscode.png 1200w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/09\/vscode-300x151.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/09\/vscode-1024x516.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/09\/vscode-768x387.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/div>\n<div class=\"sb-type-drop\">\n\t<div class=\"sb-subtype-a\">\n\t\t<div class=\"sb-speaker\">\n\t\t\t<div class=\"sb-icon\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/plugins\/speech-bubble\/img\/girl-question.jpg\" class=\"sb-icon\">\n\t\t\t<\/div>\n\t\t\t<div class=\"sb-name\"><\/div>\n\t\t<\/div>\n\t\t<div class=\"sb-content\">\n\t\t\t<div class=\"sb-speech-bubble\">\u524d\u56de\u3001HTML\u3092\u52c9\u5f37\u3057\u3066\u7c21\u5358\u306aWeb\u30da\u30fc\u30b8\u304c\u4f5c\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u305f\u3060\u3001\u3082\u3063\u3068\u8272\u3092\u3064\u3051\u305f\u308a\u7dba\u9e97\u306a\u30b5\u30a4\u30c8\u3092\u4f5c\u6210\u3057\u305f\u3044\u3093\u3067\u3059\u304c\u3069\u3046\u3059\u308c\u3070\u826f\u3044\u306e\u3067\u3057\u3087\u3046\u304b\uff1f\uff1f <\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<div class=\"sb-type-drop\">\n\t<div class=\"sb-subtype-b\">\n\t\t<div class=\"sb-speaker\">\n\t\t\t<div class=\"sb-icon\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/plugins\/speech-bubble\/img\/keisuke.jpg\" class=\"sb-icon\">\n\t\t\t<\/div>\n\t\t\t<div class=\"sb-name\"><\/div>\n\t\t<\/div>\n\t\t<div class=\"sb-content\">\n\t\t\t<div class=\"sb-speech-bubble\">HTML\u3067\u4f5c\u3063\u305f\u30da\u30fc\u30b8\u3092\u7dba\u9e97\u306b\u88c5\u98fe\u3059\u308b\u306b\u306fCSS\u3092\u5229\u7528\u3057\u307e\u3059\u3002\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u4e0a\u306e\u307b\u3068\u3093\u3069\u306e\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306fHTML\u3068CSS\u30bb\u30c3\u30c8\u3067\u4f5c\u3089\u308c\u3066\u3044\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001CSS\u306e\u57fa\u672c\u3068\u66f8\u304d\u65b9\u3092\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u306d\u3002<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p>\u306a\u304a\u3001\u5b9f\u969b\u306b\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u4e0a\u306b\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u516c\u958b\u3059\u308b\u306b\u306f\u30c9\u30e1\u30a4\u30f3\u3068\u30ec\u30f3\u30bf\u30eb\u30b5\u30fc\u30d0\u30fc\u3092\u501f\u308a\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p><div class=\"webst-sns-follow-container\">\n<div class=\"webst-sns-follow-title\">SNS\u30d5\u30a9\u30ed\u30fc\u3088\u308d\u3057\u304f\u304a\u9858\u3044\u3057\u307e\u3059\uff01<\/p>\n<p><span style=\"font-size: 11px;\">\u65b0\u3057\u3044\u30b3\u30f3\u30c6\u30f3\u30c4\u3084\u3001\u3088\u308a\u8a73\u7d30\u306a\u89e3\u8aac\u3092\u52d5\u753b\u3084\u30b7\u30e7\u30fc\u30c8\u52d5\u753b\u3067\u304a\u5c4a\u3051\u3057\u3066\u3044\u307e\u3059\u3002\u65e5\u3005\u306e\u60c5\u5831\u53ce\u96c6\u306b\u304a\u5f79\u7acb\u3066\u304f\u3060\u3055\u3044\u3002<\/span><\/div>\n<div class=\"webst-sns-follow-row\"><a class=\"webst-sns-button webst-sns-youtube\" href=\"https:\/\/www.youtube.com\/@webst8356\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-70744\" src=\"https:\/\/webst8.com\/blog\/wp-content\/uploads\/2025\/09\/sns-logo-youtube.png\" alt=\"\" width=\"737\" height=\"289\" \/><\/a><\/div>\n<div class=\"webst-sns-follow-row\"><a class=\"webst-sns-button webst-sns-instagram\" href=\"https:\/\/www.instagram.com\/webst8_com\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-70741\" src=\"https:\/\/webst8.com\/blog\/wp-content\/uploads\/2025\/09\/sns-logo-instagram.png\" alt=\"\" width=\"250\" height=\"315\" \/><\/a><br \/>\n<a class=\"webst-sns-button webst-sns-tiktok\" href=\"https:\/\/www.tiktok.com\/@webst8_com\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-70742\" src=\"https:\/\/webst8.com\/blog\/wp-content\/uploads\/2025\/09\/sns-logo-tiktok.png\" alt=\"\" width=\"214\" height=\"305\" \/><\/a><br \/>\n<a class=\"webst-sns-button webst-sns-twitter-x\" href=\"https:\/\/x.com\/mattsunkei\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-70743\" src=\"https:\/\/webst8.com\/blog\/wp-content\/uploads\/2025\/09\/sns-logo-x.png\" alt=\"\" width=\"219\" height=\"301\" \/><\/a><\/div>\n<\/div>\n<\/p>\n<p>&nbsp;<\/p>\n<h2>CSS\u3068\u306f<\/h2>\n<h3>HTML\u306e\u304a\u3055\u3089\u3044\u30fbHTML\u30bf\u30b0\u4e00\u89a7<\/h3>\n<p>\u524d\u56de\u306e\u8a18\u4e8b(<a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/\">HTML\u306e\u57fa\u672c\u3068\u3088\u304f\u4f7f\u3046\u30bf\u30b0<\/a>)\u3067\u306f\u3001HTML\u3092\u4f7f\u3063\u3066\u300c\u3053\u308c\u306f\u898b\u51fa\u3057\u300d\u3001\u300c\u3053\u308c\u306f\u6587\u7ae0\u300d\u3001\u300c\u3053\u308c\u306f\u753b\u50cf\u300d\u3001\u300c\u3053\u308c\u306f\u30ea\u30f3\u30af\u300d\u306a\u3069\u5b9a\u7fa9\u3057\u3066\u3044\u304d\u307e\u3057\u305f\u3002<\/p>\n<p>HTML\u3068\u306fHyper Text Markup Language\u306e\u7565\u3067\u3059\u3002Web\u30da\u30fc\u30b8\u306e\u69cb\u9020\u3092\u5b9a\u7fa9\u3059\u308b\u8a00\u8a9e\u306e\u3053\u3068\u3067\u3059\u3002<\/p>\n<p>HTML\u3092\u4eba\u306b\u4f8b\u3048\u308b\u3068\u3001<b>\u300c\u982d\u304c\u4e00\u3064\u300d\u3042\u3063\u3066\u3001\u305d\u306e\u4e2d\u306b\u300c\u76ee\u304c\u4e8c\u3064\u300d\u300c\u9f3b\u304c\u4e00\u3064\u300d\u300c\u53e3\u304c\u4e00\u3064\u300d\u3068\u3044\u3063\u305f\u3088\u3046\u306b\u4eba\u306e\u69cb\u9020\u3092\u5b9a\u7fa9\u3057\u3066\u3044\u304f\u306e\u3068\u540c\u3058<\/b>\u3067\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4eba\u306e\u69cb\u9020\u306e\u5b9a\u7fa9\u306b\u4f8b\u3048\u305f\u30a4\u30e1\u30fc\u30b8<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/person-normal.png\" alt=\"HTML\u3067\u4eba\u306e\u57fa\u672c\u69cb\u9020\u3092\u5b9a\u7fa9\" width=\"470\" height=\"470\" class=\"alignnone size-full wp-image-4698\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/person-normal.png 470w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/person-normal-150x150.png 150w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/person-normal-300x300.png 300w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u3088\u308a\u5177\u4f53\u7684\u306b\u8a00\u3046\u3068\u3001HTML\u3067\u306f&lt;html&gt;\u301c&lt;\/html&gt;\u306e\u3088\u3046\u306b\u3001&lt; &gt;\u3067\u56f2\u3093\u3060\u300e\u30bf\u30b0\u300f\u3068\u8a00\u308f\u308c\u308b\u304b\u305f\u307e\u308a\u3092\u4f7f\u3063\u3066\u3001\u300c\u3053\u308c\u306f\u898b\u51fa\u3057\u300d\u300c\u3053\u308c\u306f\u6587\u7ae0\u300d\u300c\u3053\u308c\u306f\u753b\u50cf\u300d\u300c\u3053\u308c\u306f\u30ea\u30f3\u30af\u300d\u306a\u3069\u5b9a\u7fa9\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/html-source.png\" alt=\"HTML\u5165\u9580\u3000\u57fa\u672c\u69cb\u9020\u3000\u30bd\u30fc\u30b9\" width=\"605\" height=\"344\" class=\"alignnone size-full wp-image-5638 responsive-img\" \/><br \/>\n&nbsp;<\/p>\n<p>HTML\u3067\u8a18\u8ff0\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u3092Web\u30d6\u30e9\u30a6\u30b6\u3067\u958b\u304f\u3068\u3001\u30d6\u30e9\u30a6\u30b6\u304c\u4e0a\u8a18\u306e\u8a18\u8ff0\u3092\u89e3\u91c8\u3057\u3066\u3001\u666e\u6bb5\u898b\u3066\u3044\u308bWeb\u30da\u30fc\u30b8\u3068\u3057\u3066\u898b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/html-sample-display.png\" alt=\"HTML\u5165\u9580\u3000\u57fa\u672c\u69cb\u9020\u3000\u30d6\u30e9\u30a6\u30b6\u8868\u793a\u6642\" width=\"562\" height=\"487\" class=\"alignnone size-full wp-image-5640 responsive-img\" \/><br \/>\n&nbsp;<\/p>\n<p>HTML\u306e\u30bf\u30b0\u4e00\u89a7\u306f\u4e0b\u8a18\u306e\u901a\u308a\u3002<br \/>\n<table class=\"table\">\n<thead>\n<tr>\n<th style=\"width:20%;\">HTML\u30bf\u30b0<\/th>\n<th style=\"width:20%;\">\u610f\u5473<\/th>\n<th style=\"width:60%;\">\u5099\u8003<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#p\">\u6bb5\u843d<\/a><\/td>\n<td>p<\/td>\n<td>\u30d1\u30e9\u30b0\u30e9\u30d5(\u6bb5\u843d)\u306f\u3001p\u30bf\u30b0\u3092\u5229\u7528\u3057\u307e\u3059\u3002p\u306fParagraph\u306e\u7565\u3067\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#br\">\u6539\u884c<\/a><\/td>\n<td>br<\/td>\n<td>\u30c6\u30ad\u30b9\u30c8\u5185\u30fb\u9593\u3067\u6539\u884c\u3059\u308b\u305f\u3081\u306b\u306f\u3001br\u30bf\u30b0\u3092\u5229\u7528\u3057\u307e\u3059\u3002br\u3068\u306fBreak\uff08\u6539\u884c\uff09\u306e\u7565\u3067\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#h1h6\">\u898b\u51fa\u3057<\/a><\/td>\n<td>h1\u301ch6<\/td>\n<td>\u898b\u51fa\u3057\u306f\u3001h1~h6\u30bf\u30b0\u3092\u5229\u7528\u3057\u307e\u3059\u3002\u898b\u51fa\u3057\u306f\u3001\u66f8\u7c4d\u306e\u7ae0\u7acb\u3066\u306e\u300c\u7ae0\u300d\u306b\u76f8\u5f53\u3057\u307e\u3059\u3002h1\u301ch6\u306eh\u306fheading\u306e\u7565\u3067\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#img\">\u753b\u50cf<\/a><\/td>\n<td>img<\/td>\n<td>\u753b\u50cf\u3092\u8868\u793a\u3059\u308b\u306b\u306f\u3001img\u30bf\u30b0\u3092\u5229\u7528\u3057\u307e\u3059\u3002img\u306fImage\u306e\u7565\u3067\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#a\">\u30ea\u30f3\u30af<\/a><\/td>\n<td>a<\/td>\n<td>Web\u30b5\u30a4\u30c8\u3084\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u4f5c\u6210\u3059\u308b\u306b\u306f\u3001a\u30bf\u30b0\u3092\u5229\u7528\u3057\u307e\u3059\u3002a\u30bf\u30b0\u306f\u30a2\u30f3\u30ab\u30fc\uff08Anchor\uff09\u306e\u7565\u3067\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\"><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#ulli_oll\">\u9806\u756a\u306a\u3057\u30ea\u30b9\u30c8<\/a><\/td>\n<td>ul<\/td>\n<td>\u7b87\u6761\u66f8\u304d\u306e\u3088\u3046\u306b\u30ea\u30b9\u30c8\u8868\u793a\u3059\u308b\u5834\u5408\u306f\u3001ul\u3068li\u3092\u5229\u7528\u3057\u307e\u3059\u3002ul\u306fUnoder list(\u9806\u5e8f\u306e\u306a\u3044\u30ea\u30b9\u30c8)\u306e\u7565\u3067\u3059\u3002\n <\/td>\n<\/tr>\n<tr>\n<td>li<\/td>\n<td>li\u306fList Item\u306e\u7565\u3067\u5404\u9805\u76ee\u3092li\u3067\u304f\u304f\u308a\u307e\u3059\u3002ul\u306e\u4e2d\u306bli\u304c\u5165\u308a\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\"><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#ulli_olli\">\u9806\u756a\u3042\u308a\u30ea\u30b9\u30c8<\/a><\/td>\n<td>ol<\/td>\n<td>\u9806\u5e8f\u306e\u3042\u308b\u7b87\u6761\u66f8\u304d\u306e\u3088\u3046\u306b\u30ea\u30b9\u30c8\u8868\u793a\u3059\u308b\u5834\u5408\u306f\u3001ol\u3068li\u3092\u5229\u7528\u3057\u307e\u3059\u3002ol\u306fOder list(\u9806\u5e8f\u306e\u3042\u308b\u30ea\u30b9\u30c8)\u306e\u7565\u3067\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>li<\/td>\n<td>li\u306fList Item\u306e\u7565\u3067\u5404\u9805\u76ee\u3092li\u3067\u304f\u304f\u308a\u307e\u3059\u3002ol\u306e\u4e2d\u306bli\u304c\u5165\u308a\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"3\"><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#dldtdd\">\u8aac\u660e\u30ea\u30b9\u30c8<\/a><\/td>\n<td>dl<\/td>\n<td>\u8aac\u660e\u30ea\u30b9\u30c8\uff08\u8aac\u660e\u3059\u308b\u7528\u8a9e\u3068\u305d\u306e\u7528\u8a9e\u306e\u8aac\u660e\u3092\u4e00\u5bfe\u306b\u3057\u305f\u30ea\u30b9\u30c8\uff09\u3092\u4f5c\u308b\u969b\u306fdl\u3092\u5229\u7528\u3057\u307e\u3059\u3002dl\u306fDescription List\u306e\u7565\u3067\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>dt<\/td>\n<td>\u7528\u8a9e\u306fdt\u3092\u5229\u7528\u3057\u307e\u3059\u3002dt\u306fDefinition Term\u306e\u7565\u3067\u3059\u3002dt\u306fdl\u306e\u4e2d\u306b\u5165\u308a\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>dd<\/td>\n<td>\u7528\u8a9e\u306e\u8aac\u660e\u306fdd\u3092\u5229\u7528\u3057\u307e\u3059\u3002dd\u306fDefinition Description\u306e\u7565\u3067\u3059\u3002dd\u306fdl\u306e\u4e2d\u306b\u5165\u308a\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"4\"><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#table\">\u30c6\u30fc\u30d6\u30eb(\u8868)<\/a><\/td>\n<td>table<\/td>\n<td>\u30c6\u30fc\u30d6\u30eb\u3092\u5b9a\u7fa9\u3057\u307e\u3059<\/td>\n<\/tr>\n<tr>\n<td>tr<\/td>\n<td>table row\u306e\u7565\u3002\u30c6\u30fc\u30d6\u30eb\u306e\u884c\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>th<\/td>\n<td>table header\u306e\u7565\u3002\u30c6\u30fc\u30d6\u30eb\u306e\u898b\u51fa\u3057\u9805\u76ee\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>td<\/td>\n<td>table data\u306e\u7565\u3002\u30c6\u30fc\u30d6\u30eb\u306e\u30c7\u30fc\u30bf\u9805\u76ee\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#div\">\u6c4e\u7528\u30bf\u30b0div<\/a><\/td>\n<td>div<\/td>\n<td>\u30bf\u30b0\u81ea\u4f53\u306f\u7279\u5b9a\u306e\u610f\u5473\u3092\u6301\u3061\u307e\u305b\u3093\u304c\u3001\u30bf\u30b0\u3069\u3046\u3057\u3092\u30b0\u30eb\u30fc\u30d7\u5316\u3057\u305f\u308a\u3059\u308b\u969b\u306bdiv\u30bf\u30b0\u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#span\">\u6c4e\u7528\u30bf\u30b0span<\/a><\/td>\n<td>span<\/td>\n<td>div\u30bf\u30b0\u3068\u540c\u3058\u3088\u3046\u306b\u3001span\u81ea\u8eab\u306f\u7279\u306b\u610f\u5473\u3092\u6301\u3063\u3066\u3044\u307e\u305b\u3093\u304c\u3001\u56f2\u3093\u3060\u7bc4\u56f2\u3092\u3072\u3068\u304b\u305f\u307e\u308a\u306e\u30b0\u30eb\u30fc\u30d7\u3068\u3059\u308b\u306e\u306b\u3001span\u30bf\u30b0\u3092\u5229\u7528\u3057\u307e\u3059\u3002div\u30bf\u30b0\u304c\u6539\u884c\u304c\u5165\u308b\u306e\u306b\u5bfe\u3057\u3066\u3001span\u306f\u6539\u884c\u304c\u5165\u308a\u307e\u305b\u3093\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#pre\">\u6c34\u5e73\u7dda<\/a><\/td>\n<td>hr<\/td>\n<td>\u6c34\u5e73\u7dda\u3092\u5f15\u3044\u3066\u6587\u66f8\u3092\u533a\u5207\u308b\u5834\u5408\u306fhr\u30bf\u30b0\u3092\u5229\u7528\u3057\u307e\u3059\u3002hr\u306fHorizontal Rule\u306e\u7565\u3067\u3059\u3002\u7d42\u4e86\u30bf\u30b0\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#blockquote\">\u5f15\u7528<\/a><\/td>\n<td>blockquote<\/td>\n<td>blockquote\u306f\u6587\u7ae0\u3092\u5f15\u7528\u30fb\u8ee2\u8f09\u3059\u308b\u969b\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002blockquote\u3067\u56f2\u307e\u308c\u305f\u90e8\u5206\u304c\u5f15\u7528\u30fb\u8ee2\u8f09\u90e8\u5206\u306b\u306a\u308a\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#video\">\u52d5\u753b<\/a><\/td>\n<td>video<\/td>\n<td>mp4\u306a\u3069\u306e\u52d5\u753b\u3092\u518d\u751f\u3059\u308b\u5834\u5408\u306b\u306fvideo\u30bf\u30b0\u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#pre\">\u6574\u5f62\u6e08\u307f\u30c6\u30ad\u30b9\u30c8<\/a><\/td>\n<td>pre<\/td>\n<td>pre\u30bf\u30b0\u3092\u5229\u7528\u3057\u3066\u6574\u5f62\u6e08\u307f\u30c6\u30ad\u30b9\u30c8\u3068\u3057\u3066\u8a18\u8ff0\u3067\u304d\u307e\u3059\u3002pre\u306fPreformatted Text\uff08\u6574\u5f62\u6e08\u307f\u30c6\u30ad\u30b9\u30c8\uff09 \u306e\u7565\u3067\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"4\"><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#form\">\u30d5\u30a9\u30fc\u30e0<\/a><\/td>\n<td>form<\/td>\n<td>\u304a\u554f\u3044\u5408\u308f\u305b\u30d5\u30a9\u30fc\u30e0\u306a\u3069\u306e\u30d5\u30a9\u30fc\u30e0\u306fform\u30bf\u30b0\u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>input<\/td>\n<td>form\u30bf\u30b0\u306e\u4e2d\u306b\u5165\u308c\u308b\u5165\u529b\u9805\u76ee\u306binput\u30bf\u30b0\u304c\u3042\u308a\u307e\u3059\u3002\u30c6\u30ad\u30b9\u30c8\u9805\u76ee\u3001\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3001\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3001\u30d1\u30b9\u30ef\u30fc\u30c9\u306a\u3069\u5165\u529b\u9805\u76ee\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>select<\/td>\n<td>form\u30bf\u30b0\u306e\u4e2d\u306b\u5165\u308c\u308b\u5165\u529b\u9805\u76ee\u306bselect\u30bf\u30b0\u304c\u3042\u308a\u307e\u3059\u3002\u30bb\u30ec\u30af\u30c8\u30e1\u30cb\u30e5\u30fc\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>textarea<\/td>\n<td>\u9577\u6587\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u5165\u529b\u9805\u76ee\u306b\u3057\u305f\u3044\u5834\u5408\u306f\u3001textarea\u30bf\u30b0\u3092\u5229\u7528\u3057\u307e\u3059<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#header\">\u30d8\u30c3\u30c0\u30fc<\/a><\/td>\n<td>header<\/td>\n<td>\u6587\u66f8\u4e2d\u3067\u30d8\u30c3\u30c0\u30fc\u306b\u76f8\u5f53\u3059\u308b\u90e8\u5206\u306bheader\u30bf\u30b0\u3092\u5229\u7528\u3067\u304d\u307e\u3059\u3002\u6a5f\u80fd\u7684\u306a\u610f\u5473\u306f\u306a\u304f\u610f\u5473\u7684\u306b\u30d8\u30c3\u30c0\u30fc\u90e8\u5206\u3092\u660e\u793a\u3057\u305f\u3044\u3068\u304d\u306b\u5229\u7528\u3067\u304d\u307e\u3059\u3002(\u6587\u66f8\u306e\u30d8\u30c3\u30c0\u60c5\u5831\u3092\u8868\u3059head\u30bf\u30b0\u3068\u306f\u610f\u5473\u304c\u5168\u304f\u7570\u306a\u308a\u307e\u3059\u306e\u3067\u3054\u6ce8\u610f\u304f\u3060\u3055\u3044\u3002)<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#footer\">\u30d5\u30c3\u30bf\u30fc<\/a><\/td>\n<td>footer<\/td>\n<td>\u6587\u66f8\u4e2d\u3067\u30d5\u30c3\u30bf\u30fc\u306b\u76f8\u5f53\u3059\u308b\u90e8\u5206\u306bfooter\u30bf\u30b0\u3092\u5229\u7528\u3067\u304d\u307e\u3059\u3002\u6a5f\u80fd\u7684\u306a\u610f\u5473\u306f\u306a\u304f\u610f\u5473\u7684\u306b\u30d5\u30c3\u30bf\u30fc\u90e8\u5206\u3092\u660e\u793a\u3057\u305f\u3044\u3068\u304d\u306b\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#nav\">\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3<\/a><\/td>\n<td>nav<\/td>\n<td>\u6587\u66f8\u4e2d\u3067\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306b\u76f8\u5f53\u3059\u308b\u90e8\u5206\u306bnav\u30bf\u30b0\u5229\u7528\u3067\u304d\u307e\u3059\u3002\u6a5f\u80fd\u7684\u306a\u610f\u5473\u306f\u306a\u304f\u610f\u5473\u7684\u306b\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u90e8\u5206\u3092\u660e\u793a\u3057\u305f\u3044\u3068\u304d\u306b\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/#section\">\u30bb\u30af\u30b7\u30e7\u30f3<\/a><\/td>\n<td>section<\/td>\n<td>\u6587\u66f8\u4e2d\u3067\u30bb\u30af\u30b7\u30e7\u30f3(\u304b\u305f\u307e\u308a)\u306b\u76f8\u5f53\u3059\u308b\u90e8\u5206\u306bsection\u30bf\u30b0\u3092\u5229\u7528\u3067\u304d\u307e\u3059\u3002\u6a5f\u80fd\u7684\u306a\u610f\u5473\u306f\u306a\u304f\u610f\u5473\u7684\u306b\u30bb\u30af\u30b7\u30e7\u30f3\u90e8\u5206\u3092\u660e\u793a\u3057\u305f\u3044\u3068\u304d\u306b\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<br \/>\n&nbsp;<\/p>\n<h3>HTML\u3068\u30bb\u30c3\u30c8\u3067\u4f7f\u3046\u8a00\u8a9eCSS<\/h3>\n<p><span class=\"ymarker\">\u666e\u6bb5\u898b\u3066\u3044\u308b\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3084Web\u30b5\u30a4\u30c8\u306f\u3082\u3063\u3068\u8272\u3084\u914d\u7f6e\u304c\u6574\u3063\u3066\u3044\u3066\u3001\u7dba\u9e97\u306a\u898b\u305f\u76ee\u306b\u306a\u3063\u3066\u3044\u308b\u3082\u306e\u304c\u591a\u3044<\/span>\u3067\u3059\u3002<\/p>\n<p>HTML\u3067\u5b9a\u7fa9\u3057\u305f\u6587\u66f8\u69cb\u9020\u3092\u7dba\u9e97\u306a\u898b\u305f\u76ee\u306b\u3059\u308b\u305f\u3081\u306b\u306f\u3001CSS\uff08Cascading Style Sheets\uff09\u3068\u3044\u3046\u8a00\u8a9e\u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n<p>\u305f\u3068\u3048\u3070\u3001HTML\u304c\u300c\u76ee\u304c\u4e8c\u3064\u300d\u300c\u9f3b\u304c\u4e00\u3064\u300d\u3067\u3068\u3044\u3063\u305f\u3088\u3046\u306b\u4eba\u306e\u69cb\u9020\u3092\u5b9a\u7fa9\u3059\u308b\u8a00\u8a9e\u3060\u3068\u3059\u308b\u3068\u3001<span class=\"ymarker\">CSS\u306f\u300c\u3053\u306e\u4eba\u306e\u76ee\u306f\u4e8c\u91cd\u306b\u3057\u3066\u3001\u9f3b\u306e\u9ad8\u3055\u306f2\u30bb\u30f3\u30c1\u3067\u300d\u3068\u3044\u3063\u305f\u3088\u3046\u306b\u4eba\u306e\u898b\u305f\u76ee\u3092\u8abf\u6574\u3059\u308b\u8a00\u8a9e<\/span>\u3067\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4eba\u306b\u4f8b\u3048\u305f\u30a4\u30e1\u30fc\u30b8<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/html-css-concept-image.png\" alt=\"\u4eba\u306b\u4f8b\u3048\u305f\u30a4\u30e1\u30fc\u30b8\uff09HTML\u306f\u4eba\u306e\u69cb\u9020\u3092\u5b9a\u7fa9\u3002CSS\u3067\u5341\u4eba\u5341\u8272\u306b\u898b\u305f\u76ee\u3092\u8abf\u6574\" width=\"800\" height=\"495\" class=\"alignnone size-full wp-image-4701\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/html-css-concept-image.png 800w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/html-css-concept-image-300x186.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/html-css-concept-image-768x475.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/html-css-concept-image-718x444.png 718w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u5177\u4f53\u7684\u306b\u306f<b>\u300c\u3053\u306e\u898b\u51fa\u3057\u306f\u8d64\u6587\u5b57\u3067\u300d\u300c\u3053\u306e\u6587\u7ae0\u306e\u30d5\u30a9\u30f3\u30c8\u306f30px\u3067\u300d\u300c\u3053\u306e\u30b0\u30eb\u30fc\u30d7\u306f\u9752\u7dda\u3067\u56f2\u3080\u300d<\/b>\u306a\u3069HTML\u3067\u5b9a\u7fa9\u3057\u305f\u5185\u5bb9\u3092\u3069\u3093\u306a\u898b\u305f\u76ee\u306b\u8868\u793a\u3055\u305b\u308b\u304b\u3092CSS\u3067\u8a2d\u5b9a\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>SS\u3067\u30b9\u30bf\u30a4\u30eb\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u958b\u3044\u305f\u3068\u304d\u306b\u305d\u306e\u30b9\u30bf\u30a4\u30eb(\u898b\u305f\u76ee)\u304c\u9069\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p>\u25a0CSS\u3092\u9069\u7528\u3057\u3066\u3044\u306a\u3044\u5834\u5408\u306eH1\u30bf\u30b0\u3002\u898b\u305f\u76ee\u304c\u88c5\u98fe\u3055\u308c\u3066\u3044\u306a\u3044\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2020\/01\/h1-example-before-css.png\" alt=\"CSS\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u306a\u3044\u5834\u5408\u306eh1\u30bf\u30b0\" width=\"1000\" height=\"95\" class=\"alignnone size-full wp-image-16361\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2020\/01\/h1-example-before-css.png 1000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2020\/01\/h1-example-before-css-300x29.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2020\/01\/h1-example-before-css-768x73.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u25a0CSS\u3092\u9069\u7528\u3057\u305f\u5834\u5408\u306eH1\u30bf\u30b0\u3002\u898b\u305f\u76ee\u304c\u88c5\u98fe\u3055\u308c\u3066\u3044\u308b\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2020\/01\/h1-example-after-css.png\" alt=\"CSS\u3092\u8a2d\u5b9a\u3057\u305f\u5834\u5408\u306eh1\u30bf\u30b0\" width=\"1000\" height=\"127\" class=\"alignnone size-full wp-image-16362\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2020\/01\/h1-example-after-css.png 1000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2020\/01\/h1-example-after-css-300x38.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2020\/01\/h1-example-after-css-768x98.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;h1 style=\"background-color:#085baf;color:#fff;text-align:center;font-size:50px;\"&gt;CSS\u306e\u66f8\u304d\u65b9&lt;\/h1&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p><div class=\"sb-type-drop\">\n\t<div class=\"sb-subtype-a\">\n\t\t<div class=\"sb-speaker\">\n\t\t\t<div class=\"sb-icon\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/plugins\/speech-bubble\/img\/keisuke.jpg\" class=\"sb-icon\">\n\t\t\t<\/div>\n\t\t\t<div class=\"sb-name\"><\/div>\n\t\t<\/div>\n\t\t<div class=\"sb-content\">\n\t\t\t<div class=\"sb-speech-bubble\">HTML\u306f\u6587\u66f8\u306e\u69cb\u9020\u3092\u5b9a\u7fa9\u3059\u308b\u8a00\u8a9e\u3001\u30bb\u30c3\u30c8\u3067\u4f7f\u3046CSS\u306f\u6587\u66f8\u306e\u898b\u305f\u76ee\u3092\u8abf\u6574\u3059\u308b\u8a00\u8a9e\u3068\u3044\u3046\u70b9\u3092\u899a\u3048\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div><br \/>\n&nbsp;<\/p>\n<h3>CSS\u306e3\u3064\u306e\u66f8\u304d\u65b9<\/h3>\n<p>CSS\u306e\u66f8\u304d\u65b9\u3067\u3059\u304c\u3001\u5927\u304d\u304f3\u3064\u306e\u65b9\u5f0f\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-style-explanation.png\" alt=\"CSS\u306e\uff13\u3064\u306e\u65b9\u5f0f\u3000\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8 \u5185\u90e8\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3000\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\" width=\"1348\" height=\"689\" class=\"alignnone size-full wp-image-1029\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-style-explanation.png 1348w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-style-explanation-300x153.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-style-explanation-768x393.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-style-explanation-1024x523.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-style-explanation-718x367.png 718w\" sizes=\"(max-width: 1348px) 100vw, 1348px\" \/><br \/>\n&nbsp;<\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">CSS\u306e3\u3064\u306e\u66f8\u304d\u65b9<\/p>\n<ul>\n<li>\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u30fb\u30fb\u30fbHTML\u306e\u5404\u30bf\u30b0\u306b\u76f4\u63a5\u8a18\u8ff0\u3059\u308b\u3084\u308a\u65b9<\/li>\n<li>\u5185\u90e8\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u30fb\u30fb\u30fbstyle\u30bf\u30b0\u306e\u4e2d\u306b\u307e\u3068\u3081\u3066CSS\u3092\u8a18\u8ff0\u3059\u308b\u3084\u308a\u65b9<\/li>\n<li>\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u30fb\u30fb\u30fb\u5916\u90e8\u30d5\u30a1\u30a4\u30eb\u306bCSS\u3092\u8a18\u8ff0\u30fbCSS\u30d5\u30a1\u30a4\u30eb\u3092\u53c2\u7167\u3059\u308b\u3084\u308a\u65b9<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u305f\u3068\u3048\u3070\u3001\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u5f62\u5f0f\u3067\u306f\u3001<b>HTML\u306e\u5404\u30bf\u30b0\u306b\u76f4\u63a5\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/b><br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-inline-stylesheet-sample.png\" alt=\"CSS\u3000\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u5f62\u5f0f\u3067\u306e\u66f8\u304d\u65b9\" width=\"1000\" height=\"270\" class=\"alignnone size-full wp-image-3574\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-inline-stylesheet-sample.png 1000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-inline-stylesheet-sample-300x81.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-inline-stylesheet-sample-768x207.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-inline-stylesheet-sample-718x194.png 718w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b<\/p>\n<pre class=\"lang:default decode:true \" >&lt;h1 style=\"color:red;\"&gt;\u306f\u3058\u3081\u3066\u306eCSS&lt;\/h1&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/first-css-inline.png\" alt=\"\u306f\u3058\u3081\u3066\u306eCSS \u898b\u51fa\u3057\u304c\u8d64\u6587\u5b57\u306b\" width=\"424\" height=\"220\" class=\"alignnone size-full wp-image-857\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/first-css-inline.png 424w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/first-css-inline-300x156.png 300w\" sizes=\"(max-width: 424px) 100vw, 424px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u8907\u6570\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3059\u308b\u5834\u5408<br \/>\n\u300c\u6587\u5b57\u306f\u8d64\u8272\u3067\u80cc\u666f\u306f\u6c34\u8272\u3067\u300d\u3068\u3044\u3063\u305f\u3088\u3046\u306b\u8907\u6570\u306e\u8a2d\u5b9a\u5024\u3092\u5165\u308c\u308b\u5834\u5408\u306f\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u9593\u306b\u300c;\u300d\u3067\u533a\u5207\u3063\u3066\u4f55\u500b\u3067\u3082\u8db3\u3057\u3066\u3044\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b \u3000\u6587\u5b57\u8272\u304c\u767d\u8272\u3067\u80cc\u666f\u304c\u30e9\u30a4\u30c8\u30d6\u30eb\u30fc\u3067\u67a0\u7dda\u304c\u30b9\u30ab\u30a4\u30d6\u30eb\u30fc<\/p>\n<pre class=\"lang:default decode:true \" >&lt;h1 style=\"color:white;background-color:lightblue;border:4px solid skyblue;\"&gt;\u306f\u3058\u3081\u3066\u306eCSS&lt;\/h1&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>CSS\u306e\u66f8\u304d\u65b9\u306e\u30eb\u30fc\u30eb\u306b\u3064\u3044\u3066\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-howto-write\/\">\u3010\u521d\u5fc3\u8005\u5411\u3051\u3011CSS\u306e\u57fa\u672c\u7684\u306a\u66f8\u304d\u65b9\u30fb\u30eb\u30fc\u30eb\u3092\u5fb9\u5e95\u89e3\u8aac<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3>\u3088\u304f\u4f7f\u3046CSS\u30d7\u30ed\u30d1\u30c6\u30a3\u4e00\u89a7<\/h3>\n<p>\u4e0b\u8a18\u306b\u3088\u304f\u4f7f\u3046CSS\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u4e00\u89a7\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002\u66f8\u304d\u65b9\u306a\u3069\u306f\u5f8c\u307b\u3069\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u3002<br \/>\n<table class=\"table\">\n<thead>\n<tr>\n<th style=\"width:20%\">\u30ab\u30c6\u30b4\u30ea<\/th>\n<th style=\"width:30%\">\u30d7\u30ed\u30d1\u30c6\u30a3<\/th>\n<th style=\"width:50%\">\u610f\u5473<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td rowspan=\"5\">\u6587\u5b57\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#color\">color<\/a><\/td>\n<td>\u6587\u5b57\u306e\u8272<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#font-size\">font-size<\/a><\/td>\n<td>\u6587\u5b57\u306e\u5927\u304d\u3055(\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba)<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#font-weight\">font-weight<\/a><\/td>\n<td>\u6587\u5b57\u306e\u592a\u3055<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#text-decoration\">text-decoration<\/a><\/td>\n<td>\u30c6\u30ad\u30b9\u30c8\u306e\u88c5\u98fe<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#font-family\">font-family<\/a><\/td>\n<td>\u6587\u5b57\u306e\u5b57\u4f53<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"4\">\u30c6\u30ad\u30b9\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#text-align\">text-align<\/a><\/td>\n<td>\u30c6\u30ad\u30b9\u30c8\u3084\u753b\u50cf\u306e\u6c34\u5e73\u65b9\u5411\u306e\u4f4d\u7f6e<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#line-height\">line-height<\/a><\/td>\n<td>\u884c\u9593<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#letter-spacing\">letter-spacing<\/a><\/td>\n<td>\u5b57\u9593<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#vertical-align\">vertical-align<\/a><\/td>\n<td>\u30a4\u30c6\u30ad\u30b9\u30c8\u3084\u753b\u50cf\u306e\u7e26\u65b9\u5411\u306e\u4f4d\u7f6e<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">\u67a0\u7dda\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#border\">border<\/a><\/td>\n<td>\u67a0\u7dda<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#border-radius\">border-radius<\/a><\/td>\n<td>\u67a0\u306e\u4e38\u3055<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"3\">\u6a2a\u5e45\u3068\u9ad8\u3055\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#width\">width<\/a><\/td>\n<td>\u6a2a\u5e45<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#height\">height<\/a><\/td>\n<td>\u9ad8\u3055<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#calc\">calc()<\/a><\/td>\n<td>\u203b\u9ad8\u3055\u3084\u6a2a\u5e45\u3092\u8a08\u7b97\u3059\u308b\u95a2\u6570<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"3\">\u4f59\u767d\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#margin\">margin<\/a><\/td>\n<td>\u5916\u90e8\u4f59\u767d<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#padding\">padding<\/a><\/td>\n<td>\u5185\u90e8\u4f59\u767d<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#box-sizing\">box-sizing<\/a><\/td>\n<td>\u30dc\u30c3\u30af\u30b9\u306e\u7b97\u51fa\u65b9\u6cd5(border\u3084padding\u3092width\u3084height\u306b\u542b\u3081\u308b\u304b)<\/td>\n<\/tr>\n<tr>\n<td>\u80cc\u666f\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#background\">background<\/a><\/td>\n<td>\u80cc\u666f\u5168\u822c<\/td>\n<\/tr>\n<tr>\n<td>\u8868\u793a\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#display\">display<\/a><\/td>\n<td>\n<ul>\n<li>\u30a4\u30f3\u30e9\u30a4\u30f3\u30fb\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u306e\u5909\u66f4\uff1ainline\u3001block\u3001inline-block<\/li>\n<li>\u975e\u8868\u793a\uff1anone<\/li>\n<li>\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9(\u6a2a\u4e26\u3073)\uff1aflex<\/li>\n<li>\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8(\u6a2a\u4e26\u3073)\uff1agrid<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">\u5f71\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#box-shadow\">box-shadow<\/a><\/td>\n<td>\u30dc\u30c3\u30af\u30b9\u306e\u5f71<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#text-shadow\">text-shadow<\/a><\/td>\n<td>\u30c6\u30ad\u30b9\u30c8\u306e\u5f71<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"6\">\u4f4d\u7f6e\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#position\">position<\/a><\/td>\n<td>\n<ul>\n<li>\u76f8\u5bfe\u4f4d\u7f6e\uff1arelative<\/li>\n<li>\u7d76\u5bfe\u4f4d\u7f6e\uff1aabsolute<\/li>\n<li>\u7d76\u5bfe\u4f4d\u7f6e(\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3082\u56fa\u5b9a)\uff1afixed<\/li>\n<li>\u30b9\u30af\u30fc\u30ed\u30fc\u30eb\u9014\u4e2d\u304b\u3089\u56fa\u5b9a\uff1asticky<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>top<\/td>\n<td>\u4e0a\u304b\u3089\u306e\u4f4d\u7f6e<\/td>\n<\/tr>\n<tr>\n<td>bottom<\/td>\n<td>\u4e0b\u304b\u3089\u306e\u4f4d\u7f6e<\/td>\n<\/tr>\n<tr>\n<td>left<\/td>\n<td>\u5de6\u304b\u3089\u306e\u4f4d\u7f6e<\/td>\n<\/tr>\n<tr>\n<td>right<\/td>\n<td>\u53f3\u304b\u3089\u306e\u4f4d\u7f6e<\/td>\n<\/tr>\n<tr>\n<td>z-index<\/td>\n<td>\u91cd\u306a\u308a\u306e\u9806\u5e8f\u6307\u5b9a<\/td>\n<\/tr>\n<tr>\n<td>\u8981\u7d20\u306e\u306f\u307f\u51fa\u3057\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#overflow\">overflow<\/a><\/td>\n<td>\n<ul>\n<li>\u305d\u306e\u307e\u307e\u306f\u307f\u51fa\u3057\u3066\u8868\u793a:visible<\/li>\n<li>\u306f\u307f\u51fa\u3057\u90e8\u5206\u3092\u975e\u8868\u793a:hidden<\/li>\n<li>\u306f\u307f\u51fa\u3057\u90e8\u5206\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u8868\u793a:scroll<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>\u8981\u7d20\u306e\u56de\u8ee2\u3001\u79fb\u52d5\u3001\u4f38\u7e2e\u3001\u5909\u5f62<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#transform\">transform<\/a><\/td>\n<td>\n<ul>\n<li>\u8981\u7d20\u306e\u56de\u8ee2:rotate()<\/li>\n<li>\u8981\u7d20\u306e\u79fb\u52d5:translate()<\/li>\n<li>\u8981\u7d20\u306e\u62e1\u5927\u7e2e\u5c0f:scale()<\/li>\n<li>\u8981\u7d20\u306e\u50be\u659c:skew()<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#transition\">transition<\/a><\/td>\n<td>\u7c21\u5358\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#keyframes-animation\">keyframes\/animation<\/a><\/td>\n<td>\u3088\u308a\u591a\u5f69\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">\u6a2a\u4e26\u3073(\u6d6e\u52d5)\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#float\">float<\/a><\/td>\n<td>\u6a2a\u4e26\u3073(\u6d6e\u52d5)<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/webst8.com\/code\/css-major-basic-property\/#float\">clear<\/a><\/td>\n<td>\u6a2a\u4e26\u3073(\u6d6e\u52d5)\u306e\u89e3\u9664<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<br \/>\n&nbsp;<\/p>\n<h3>HTML\u30bf\u30b0\u306b\u3064\u3051\u308bid\u5c5e\u6027\u3068class\u5c5e\u6027<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/html-id-class.png\" alt=\"HTML\u306b\u3064\u3051\u308bid\u5c5e\u6027\u3068class\u5c5e\u6027\" width=\"800\" height=\"495\" class=\"alignnone size-full wp-image-1035\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/html-id-class.png 800w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/html-id-class-300x186.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/html-id-class-768x475.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/html-id-class-718x444.png 718w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><br \/>\n&nbsp;<\/p>\n<p>html\u306e\u5404\u30bf\u30b0\u306b\u306fid\u5c5e\u6027\u3084class\u5c5e\u6027\u3068\u3044\u3046\u5c5e\u6027\u304c\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n<div class=\"box-simple\">\n&lt;h1 id=&quot;top-h&quot;&gt;\u306f\u3058\u3081\u3066\u306eCSS&lt;\/h1&gt;<br \/>\n&lt;p class=&quot;blue-text&quot;&gt;\u3053\u306e\u6587\u7ae0\u306f\u9752\u8272\u306b\u306a\u308a\u307e\u3059&lt;\/p&gt;\n<\/div>\n<p>&nbsp;<\/p>\n<p>id\u3084class\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067CSS\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u88c5\u98fe\u3059\u308b\u969b\u306b\u3001<b>\u300c\u3053\u306eid\u540d\u304c\u3064\u3044\u3066\u3044\u308b\u30bf\u30b0\u306f\u80cc\u666f\u3092\u8d64\u8272\u306b\u3059\u308b\u300d<\/b>\u3042\u308b\u3044\u306f\u3001<b>\u300c\u3053\u306eclass\u540d\u304c\u3064\u3044\u3066\u3044\u308b\u30bf\u30b0\u306f\u6587\u5b57\u8272\u3092\u9752\u8272\u306b\u3059\u308b\u300d<\/b>\u306a\u3069\u306e\u6307\u5b9a\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p>\u25a0\u8a18\u8ff0\u4f8b (\u5185\u90e8\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u5f62\u5f0f\u3067\u8a18\u8ff0) <\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n    &lt;style media=\"screen\"&gt;\r\n      #top-h{\r\n        background: red;\r\n      }\r\n      .blue-text{\r\n        color:blue;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;h1 id=\"top-h\"&gt;\u306f\u3058\u3081\u3066\u306eCSS&lt;\/h1&gt;\r\n    \r\n    &lt;p class=\"blue-text\"&gt;\u3053\u306e\u6587\u7ae0\u306f\u9752\u6587\u5b57\u306b\u306a\u3063\u3066\u3044\u307e\u3059&lt;\/p&gt;\r\n  \r\n    &lt;h2 class=\"blue-text\"&gt;\u3053\u306e\u898b\u51fa\u3057\u3082\u9752\u6587\u5b57\u306b\u306a\u3063\u3066\u3044\u307e\u3059&lt;\/h2&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-html-idclass.png\" alt=\"CSS\u3000\u30b5\u30f3\u30d7\u30ebid\u540d\u304ctop-h\u3068\u3064\u3044\u3066\u3044\u308b\u30bf\u30b0\u306e\u80cc\u666f\u304c\u8d64\u8272\u3001class\u540d\u304cblue-text\u3068\u4ed8\u3044\u3066\u3044\u308b\u30bf\u30b0\u304c\u9752\u6587\u5b57\" width=\"836\" height=\"251\" class=\"alignnone size-full wp-image-1040\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-html-idclass.png 836w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-html-idclass-300x90.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-html-idclass-768x231.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-html-idclass-718x216.png 718w\" sizes=\"(max-width: 836px) 100vw, 836px\" \/><br \/>\n&nbsp;<\/p>\n<p>id\u306fHTML\u30d5\u30a1\u30a4\u30eb\u5185\u3067\u4e00\u610f\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u3001class\u306f\u4e00\u610f\u3067\u306a\u304f\u3068\u3082\u69cb\u3044\u307e\u305b\u3093\u3002id\u3084class\u306b\u95a2\u3059\u308b\u8a73\u7d30\u306f\u3001\u300c<a href=\"https:\/\/webst8.com\/code\/htmlcss-class-id\/\">\u3010HTML CSS\u3011class\u3068id\u5c5e\u6027\u306e\u610f\u5473\u3084\u9055\u3044\u30fb\u4f7f\u3044\u65b9\u3092\u89e3\u8aac<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h2>\u6587\u5b57\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/h2>\n<p>\u3053\u3053\u3067\u306f\u3001\u6587\u5b57\u306b\u95a2\u3059\u308b\u4ee3\u8868\u7684\u306a\u30b9\u30bf\u30a4\u30eb(\u6587\u5b57\u306e\u5927\u304d\u3055\u3001\u6587\u5b57\u306e\u8272\u3001\u6587\u5b57\u306e\u592a\u3055\u3001\u6587\u5b57\u306e\u5b57\u4f53)\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u6587\u5b57\u306b\u95a2\u3059\u308b\u4ee3\u8868\u7684\u306a\u30b9\u30bf\u30a4\u30eb<\/p>\n<ul>\n<li>\u6587\u5b57\u306e\u8272 color<\/li>\n<li>\u6587\u5b57\u306e\u5927\u304d\u3055 font-size<\/li>\n<li>\u6587\u5b57\u306e\u592a\u3055 font-weight<\/li>\n<li>\u6587\u5b57\u306e\u88c5\u98fe text-decoration<\/li>\n<li>\u6587\u5b57\u306e\u5b57\u4f53 font-family<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<h3 id=\"color\">\u6587\u5b57\u306e\u8272(color)<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-color.png\" alt=\"\" width=\"1367\" height=\"354\" class=\"alignnone size-full wp-image-971\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-color.png 1367w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-color-300x78.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-color-768x199.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-color-1024x265.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-color-718x186.png 718w\" sizes=\"(max-width: 1367px) 100vw, 1367px\" \/><\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u6587\u5b57\u306e\u8272\u306e\u6307\u5b9a\u65b9\u6cd5<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 color:\u5024;<\/li>\n<li>\u3010\u4f8b\u3011 color:red;\u307e\u305f\u306fcolor:#ff0000;\u306a\u3069<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;h1 style=\"color:blue\"&gt;\u9752\u8272\u306e\u898b\u51fa\u3057\u3060\uff01\uff01&lt;\/h1&gt;  \r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-color.png\" alt=\"h1\u30bf\u30b0\u306e\u6587\u5b57\u8272\u304c\u9752\u8272\u306e\u30b5\u30f3\u30d7\u30eb\" width=\"551\" height=\"215\" class=\"alignnone size-full wp-image-893\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-color.png 551w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-color-300x117.png 300w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u5024\u306f\u300cred\u300d\u300cblue\u300d\u306a\u3069\u306e\u3088\u3046\u306b\u8272\u3067\u6307\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3057\u3001RGB\u306e16\u9032\u6570\u8868\u8a18\u300c\u4f8b. #FF0000\u300d\u3067\u6307\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002\t \t<\/p>\n<p>\u300cred\u300d\u3001\u300cblue\u300d\u306a\u3069\u6709\u540d\u306a\u8272\u306f\u524d\u8005\u3067\u6307\u5b9a\u3067\u304d\u308b\u306e\u306b\u5bfe\u3057\u3066\u3001#FF0000\u306a\u3069\u306e16\u9032\u6570\u3067\u306f\u5408\u8a0816,777,216\u901a\u308a\u306e\u7d30\u304b\u3044\u8272\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n&nbsp;\t<\/p>\n<p>\u25a0\u53c2\u8003\uff1a<br \/>\n<a href=\"https:\/\/ja.wikipedia.org\/wiki\/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%AB%E3%83%A9%E3%83%BC#.E3.82.AB.E3.83.A9.E3.83.BC.E3.83.9E.E3.83.8D.E3.83.BC.E3.82.B8.E3.83.A1.E3.83.B3.E3.83.88\" target=\"_blank\" rel=\"noopener\">\u30a6\u30a7\u30d6\u30ab\u30e9\u30fc<\/a>\u3067\u5404\u8272\u306e\u5358\u8a9e\u304c\u308f\u304b\u308a\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/color.adobe.com\/ja\/\" target=\"_blank\" rel=\"noopener\" class=\"broken_link\">Color wheel | Color schemes &#8211; Adobe Color CC<\/a>\u3067\u81ea\u5206\u306e\u597d\u304d\u306a\u8272\u3092\u8abf\u6574\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p>\u6587\u5b57\u8272\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-color\/\">\u3010CSS color\u306e\u4f7f\u3044\u65b9\u3011\u30c6\u30ad\u30b9\u30c8\u6587\u5b57\u8272\u3092\u5909\u66f4\u3059\u308b\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"font-size\">\u6587\u5b57\u306e\u5927\u304d\u3055(\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba) font-size<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-size.png\" alt=\"\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u309260px\u306b\u3059\u308b\u4f8b\" width=\"1367\" height=\"356\" class=\"alignnone size-full wp-image-964\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-size.png 1367w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-size-300x78.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-size-768x200.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-size-1024x267.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-size-718x187.png 718w\" sizes=\"(max-width: 1367px) 100vw, 1367px\" \/><br \/>\n&nbsp;<\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u6587\u5b57\u306e\u5927\u304d\u3055(\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba)\u306e\u6307\u5b9a\u65b9\u6cd5<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 font-size:\u5024;<\/li>\n<li>\u3010\u4f8b\u3011 font-size:40px;<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b\u3000p\u30bf\u30b0\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u309240px\u306b\u3059\u308b(\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u5f62\u5f0f) <\/p>\n<pre class=\"lang:default decode:true \" >\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;p style=\"font-size:40px;\"&gt;\u3053\u306e\u6587\u7ae0\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306f40px\u3067\u3059\u3002&lt;\/p&gt;  \r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-fontsize.png\" alt=\"p\u30bf\u30b0\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba 40px\u306e\u30b5\u30f3\u30d7\u30eb\" width=\"752\" height=\"197\" class=\"alignnone size-full wp-image-888\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-fontsize.png 752w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-fontsize-300x79.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-fontsize-718x188.png 718w\" sizes=\"(max-width: 752px) 100vw, 752px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u5024\u306e\u5358\u4f4d\u306f\u7c21\u5358\u306a<b>\u300cpx\u300d<\/b>\u3092\u307e\u305a\u899a\u3048\u307e\u3057\u3087\u3046\u3002\uff08\u4ed6\u306b\u3082\u57fa\u6e96\u30b5\u30a4\u30ba\u306b\u5bfe\u3057\u3066\u6bd4\u7387\u3067\u7b97\u51fa\u3059\u308b\u65b9\u5f0f\u3067rem\u3001em\u3084%\u306a\u3069\u304c\u3042\u308a\u307e\u3059\u3002\uff09<br \/>\n&nbsp;<\/p>\n<p>\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-font-size\/\">\u3010CSS font-size\u306e\u4f7f\u3044\u65b9\u3011\u6587\u5b57\u30b5\u30a4\u30ba\u5909\u66f4(px rem em %)<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"font-weight\">\u6587\u5b57\u306e\u592a\u3055 font-weight<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-weight.png\" alt=\"\u30d5\u30a9\u30f3\u30c8\u3092\u592a\u6587\u5b57\u306b\u3059\u308b\u4f8b\" width=\"1364\" height=\"350\" class=\"alignnone size-full wp-image-967\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-weight.png 1364w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-weight-300x77.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-weight-768x197.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-weight-1024x263.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-weight-718x184.png 718w\" sizes=\"(max-width: 1364px) 100vw, 1364px\" \/><br \/>\n&nbsp;<\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u6587\u5b57\u306e\u592a\u3055<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 font-weight:\u5024;<\/li>\n<li>\u3010\u4f8b\u3011 font-weight:bold;<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b p\u30bf\u30b0\u3092\u592a\u6587\u5b57\u306b\u3059\u308b<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;p style=\"font-weight:bold;\"&gt;\u3053\u306e\u6587\u7ae0\u306f\u592a\u6587\u5b57\u3067\u3059&lt;\/p&gt;  \r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-font-weight.png\" alt=\"\u30d5\u30a9\u30f3\u30c8\u306e\u592a\u3055\u3092\u592a\u6587\u5b57\u306b\u3059\u308b\" width=\"585\" height=\"124\" class=\"alignnone size-full wp-image-968\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-font-weight.png 585w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-font-weight-300x64.png 300w\" sizes=\"(max-width: 585px) 100vw, 585px\" \/><br \/>\n&nbsp;<br \/>\n\u6587\u5b57\u306e\u592a\u3055font-weight\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-font-weight\/\">\u3010CSS font-weight\u306e\u4f7f\u3044\u65b9\u3011\u6587\u5b57\u306e\u592a\u3055\u306e\u5909\u66f4\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"text-decoration\">\u30c6\u30ad\u30b9\u30c8\u306e\u88c5\u98fe text-decoration<\/h3>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u6587\u5b57\u306e\u88c5\u98fe\u306e\u6307\u5b9a\u65b9\u6cd5<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 text-decoration:\u5024;<\/li>\n<li>\u3010\u4f8b\u3011 text-decoration:line-through; (\u6253\u3061\u6d88\u3057\u7dda)<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<br \/>\n\u30c6\u30ad\u30b9\u30c8\u306b\u4e0b\u7dda\u30fb\u4e0a\u7dda\u30fb\u6253\u3061\u6d88\u3057\u7dda\u3092\u4ed8\u3051\u305f\u308a\u3059\u308b\u306b\u306ftext-decoration\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p>\u25a0text-decoration\u306e\u30b5\u30f3\u30d7\u30eb<\/p>\n<pre class=\"lang:default decode:true \" >  &lt;p&gt;\r\n    \u4f55\u3082\u306a\u3057\u3002\r\n    &lt;span style=\"text-decoration:underline\"&gt;\u4e0b\u7dda&lt;\/span&gt;\r\n    &lt;span style=\"text-decoration:overline\"&gt;\u4e0a\u7dda&lt;\/span&gt;\r\n    &lt;span style=\"text-decoration:line-through\"&gt;\u6253\u3061\u6d88\u3057\u7dda&lt;\/span&gt;\r\n  &lt;\/p&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-text-decoration-sample.png\" alt=\"text-decoration\u306e\u30b5\u30f3\u30d7\u30eb\" width=\"287\" height=\"63\" class=\"alignnone size-full wp-image-4848\" \/><br \/>\n&nbsp;<\/p>\n<table class=\"table table-bordered\">\n<tr>\n<td>none<\/td>\n<td>\u521d\u671f\u5024\u3002\u30c6\u30ad\u30b9\u30c8\u306b\u7dda\u306a\u3069\u3064\u3051\u306a\u3044\u3002<\/td>\n<\/tr>\n<tr>\n<td>underline<\/td>\n<td>\u4e0b\u7dda\u3092\u4ed8\u3051\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>overline<\/td>\n<td>\u4e0a\u7dda\u3092\u4ed8\u3051\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>line-through<\/td>\n<td>\u6253\u3061\u6d88\u3057\u7dda\u3092\u4ed8\u304d\u307e\u3059\u3002<\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<p>text-decoration\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-text-decoration\/\">\u3010CSS text-decoration\u306e\u4f7f\u3044\u65b9\u3011\u6587\u5b57\u30c6\u30ad\u30b9\u30c8\u306e\u88c5\u98fe\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"font-family\">\u6587\u5b57\u306e\u5b57\u4f53 font-family<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-family.png\" alt=\"css\u30b5\u30f3\u30d7\u30eb\u3000\u30d5\u30a9\u30f3\u30c8\u30d5\u30a1\u30df\u30ea\u30fc\u3092MS \u660e\u671d\u306b\u3059\u308b\u4f8b\" width=\"1362\" height=\"351\" class=\"alignnone size-full wp-image-1073\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-family.png 1362w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-family-300x77.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-family-768x198.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-family-1024x264.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-font-family-718x185.png 718w\" sizes=\"(max-width: 1362px) 100vw, 1362px\" \/><\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u6587\u5b57\u306e\u7a2e\u985e(\u30d5\u30a9\u30f3\u30c8\u30d5\u30a1\u30df\u30ea\u30fc)<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 font-family:\u5024;<\/li>\n<li>\u3010\u4f8b\u3011 font-family:&#39;Hiragino Mincho ProN&#39;,&#39;\uff2d\uff33 \u660e\u671d&#39;,serif;<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;h1 style=\"font-family:'Hiragino Mincho ProN','\uff2d\uff33 \u660e\u671d',serif\"&gt;\u660e\u671d\u4f53\u306e\u898b\u51fa\u3057&lt;\/h1&gt;  \r\n    &lt;h1&gt;\u901a\u5e38\u306e\u898b\u51fa\u3057&lt;\/h1&gt; \r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-font-family.png\" alt=\"\" width=\"409\" height=\"207\" class=\"alignnone size-full wp-image-975\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-font-family.png 409w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-font-family-300x152.png 300w\" sizes=\"(max-width: 409px) 100vw, 409px\" \/><br \/>\n&nbsp;<\/p>\n<p>\uff62\uff2d\uff33 \u30b4\u30b7\u30c3\u30af\uff63\u3084\uff62\uff2d\uff33 \u660e\u671d\uff63\u306e\u3088\u3046\u306b\u30d5\u30a9\u30f3\u30c8\u540d\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002<b>\u30d5\u30a9\u30f3\u30c8\u540d\u306b\u30b9\u30da\u30fc\u30b9\u304c\u542b\u307e\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u30b7\u30f3\u30b0\u30eb\u30af\u30a9\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\uff08 &#39; \uff09\u3067\u56f2\u307f\u307e\u3059\u3002<\/b><br \/>\n&nbsp;<\/p>\n<p>\uff08\u307e\u305f\u306f\u30c0\u30d6\u30eb\u30af\u30a9\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\uff08 &quot; \uff09\u3067\u56f2\u3080\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u304c\u3001\u30a4\u30f3\u30e9\u30a4\u30f3\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u5f62\u5f0f\u3067style=&quot;&quot;\u3067\u304f\u304f\u3063\u3066\u3044\u308b\u5834\u5408\u306f\u3001\u30b7\u30f3\u30b0\u30eb\u30b3\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\uff08&#39;\uff09\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002\uff09<\/p>\n<p>(\u88dc\u8db3)\u30d5\u30a9\u30f3\u30c8\u30bf\u30a4\u30d7\u306f\u5c11\u3057\u8907\u96d1\u3067\u3001\u8907\u6570\u306e\u5024\u3092\u8a18\u8ff0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u5024\u3092\u30ab\u30f3\u30de\uff08 , \uff09\u3067\u533a\u5207\u3063\u3066\u8907\u6570\u306e\u5019\u88dc\u3092\u4e26\u3079\u307e\u3059\u3002<\/p>\n<p>\u4f8b\u3048\u3070\u3001MS\u660e\u671d\u306fWindows\u306b\u3042\u308b\u3051\u3069\u3082Mac\u306b\u306a\u3044\u30d5\u30a9\u30f3\u30c8\u3067\u3042\u308b\u305f\u3081\u3001Mac\u3067\u660e\u671d\u4f53\u3092\u8868\u793a\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n<p>\u305d\u3053\u3067\u300c&#8217;Hiragino Mincho ProN&#8217;,\u2019\uff2d\uff33 \u660e\u671d\u2019,serif\u300d\u306e\u3088\u3046\u306b\u8907\u6570\u8a18\u8ff0\u3059\u308b\u3053\u3068\u3067\u3001\u300c\u5de6\u304b\u3089\u9806\u756a\u306b\u30d5\u30a9\u30f3\u30c8\u304c\u95b2\u89a7\u3057\u3066\u3044\u308b\u7aef\u672b\u306b\u9069\u7528\u3057\u3001\u306a\u3051\u308c\u3070\u6b21\u306b\u66f8\u3044\u3066\u3042\u308b\u30d5\u30a9\u30f3\u30c8\u3092\u9069\u7528\u3059\u308b\u300d\u3068\u3044\u3063\u305f\u3088\u3046\u306a\u4f7f\u3044\u65b9\u3092\u3057\u307e\u3059\u3002<\/p>\n<p>\u4e0a\u8a18\u4f8b\u3067\u306f\u3001Mac\u3067\u306fHiragino Mincho ProN\u304c\u9069\u7528\u3055\u308c\u3066\u3001Windows\u3067\u306fM\uff33 \u660e\u671d\u304c\u9069\u7528\u3055\u308c\u3066\u3001\u3069\u3061\u3089\u3082\u306a\u3044\u5834\u5408\u306fserif\u3092\u4f7f\u3046\u3068\u3044\u3063\u305f\u5f62\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>(\u203b\u53c2\u8003)<a href=\"https:\/\/w3g.jp\/sample\/css\/font-family\" target=\"_blank\" rel=\"noopener\">font-family\u3067\u6307\u5b9a\u3067\u304d\u308b\u30d5\u30a9\u30f3\u30c8\u540d\u4e00\u89a7<\/a><\/p>\n<p>\u5b57\u4f53font-family\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-font-family\/\">\u3010CSS font-family\u306e\u4f7f\u3044\u65b9\u3011\u30d5\u30a9\u30f3\u30c8\u7a2e\u985e\u30fb\u5b57\u4f53\u306e\u5909\u66f4\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h2 id=\"text-layout\">\u30c6\u30ad\u30b9\u30c8\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/h2>\n<h3 id=\"text-align\">\u6c34\u5e73\u65b9\u5411\u306e\u4f4d\u7f6e text-align<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/text-align-explanation.png\" alt=\"text-align\u306e\u8aac\u660e\" width=\"1347\" height=\"451\" class=\"alignnone size-full wp-image-1015\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/text-align-explanation.png 1347w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/text-align-explanation-300x100.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/text-align-explanation-768x257.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/text-align-explanation-1024x343.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/text-align-explanation-718x240.png 718w\" sizes=\"(max-width: 1347px) 100vw, 1347px\" \/><\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u6c34\u5e73\u65b9\u5411\u306e\u4f4d\u7f6e text-align<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 text-align:\u5024;<\/li>\n<li>\u3010\u4f8b\u3011 text-align:center;<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b <\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;p style=\"text-align:right;border:1px brown solid;\"&gt;\u5de6\u5bc4\u305b\u306b\u306a\u308a\u307e\u3059&lt;\/p&gt;\r\n    &lt;p style=\"text-align:right;border:1px brown solid;\"&gt;\u53f3\u5bc4\u305b\u306b\u306a\u308a\u307e\u3059&lt;\/p&gt;\r\n    &lt;p style=\"text-align:center;border:1px brown solid;\"&gt;\u4e2d\u592e\u63c3\u3048\u306b\u306a\u308a\u307e\u3059&lt;\/p&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-textalign.png\" alt=\"\" width=\"1023\" height=\"233\" class=\"alignnone size-full wp-image-927\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-textalign.png 1023w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-textalign-300x68.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-textalign-768x175.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-textalign-718x164.png 718w\" sizes=\"(max-width: 1023px) 100vw, 1023px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u5024\u306b\u306f\u4ee5\u4e0b\u306e3\u3064\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<table>\n<tr>\n<th>\u9805\u76ee<\/th>\n<th>\u5024<\/th>\n<\/tr>\n<tr>\n<td>text-align:left;<\/td>\n<td>\u30c6\u30ad\u30b9\u30c8\u3092\u5de6\u63c3\u3048\u306b\u3057\u307e\u3059(\u521d\u671f\u5024)<\/td>\n<\/tr>\n<tr>\n<td>text-align:center;<\/td>\n<td>\u30c6\u30ad\u30b9\u30c8\u3092\u4e2d\u592e\u63c3\u3048\u306b\u3057\u307e\u3059<\/td>\n<\/tr>\n<tr>\n<td>text-align:right;<\/td>\n<td>\u30c6\u30ad\u30b9\u30c8\u3092\u53f3\u63c3\u3048\u306b\u3057\u307e\u3059<\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<p>\u884c\u63c3\u3048text-align\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-text-align\/\">\u3010CSS text-align\u306e\u4f7f\u3044\u65b9\u3011\u6587\u5b57\u306e\u884c\u63c3\u3048\u30fb\u5bc4\u305b\u6307\u5b9a\u3092\u3059\u308b\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"line-height\">\u884c\u9593 line-height<\/h3>\n<p>\u4e00\u884c\u306e\u9ad8\u3055\u3092\u6307\u5b9a\u3059\u308b\u306b\u306f\u3001\u300cline-height\u300d\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b <\/p>\n<pre class=\"lang:default decode:true \" >&lt;p style=\"line-height:2\"&gt;\r\n  \u30a6\u30a7\u30d6\u30b9\u30c8\u30a8\u30a4\u30c8\u306f\u5927\u962a\u306eWeb\u30b9\u30af\u30fc\u30eb\u3067\u3059\u3002\r\n  &lt;br&gt;\r\n  \u672c\u30b9\u30af\u30fc\u30eb\u306e\u7279\u5fb4\u306f\u500b\u4eba\u4e8b\u696d\u4e3b\u69d8\u30fb\u7d4c\u55b6\u8005\u69d8\u5411\u3051\u3067\r\n  &lt;br&gt;\r\n  \u81ea\u5206\u306e\u30d3\u30b8\u30cd\u30b9\u7528\u306eHP\u3092\u81ea\u3089\u4f5c\u6210\u3057\u3066\u3001\r\n  &lt;br&gt;\r\n  \u30d3\u30b8\u30cd\u30b9\u306b\u6d3b\u7528\u3059\u308b\u3053\u3068\u3092\u30b3\u30f3\u30bb\u30d7\u30c8\u306b\u3057\u3066\u3044\u307e\u3059\u3002\r\n&lt;\/p&gt;\r\n&lt;hr&gt;\r\n&lt;p style=\"line-height:32px\"&gt;\r\n  \u521d\u5fc3\u8005\u5411\u3051\u306e\u30bb\u30df\u30ca\u30fc\u3084\u8b1b\u5ea7\u3082\u958b\u50ac\u3057\u3066\u3044\u307e\u3059\u3002\r\n  &lt;br&gt;\r\n  \u30db\u30fc\u30e0\u30da\u30fc\u30b8\u4f5c\u6210\u30bb\u30df\u30ca\u30fc\u3067\u691c\u7d22\u9806\u4f4d1\u4f4d\u3002\r\n  &lt;br&gt;\r\n  \u81ea\u3089Web\u96c6\u5ba2\u3057\u306a\u304c\u3089\u6559\u5ba4\u3092\u904b\u55b6\u3057\u3066\u3044\u307e\u3059\u3002\r\n&lt;\/p&gt;    \r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<\/p>\n<div class=\"border-primary\">\n<p style=\"line-height:2\">\n  \u30a6\u30a7\u30d6\u30b9\u30c8\u30a8\u30a4\u30c8\u306f\u5927\u962a\u306eWeb\u30b9\u30af\u30fc\u30eb\u3067\u3059\u3002<br \/>\n  <br \/>\n  \u672c\u30b9\u30af\u30fc\u30eb\u306e\u7279\u5fb4\u306f\u500b\u4eba\u4e8b\u696d\u4e3b\u69d8\u30fb\u7d4c\u55b6\u8005\u69d8\u5411\u3051\u3067<br \/>\n  <br \/>\n  \u81ea\u5206\u306e\u30d3\u30b8\u30cd\u30b9\u7528\u306eHP\u3092\u81ea\u3089\u4f5c\u6210\u3057\u3066\u3001<br \/>\n  <br \/>\n  \u30d3\u30b8\u30cd\u30b9\u306b\u6d3b\u7528\u3059\u308b\u3053\u3068\u3092\u30b3\u30f3\u30bb\u30d7\u30c8\u306b\u3057\u3066\u3044\u307e\u3059\u3002\n<\/p>\n<hr>\n<p style=\"line-height:32px\">\n  \u521d\u5fc3\u8005\u5411\u3051\u306e\u30bb\u30df\u30ca\u30fc\u3084\u8b1b\u5ea7\u3082\u958b\u50ac\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n  <br \/>\n  \u30db\u30fc\u30e0\u30da\u30fc\u30b8\u4f5c\u6210\u30bb\u30df\u30ca\u30fc\u3067\u691c\u7d22\u9806\u4f4d1\u4f4d\u3002<br \/>\n  <br \/>\n  \u81ea\u3089Web\u96c6\u5ba2\u3057\u306a\u304c\u3089\u6559\u5ba4\u3092\u904b\u55b6\u3057\u3066\u3044\u307e\u3059\u3002\n<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u6307\u5b9a\u3067\u304d\u308b\u5024\u306f<b>\u300c\u6570\u5b57(\u500d\u7387\u306b\u306a\u308a\u307e\u3059)\u300d<\/b>\u3082\u3057\u304f\u306f<b>\u300cpx\u300d<\/b>\u3067\u3059\u3002<\/p>\n<p>\u4f8b\u3048\u3070\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u304c16px\u306e\u5834\u5408\u3001\u300cline-height:1.5\u300d\u306b\u3059\u308b\u306824px(16*1.5)\u306b\u306a\u308a\u307e\u3059\u3002line-height:24px\u3067\u3082\u540c\u3058\u3067\u3059\u3002<\/p>\n<p>\u884c\u9593line-height\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-line-height\/\">\u3010CSS line-height\u306e\u4f7f\u3044\u65b9\u3011\u884c\u306e\u9ad8\u3055\u306e\u6307\u5b9a\u30fb\u884c\u9593\u8abf\u6574\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"line-spacing\">\u5b57\u9593 letter-spacing<\/h3>\n<p>\u5b57\u9593\u3092\u6307\u5b9a\u3059\u308b\u306b\u306f\u3001\u300cletter-spacing\u300d\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<br \/>\nletter-spacing\u306f\u3001<strong>\u6587\u7ae0\u306e\u5b57\u9593\u3092\u8abf\u6574\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308bCSS\u30d7\u30ed\u30d1\u30c6\u30a3<\/strong>\u3067\u3059\u3002<\/p>\n<p>\u6a19\u6e96\u306e\u5b57\u9593\u3088\u308a\u3082\u3088\u308a\u5b57\u9593\u3092\u7a7a\u3051\u305f\u3044\u30fb\u72ed\u3081\u305f\u3044\u5834\u5408\u306bletter-spacing\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36439\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/letter-spacing-comaparison.jpg\" alt=\"letter-spacing\u3092\u6307\u5b9a\u3057\u3066\u3044\u306a\u3044\u30c6\u30ad\u30b9\u30c8\u3068\u6307\u5b9a\u3057\u3066\u3044\u308b\u30c6\u30ad\u30b9\u30c8\u306e\u6bd4\u8f03\" width=\"2000\" height=\"1125\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/letter-spacing-comaparison.jpg 2000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/letter-spacing-comaparison-300x169.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/letter-spacing-comaparison-1024x576.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/letter-spacing-comaparison-768x432.jpg 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/letter-spacing-comaparison-1536x864.jpg 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>letter-spacing\u3092\u4f7f\u3063\u3066\u5b57\u9593\u3092\u8abf\u6574\u3059\u308b\u65b9\u6cd5\u306f\u7c21\u5358\u3067\u3001letter-spacing\u3092\u6307\u5b9a\u3057\u305f\u3044\u8981\u7d20\u306b\u5bfe\u3057\u3066\u300c\u6570\u5b57\uff0bem\u300d\u3084\u300c\u6570\u5b57\uff0bpx\u300d\u3067\u6307\u5b9a\u3057\u3066\u3042\u3052\u308c\u3070OK\u3067\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\" title=\"index.html\">&lt;p&gt;letter-spacing\u306f\u6587\u5b57\u9593\u3092\u8abf\u7bc0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308bCSS\u30d7\u30ed\u30d1\u30c6\u30a3&lt;\/p&gt;<\/pre>\n<pre class=\"lang:css decode:true\" title=\"style.css\">p {\r\n  letter-spacing: 0.05em;\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36442\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/letter-spacing-sample.png\" alt=\"letter-spacing\u3092\u6307\u5b9a\u3057\u3066\u5b57\u9593\u3092\u8abf\u6574\u3057\u3066\u3044\u308b\u4f8b\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/letter-spacing-sample.png 1500w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/letter-spacing-sample-300x200.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/letter-spacing-sample-1024x683.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/letter-spacing-sample-768x512.png 768w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/span><\/p>\n<div class=\"yellowbox\">\n<p><strong>\u25a0letter-spacing\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u6307\u5b9a\u3067\u304d\u308b\u5358\u4f4d<\/strong><\/p>\n<div class=\"maruck\">\n<ul>\n<li>em\uff1a\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u57fa\u6e96\u306b\u5b57\u9593\u3092\u8abf\u6574\u3059\u308b<\/li>\n<li>px\uff1apx\u5024\u3092\u7528\u3044\u3066\u5b57\u9593\u3092\u8abf\u6574\u3059\u308b<\/li>\n<li>normal(\u30c7\u30d5\u30a9\u30eb\u30c8)\uff1a\u30d6\u30e9\u30a6\u30b6\u304c\u81ea\u52d5\u7684\u306b\u5b57\u9593\u3092\u8abf\u6574\u3059\u308b<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u307e\u305f\u3001\u30de\u30a4\u30ca\u30b9\u3092\u6307\u5b9a\u3059\u308b\u3068\u5b57\u9593\u3092\u8a70\u3081\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<br \/>\n<span class=\"photoline\"><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/letter-spacing-example-1.png\" alt=\"letter-spacing\u306e\u4f8b\" width=\"883\" height=\"382\" class=\"alignnone size-full wp-image-36791\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/letter-spacing-example-1.png 883w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/letter-spacing-example-1-300x130.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/letter-spacing-example-1-768x332.png 768w\" sizes=\"(max-width: 883px) 100vw, 883px\" \/><\/span><\/p>\n<p>\u5b57\u9593letter-spacing\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-letter-spacing\/\">\u3010CSS letter-spacing\u306e\u4f7f\u3044\u65b9\u3011\u30c6\u30ad\u30b9\u30c8\u6587\u5b57\u306e\u5b57\u9593\u8abf\u6574<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"vertical-align\">\u7e26\u65b9\u5411\u306e\u4f4d\u7f6e\u6307\u5b9a vertical-align<\/h3>\n<p>vertical-align\u306f\u3001<strong>\u30a4\u30f3\u30e9\u30a4\u30f3(\u4f8b: \u30c6\u30ad\u30b9\u30c8\u3001\u753b\u50cf\u306a\u3069)\u8981\u7d20\u3001\u30a4\u30f3\u30e9\u30a4\u30f3\u30d6\u30ed\u30c3\u30af\u8981\u7d20\u306e\u5782\u76f4\u30fb\u7e26\u65b9\u5411\u306e\u4f4d\u7f6e\u3092\u6307\u5b9a\u3059\u308b\u306e\u306b\u4f7f\u7528\u3055\u308c\u308bCSS<\/strong>\u3067\u3059\u3002<\/p>\n<div class=\"yellowbox\">\n<p><strong>\u25a0vertical-align\u306e\u4f7f\u7528\u5834\u9762<\/strong><\/p>\n<div class=\"maruck\">\n<ul>\n<li>\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u306e\u4e2d\u3067\u3001\u30c6\u30ad\u30b9\u30c8\u3084\u753b\u50cf\u306a\u3069\u306e\u5782\u76f4\u65b9\u5411\u306e\u4f4d\u7f6e\u3092\u6c7a\u3081\u308b\u3068\u304d<\/li>\n<li>\u30c6\u30fc\u30d6\u30eb\u30bb\u30eb\u306e\u4e2d\u8eab\u306e\u5782\u76f4\u65b9\u5411\u306e\u914d\u7f6e\u3092\u6c7a\u3081\u308b\u3068\u304d<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"index.html\">&lt;div&gt;\u884c&lt;span class=\"sample\"&gt;baseline&lt;\/span&gt;&lt;\/div&gt;<\/pre>\n<pre class=\"lang:css mark:12 decode:true\" title=\"style.css\">div {\r\n  font-size: 50px;\r\n  background-color: #ccc;\r\n}\r\n\r\nspan {\r\n  font-size: 12px;\r\n  background-color: #ffccff;\r\n}\r\n\r\n.sample{\r\n  vertical-align: baseline;\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-37831\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/vertical-align-baseline.png\" alt=\"baseline\u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u4f8b\" width=\"1000\" height=\"667\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/vertical-align-baseline.png 1000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/vertical-align-baseline-300x200.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/vertical-align-baseline-768x512.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/span><\/p>\n<p>\u306a\u304a\u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u3068\u306f\u3001\u30a2\u30eb\u30d5\u30a1\u30d9\u30c3\u30c8\u306e\u5927\u6587\u5b57\u306e\u5e95\u8fba\u304c\u63a5\u3059\u308b\u76f4\u7dda\u306e\u3053\u3068\u3092\u8a00\u3044\u307e\u3059\u3002<\/p>\n<blockquote><p><img decoding=\"async\" class=\"alignnone size-full wp-image-37832\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/2880px-Typography_Line_Terms.svg_.png\" alt=\"\u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u3092\u89e3\u8aac\u3057\u305f\u56f3\" width=\"2880\" height=\"774\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/2880px-Typography_Line_Terms.svg_.png 2880w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/2880px-Typography_Line_Terms.svg_-300x81.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/2880px-Typography_Line_Terms.svg_-1024x275.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/2880px-Typography_Line_Terms.svg_-768x206.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/2880px-Typography_Line_Terms.svg_-1536x413.png 1536w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/2880px-Typography_Line_Terms.svg_-2048x550.png 2048w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>\u5f15\u7528\u5143\uff1a<a href=\"https:\/\/en.wikipedia.org\/wiki\/Baseline_(typography)\" target=\"_blank\" rel=\"noopener\">Baseline (typography) | WIKIPEDIA<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p class=\"komozi\"><strong>\u25a0vertical-align\u3067\u4f7f\u7528\u3067\u304d\u308b\u5024<\/strong><\/p>\n<table>\n<tbody>\n<tr>\n<th style=\"width: 30%\">baseline(\u521d\u671f\u5024)<\/th>\n<td style=\"width: 70%\">\u9069\u7528\u3057\u305f\u8981\u7d20\u306e\u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u3068\u89aa\u8981\u7d20\u306e\u30d9\u30fc\u30b9\u30e9\u30a4\u30f3\u3092\u63c3\u3048\u308b<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 30%\">top<\/th>\n<td style=\"width: 70%\">\u8981\u7d20\u3068\u5b50\u5b6b\u8981\u7d20\u306e\u4e0a\u7aef\u3092\u884c\u5168\u4f53\u306e\u4e0a\u7aef\u306b\u63c3\u3048\u308b<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 30%\">middle<\/th>\n<td style=\"width: 70%\">\u534a\u89d2\u82f1\u5b57\u306e\u300cx\u300d\u306e\u4e2d\u592e\u306e\u9ad8\u3055\u306b\u8981\u7d20\u304c\u63c3\u3046<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 30%\">bottom<\/th>\n<td style=\"width: 70%\">\u8981\u7d20\u3068\u5b50\u5b6b\u8981\u7d20\u306e\u4e0b\u7aef\u3092\u884c\u5168\u4f53\u306e\u4e0b\u7aef\u306b\u63c3\u3048\u308b<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 30%\">text-top<\/th>\n<td style=\"width: 70%\">\u89aa\u8981\u7d20\u306e\u30d5\u30a9\u30f3\u30c8\u306e\u4e0a\u7aef\u306b\u8981\u7d20\u306e\u4e0a\u7aef\u3092\u63c3\u3048\u308b<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 30%\">text-bottom<\/th>\n<td style=\"width: 70%\">\u89aa\u8981\u7d20\u306e\u30d5\u30a9\u30f3\u30c8\u306e\u4e0b\u7aef\u306b\u8981\u7d20\u306e\u4e0b\u7aef\u3092\u63c3\u3048\u308b<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 30%\">\u6570\u5024+\u5358\u4f4d<\/th>\n<td style=\"width: 70%\">\u6570\u5024\u3068\u5358\u4f4d(px\u3001%\u306a\u3069)\u3092\u4f7f\u3063\u3066\u4f4d\u7f6e\u306e\u8abf\u6574\u3092\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-37829\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/vertical-align-values.png\" alt=\"vertcal-align\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u6307\u5b9a\u3067\u304d\u308b\u5024\u306e\u8868\u793a\u4f8b\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/vertical-align-values.png 1500w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/vertical-align-values-300x200.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/vertical-align-values-1024x683.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/08\/vertical-align-values-768x512.png 768w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/span><br \/>\n&nbsp;<\/p>\n<p>\u9ad8\u3055\u306e\u7570\u306a\u308b\u30a4\u30f3\u30e9\u30a4\u30f3\u753b\u50cf\u3068\u30c6\u30ad\u30b9\u30c8\u3092\u6a2a\u4e00\u5217\u306b\u4e26\u3079\u305f\u6642\u3001\u4e21\u8005\u306e\u63c3\u3048\u4f4d\u7f6e\u3092\u6307\u5b9a\u3057\u305f\u3044\u5834\u5408\u306a\u3069\u306b\u3001vertical-align\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u306a\u304a\u3001vertical-align\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u9069\u7528\u3067\u304d\u308b\u306e\u306f\u3001\u30a4\u30f3\u30e9\u30a4\u30f3(\u30a4\u30f3\u30e9\u30a4\u30f3\u30d6\u30ed\u30c3\u30af)\u8981\u7d20\u3068\u30c6\u30fc\u30d6\u30eb\u30bb\u30eb\u306e\u307f\u3067\u3001<span class=\"hutoaka\">div\u306a\u3069\u306e\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u306b\u306f\u9069\u7528\u3067\u304d\u306a\u3044\u305f\u3081<\/span>\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<p>vertical-align\u306b\u95a2\u3059\u308b\u8a73\u7d30\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-vertical-align\/\">\u3010CSS vertical-align\u306e\u4f7f\u3044\u65b9\u3011\u30c6\u30ad\u30b9\u30c8\u306e\u7e26\u30fb\u4e0a\u4e0b\u65b9\u5411\u306e\u4f4d\u7f6e\u5909\u66f4<\/a>\u300d\u3092\u3054\u53c2\u7167\u4e0b\u3055\u3044\u3002<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n<h2 id=\"border\">\u67a0\u7dda border<\/h2>\n<h3>\u67a0\u7dda border\u306e\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-border.png\" alt=\"border\u3067\u67a0\u7dda\u306e\u8a2d\u5b9a\" width=\"1364\" height=\"360\" class=\"alignnone size-full wp-image-980\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-border.png 1364w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-border-300x79.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-border-768x203.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-border-1024x270.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-border-718x190.png 718w\" sizes=\"(max-width: 1364px) 100vw, 1364px\" \/><br \/>\n&nbsp;<\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u67a0\u7dda border<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 borer:\u67a0\u7dda\u306e\u8272\u306e\u5024 \u67a0\u7dda\u306e\u7a2e\u985e\u306e\u5024 \u67a0\u7dda\u306e\u592a\u3055\u306e\u5024;<br \/>\n(\u203b)\u5024\u306f\u534a\u89d2\u30b9\u30da\u30fc\u30b9\u3067\u533a\u5207\u308a\u307e\u3059\u3002\u9806\u4e0d\u540c\u3067\u3069\u308c\u304b\u3089\u5148\u306b\u66f8\u3044\u3066\u3082\u69cb\u3044\u307e\u305b\u3093\u3002<\/li>\n<li>\u3010\u4f8b\u3011 border:red solid 2px;<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b \u898b\u51fa\u3057\u306b\u8d64\u8272\u30fb\u5b9f\u7dda\u30fb\u592a\u30555px\u306e\u67a0\u304c\u3064\u3044\u3066\u3044\u308b<\/p>\n<pre class=\"lang:default decode:true \" >\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;h1 style=\"border:red solid 5px;\"&gt;\u3053\u308c\u306f\u898b\u51fa\u3057\u3002\u8d64\u306e\u67a0\u5185\u306b\u3042\u308a\u307e\u3059\u3002&lt;\/h1&gt;  \r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-border.png\" alt=\"h1\u306b\u8d64\u8272\u30fb\u5b9f\u7dda\u30fb\u592a\u30555px\u306e\u67a0\u304c\u3064\u3044\u3066\u3044\u308b\" width=\"722\" height=\"155\" class=\"alignnone size-full wp-image-981\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-border.png 722w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-border-300x64.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-border-718x154.png 718w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-border-720x155.png 720w\" sizes=\"(max-width: 722px) 100vw, 722px\" \/><br \/>\n&nbsp;<\/p>\n<table>\n<tr>\n<th>\u9805\u76ee<\/th>\n<th>\u5185\u5bb9<\/th>\n<\/tr>\n<tr>\n<td>\u8272<\/td>\n<td>red\u306a\u3069\u306e\u8272\u6307\u5b9a\u3001\u307e\u305f\u306f#ff0000\u306a\u3069\u306e16\u9032\u6570\u8868\u8a18<\/td>\n<\/tr>\n<tr>\n<td>\u7a2e\u985e<\/td>\n<td>\n<ul>\n<li>\u306a\u3057(\u521d\u671f\u5024)\u300cnone\u300d<\/li>\n<li>1\u672c\u306e\u5b9f\u7dda\u300csolid\u300d<\/li>\n<li>2\u672c\u306e\u5b9f\u7dda\u300cdouble\u300d<\/li>\n<li>\u70b9\u7dda\u300cdotted\u300d<\/li>\n<li>\u7834\u7dda\u300cdashed\u300d<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td>\u67a0\u7dda\u306e\u592a\u3055<\/td>\n<td>2px\u306a\u3069\u3000\u3007\u3007px\u3067\u8a2d\u5b9a<\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<h4>\u8272\u3005\u306aborder\u306e\u4f7f\u3044\u65b9<\/h4>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u7279\u5b9a\u306e\u8fba\u3060\u3051\u67a0\u7dda\u3092\u3064\u3051\u308b<\/p>\n<ul>\n<li>\u3010\u4e0a\u8fba\u306e\u67a0\u3011 border-top<\/li>\n<li>\u3010\u5e95\u8fba\u306e\u67a0\u3011 border-bottom<\/li>\n<li>\u3010\u5de6\u8fba\u306e\u67a0\u3011 border-left<\/li>\n<li>\u3010\u53f3\u8fba\u306e\u67a0\u3011 border-right<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u4f8b border-top:red solid 5px;<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-top-sample.png\" alt=\"\u4e0a\u5074\u306e\u67a0 border-top\" width=\"843\" height=\"79\" class=\"alignnone size-full wp-image-3593\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-top-sample.png 843w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-top-sample-300x28.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-top-sample-768x72.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-top-sample-718x67.png 718w\" sizes=\"(max-width: 843px) 100vw, 843px\" \/><br \/>\n&nbsp;<br \/>\n\u4f8b border-bottom:red solid 5px;<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-bottom-sample.png\" alt=\"\u4e0b\u5074\u306e\u67a0 border-bottom\" width=\"844\" height=\"74\" class=\"alignnone size-full wp-image-3590\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-bottom-sample.png 844w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-bottom-sample-300x26.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-bottom-sample-768x67.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-bottom-sample-718x63.png 718w\" sizes=\"(max-width: 844px) 100vw, 844px\" \/><br \/>\n&nbsp;<br \/>\n\u4f8b border-left:red solid 5px;<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-left-sample.png\" alt=\"\u5de6\u5074\u306e\u67a0 border-left\" width=\"844\" height=\"75\" class=\"alignnone size-full wp-image-3591\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-left-sample.png 844w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-left-sample-300x27.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-left-sample-768x68.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-left-sample-718x64.png 718w\" sizes=\"(max-width: 844px) 100vw, 844px\" \/><br \/>\n&nbsp;<br \/>\n\u4f8b border-right:red solid 5px;<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-right-sample.png\" alt=\"\u53f3\u5074\u306e\u67a0 border-right\" width=\"846\" height=\"71\" class=\"alignnone size-full wp-image-3592\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-right-sample.png 846w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-right-sample-300x25.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-right-sample-768x64.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-border-right-sample-718x60.png 718w\" sizes=\"(max-width: 846px) 100vw, 846px\" \/><br \/>\n&nbsp;<\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u67a0\u306e\u8272border-color\/\u7a2e\u985eborder-style\/\u592a\u3055border-width<\/p>\n<p>border\u306e\u4ee3\u308f\u308a\u306b\u3001\u300cborder-color\u300d\u3001\u300cborder-style\u300d\u3001\u300cborder-width\u300d\u3067\u305d\u308c\u305e\u308c\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \" >&lt;h1 style=\"border-color:red;border-style:solid;border-width:5px\"&gt;\u3053\u308c\u306f\u898b\u51fa\u3057&lt;\/h1&gt;<\/pre>\n<\/div>\n<p>&nbsp;<br \/>\n\u67a0\u7ddaborder\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-border\/\">\u3010\u521d\u5fc3\u8005\u5411\u3051\u3011CSS \u67a0\u7ddaborder\u30bf\u30b0\u306e\u4f7f\u3044\u65b9\u306e\u57fa\u672c\u3092\u89e3\u8aac<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"border-radius\">\u67a0\u306e\u4e38\u3055 border-radius<\/h3>\n<p>border-radius\u3092\u5229\u7528\u3059\u308b\u3068border\u3067\u4f5c\u3063\u305f\u67a0\u7dda\u306e\u89d2\u3092\u4e38\u304f\u3059\u308b\u4e8b\u304c\u3067\u304d\u3001\u5186\u3082\u4f5c\u308b\u4e8b\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>border-radius:30px \u3068\u3057\u305f\u5834\u5408\u3001\u3059\u3079\u3066\u306e\u89d2\u304c30px\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/border-radius4-1-300x300.png\" alt=\"border-radius:30px\" width=\"300\" height=\"300\" class=\"alignnone size-full wp-image-2139\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/border-radius4-1-300x300.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/border-radius4-1-300x300-150x150.png 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\n&nbsp;<\/p>\n<p>border-radius:50%\u3068\u6307\u5b9a\u3057\u305f\u5834\u5408\u306f\u300150%=\u5186\u306e\u534a\u5f84\u3067\u4e0b\u8a18\u306e\u3088\u3046\u306b\u5186\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/border-radius6-300x300.png\" alt=\"border-radius:50%\" width=\"300\" height=\"300\" class=\"alignnone size-full wp-image-2140\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/border-radius6-300x300.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/border-radius6-300x300-150x150.png 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u307e\u305f\u3001border-top-left-radius\uff08\u5de6\u4e0a\u306e\u7b87\u6240\uff09:xxx\u306a\u3069\u306e\u3088\u3046\u306b\u5834\u6240\u3092\u6307\u5b9a\u3059\u308b\u3068\u4e0b\u8a18\u306e\u3088\u3046\u306b\u5de6\u4e0a\u3060\u3051\u4e38\u304f\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/border-radius7-300x300.png\" alt=\"border-top-left-radius:50%\" width=\"300\" height=\"300\" class=\"alignnone size-full wp-image-2141\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/border-radius7-300x300.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/border-radius7-300x300-150x150.png 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/>\n&nbsp;<\/p>\n<h2 id=\"background\">\u80cc\u666f background\u306e\u57fa\u672c<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/background-style-explanation.png\" alt=\"background\u306e\u57fa\u672c\u3000background-color background-image\" width=\"1154\" height=\"471\" class=\"alignnone size-full wp-image-1025\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/background-style-explanation.png 1154w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/background-style-explanation-300x122.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/background-style-explanation-768x313.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/background-style-explanation-1024x418.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/background-style-explanation-718x293.png 718w\" sizes=\"(max-width: 1154px) 100vw, 1154px\" \/><\/p>\n<p>\u80cc\u666f\u300cbackground\u300d\u306b\u3064\u3044\u3066\u306f\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306a\u8a2d\u5b9a\u9805\u76ee\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<table class=\"table\">\n<tr>\n<th>\u30ab\u30c6\u30b4\u30ea<\/th>\n<th>\u30d7\u30ed\u30d1\u30c6\u30a3<\/th>\n<th>\u610f\u5473<\/th>\n<\/tr>\n<tr>\n<td rowspan=\"7\">\u80cc\u666f\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/td>\n<td>background-color<\/td>\n<td>\u80cc\u666f\u306e\u8272<\/td>\n<\/tr>\n<tr>\n<td>background-image<\/td>\n<td>\u80cc\u666f\u306e\u753b\u50cf<\/td>\n<\/tr>\n<tr>\n<td>background-repeat<\/td>\n<td>\u80cc\u666f\u306e\u753b\u50cf\u306e\u7e70\u308a\u8fd4\u3057<\/td>\n<\/tr>\n<tr>\n<td>background-position<\/td>\n<td>\u80cc\u666f\u753b\u50cf\u306e\u8868\u793a\u958b\u59cb\u4f4d\u7f6e<\/td>\n<\/tr>\n<tr>\n<td>background-attachment<\/td>\n<td>\u80cc\u666f\u753b\u50cf\u306e\u56fa\u5b9a\u30fb\u79fb\u52d5<\/td>\n<\/tr>\n<tr>\n<td>background-size<\/td>\n<td>\u80cc\u666f\u753b\u50cf\u306e\u30b5\u30a4\u30ba<\/td>\n<\/tr>\n<tr>\n<td>background<\/td>\n<td>\u80cc\u666f\u5168\u822c<\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<h3>\u80cc\u666f\u306e\u8272 background-color<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-color-1.png\" alt=\"\u80cc\u666fbackground:pink\u306e\u30b5\u30f3\u30d7\u30eb\" width=\"1369\" height=\"352\" class=\"alignnone size-full wp-image-992\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-color-1.png 1369w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-color-1-300x77.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-color-1-768x197.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-color-1-1024x263.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-color-1-718x185.png 718w\" sizes=\"(max-width: 1369px) 100vw, 1369px\" \/><br \/>\n&nbsp;<\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u80cc\u666f\u306e\u8272 background-color<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 background-color:\u5024;\n<li>\u3010\u4f8b\u3011 border:pink;<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/03\/background-color-pink.png\" alt=\"body\u80cc\u666f\u3092\u30d4\u30f3\u30af\u306b\u8a2d\u5b9a\" width=\"689\" height=\"347\" class=\"alignnone size-full wp-image-3936\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/03\/background-color-pink.png 689w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/03\/background-color-pink-300x151.png 300w\" sizes=\"(max-width: 689px) 100vw, 689px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body style=\"background-color:pink;\"&gt;\r\n    &lt;h1&gt;\u30d4\u30f3\u30af\u8272\u306e\u80cc\u666f\u304c\u5168\u4f53\u306b\u304b\u304b\u3063\u3066\u3044\u307e\u3059\u3002&lt;\/h1&gt;  \r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<br \/>\n\u5024\u306e\u8272\u306f\u300cblue\u300d\u3084\u300cred\u300d\u306a\u3069\u8272\u3092\u76f4\u63a5\u6307\u5b9a\u3059\u308b\u65b9\u6cd5\u308416\u9032\u6570\u8868\u8a18\u300c#FF0000\u300d\u3001\u900f\u660e\u5ea6\u3092\u8a2d\u5b9a\u3067\u304d\u308b\u300crgba(255,0,0,0.5)\u300d\u306a\u3069\u306e\u6307\u5b9a\u65b9\u6cd5\u304c\u3088\u304f\u4f7f\u308f\u308c\u307e\u3059\u3002<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n<h3>\u80cc\u666f\u753b\u50cf background-image<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-images.png\" alt=\"\u80cc\u666fbackground-image\u304c\u5b87\u5b99\u306b\u306a\u308b\u30b5\u30f3\u30d7\u30eb\" width=\"1370\" height=\"354\" class=\"alignnone size-full wp-image-991\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-images.png 1370w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-images-300x78.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-images-768x198.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-images-1024x265.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-background-images-718x186.png 718w\" sizes=\"(max-width: 1370px) 100vw, 1370px\" \/><br \/>\n&nbsp;<\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">background-image:url(\u753b\u50cf\u306e\u5834\u6240);<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 background-color:\u5024;<\/li>\n<li>\u3010\u4f8b\u3011 background-image: url(images\/sample.jpg);<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/03\/background-image.png\" alt=\"body\u80cc\u666f\u306b\u753b\u50cf\u3092\u8a2d\u5b9a\" width=\"741\" height=\"382\" class=\"alignnone size-full wp-image-3940\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/03\/background-image.png 741w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/03\/background-image-300x155.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/03\/background-image-718x370.png 718w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/03\/background-image-720x370.png 720w\" sizes=\"(max-width: 741px) 100vw, 741px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body style=\"background-image: url(https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/03\/pattern0740.jpg);\"&gt;\r\n    &lt;h1&gt;\u80cc\u666f\u3092\u8a2d\u5b9a&lt;\/h1&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<br \/>\n\u753b\u50cf\u306e\u5834\u6240\u306f\u3001\u300chttp:\/\/xxxxx.com\/xxxx\/sample.jpg\u300d\u306e\u3088\u3046\u306b\u7d76\u5bfe\u30d1\u30b9\u3067\u6307\u5b9a\u3059\u308b\u65b9\u6cd5\u3068\u300cimages\/sample.jpg\u300d\u306e\u3088\u3046\u306b\u76f8\u5bfe\u30d1\u30b9\u3067\u6307\u5b9a\u3059\u308b\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n&nbsp;<br \/>\n\u80cc\u666fbackground\u306b\u95a2\u3059\u308b\u8a73\u7d30\u306a\u8aac\u660e\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-background\/\">CSS \u80cc\u666f\u30d7\u30ed\u30d1\u30c6\u30a3background\u306e\u4f7f\u3044\u65b9\u307e\u3068\u3081<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h2 id=\"width-height\">\u6a2a\u5e45width\u3068\u9ad8\u3055height<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/width-height-explanation.png\" alt=\"\u9ad8\u3055\u3068\u6a2a\u5e45\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u306e\u8aac\u660e\" width=\"1276\" height=\"626\" class=\"alignnone size-full wp-image-1027\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/width-height-explanation.png 1276w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/width-height-explanation-300x147.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/width-height-explanation-768x377.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/width-height-explanation-1024x502.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/width-height-explanation-718x352.png 718w\" sizes=\"(max-width: 1276px) 100vw, 1276px\" \/><br \/>\n&nbsp;<\/p>\n<h3 id=\"width\">\u6a2a\u5e45 width<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-width.png\" alt=\"\u6a2a\u5e45\u304c400px\u306e\u30b5\u30f3\u30d7\u30eb\" width=\"1365\" height=\"351\" class=\"alignnone size-full wp-image-996\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-width.png 1365w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-width-300x77.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-width-768x197.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-width-1024x263.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-width-718x185.png 718w\" sizes=\"(max-width: 1365px) 100vw, 1365px\" \/><\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u6a2a\u5e45width<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 width:\u5024;<\/li>\n<li>\u3010\u4f8b\u3011 width:300px;<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div style=\"width:400px;background:yellow;\"&gt;\r\n      \u6a2a\u5e45400px\u306e\u9ec4\u8272\u306ediv\r\n    &lt;\/div&gt;\r\n    &lt;br&gt;\r\n    &lt;div style=\"width:90%;background:yellow;\"&gt;\r\n      \u6a2a\u5e45400px\u306e\u9ec4\u8272\u306ediv\r\n    &lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-width.png\" alt=\"width \u6a2a\u5e45\u306e\u8a2d\u5b9a\" width=\"991\" height=\"258\" class=\"alignnone size-full wp-image-995\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-width.png 991w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-width-300x78.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-width-768x200.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/sample-width-718x187.png 718w\" sizes=\"(max-width: 991px) 100vw, 991px\" \/><br \/>\n&nbsp;<br \/>\n\u6a2a\u5e45\u306e\u5358\u4f4d\u306f\u300cpx\u300d\u3084\u300c%\u300d\u304c\u3042\u308a\u307e\u3059\u3002px\u306e\u5834\u5408\u306f\u56fa\u5b9a\u5024\u3067\u3059\u3002%\u306f\u89aa\u8981\u7d20\u306b\u5bfe\u3059\u308b\u5272\u5408(body\u76f4\u4e0b\u306eHTML\u8981\u7d20\u306e\u5834\u5408\u306f\u30d6\u30e9\u30a6\u30b6\u30b5\u30a4\u30ba\u306b\u5bfe\u3059\u308b\u5272\u5408)\u3067\u3059\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"height\">\u9ad8\u3055 height<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-height.png\" alt=\"div\u306e\u9ad8\u3055\u3092400px\u306b\u3059\u308b\u30b5\u30f3\u30d7\u30eb\" width=\"1362\" height=\"351\" class=\"alignnone size-full wp-image-999\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-height.png 1362w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-height-300x77.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-height-768x198.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-height-1024x264.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-height-718x185.png 718w\" sizes=\"(max-width: 1362px) 100vw, 1362px\" \/><\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u9ad8\u3055height<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 height:\u5024;<\/li>\n<li>\u3010\u4f8b\u3011 height:200px;<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b <\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div class=\"height:400px;background:yellow;\"&gt;\r\n      \u9ad8\u3055400px\u306e\u9ec4\u8272\u306ediv\r\n    &lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-height.png\" alt=\"CSS\u3000\u9ad8\u3055400px\u306e\u4f8b\" width=\"967\" height=\"492\" class=\"alignnone size-full wp-image-920\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-height.png 967w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-height-300x153.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-height-768x391.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-height-718x365.png 718w\" sizes=\"(max-width: 967px) 100vw, 967px\" \/><br \/>\n&nbsp;<br \/>\n\u6a2a\u5e45width\u3068\u9ad8\u3055height\u306b\u95a2\u3059\u308b\u8a73\u7d30\u306a\u8aac\u660e\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-width-height\/\">\u3010CSS width\u3068height\u306e\u4f7f\u3044\u65b9\u3011\u6a2a\u5e45\u3068\u9ad8\u3055\u306e\u6307\u5b9a\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u7e26\u306e\u9ad8\u3055\u306f<b>\u300cheight:\u5024;\u300d<\/b>\u3067\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u6a2a\u5e45\u3068\u540c\u69d8\u306b\u5358\u4f4d\u306f\u300cpx\u300d\u3084\u300c%\u300d\u306a\u3069\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>height\u306e%\u5229\u7528\u306f\u96e3\u3057\u304f\u3001\u89aa\u8981\u7d20\u306e%\u3092\u660e\u793a\u3057\u3066\u3044\u306a\u3044\u3068\u3046\u307e\u304f\u8868\u793a\u3055\u308c\u306a\u3044\u305f\u3081\u3054\u6ce8\u610f\u304f\u3060\u3055\u3044\u3002<br \/>\n<a href=\"http:\/\/etc9.hatenablog.com\/entry\/20111027\/1319730407\" target=\"_blank\" rel=\"noopener\">\u5206\u304b\u308a\u306b\u304f\u3044CSS height \u306e\u30d1\u30fc\u30bb\u30f3\u30c8\u8a2d\u5b9a\u306e\u307e\u3068\u3081<\/a><br \/>\n&nbsp;<\/p>\n<h3 id=\"calc\">\u5e45\u3084\u9ad8\u3055\u3092\u8a08\u7b97\u3059\u308b\u95a2\u6570calc<\/h3>\n<p>calc()\u95a2\u6570\u306f\u3001<strong>CSS\u3067\u6570\u5b66\u306e\u56db\u5247\u6f14\u7b97\uff08\u8db3\u3057\u7b97\u30fb\u5f15\u304d\u7b97\u30fb\u639b\u3051\u7b97\u30fb\u5272\u308a\u7b97\uff09\u3092\u53ef\u80fd\u306b\u3059\u308b\u95a2\u6570<\/strong>\u3067\u3059\u3002<\/p>\n<p>width\u3084height\u30d7\u30ed\u30d1\u30c6\u30a3\u306a\u3069\u3067\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u591a\u304f\u3001\u4f8b\u3048\u3070\u300c2\u30ab\u30e9\u30e0\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u4e00\u65b9\u306f\u56fa\u5b9a\u5e45\u3001\u3082\u3046\u4e00\u65b9\u306f\u53ef\u5909\u5e45\u306b\u3059\u308b\u300d\u3068\u3044\u3063\u305f\u5b9f\u88c5\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"lang:css decode:true\" title=\"style.css\">.main{\r\n  width: calc(100% - 300px);\r\n}\r\n.sidebar{\r\n  width: 300px;\r\n}\r\n<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-39797\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/09\/calc-sample1.gif\" alt=\"2\u30ab\u30e9\u30e0\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u4e00\u65b9\u306f\u56fa\u5b9a\u5e45\u3001\u3082\u3046\u4e00\u65b9\u306f\u53ef\u5909\u5e45\u306b\u3057\u3066\u3044\u308b\u4f8b\" width=\"2000\" height=\"1333\" \/><\/span><\/p>\n<p>\u4e0a\u306e\u4f8b\u3067\u306f\u30b5\u30a4\u30c9\u30d0\u30fc\u306e\u6a2a\u5e45\u3092300px\u3067\u56fa\u5b9a\u3055\u305b\u3001\u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u6a2a\u5e45\u3092calc(100% &#8211; 300px)\u3068\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u53ef\u5909\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p class=\"komozi\"><strong>\u25a0\u56db\u5247\u6f14\u7b97\u306b\u7528\u3044\u308b\u8a18\u53f7<\/strong><\/p>\n<table>\n<tbody>\n<tr>\n<th style=\"width: 50%\">\u8db3\u3057\u7b97<\/th>\n<td style=\"width: 50%\">+<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 50%\">\u5f15\u304d\u7b97<\/th>\n<td style=\"width: 50%\">&#8211;<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 50%\">\u639b\u3051\u7b97<\/th>\n<td style=\"width: 50%\">*<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 50%\">\u5272\u308a\u7b97<\/th>\n<td style=\"width: 50%\">\/<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8a08\u7b97\u306e\u969b\u306b\u5358\u4f4d\u3092\u63c3\u3048\u308b\u5fc5\u8981\u304c\u306a\u304f\u3001px\u306a\u3069\u306e\u7d76\u5bfe\u5024\u3068%\u3084em\u3001vw\u306a\u3069\u306e\u76f8\u5bfe\u5024\u540c\u58eb\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<pre e class=\"lang:css mark:2 decode:true\" title=\"style.css\">.main{\r\n  width: calc(100% - 300px);\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u306a\u304a\u3001<span class=\"st-aka\"><strong>\u300c+\u300d\u6f14\u7b97\u5b50\u3068\u300c-\u300d\u6f14\u7b97\u5b50\u306e\u524d\u5f8c\u306b\u306f\u534a\u89d2\u30b9\u30da\u30fc\u30b9\u3092\u5165\u308c\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059<\/strong><\/span>\u3002<\/p>\n<p>calc\u95a2\u6570\u306e\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-calc\/\">\u3010CSS calc()\u95a2\u6570\u306e\u4f7f\u3044\u65b9\u3011\u5e45\u3084\u9ad8\u3055\u3092\u8a08\u7b97\u5f0f\u3067\u6307\u5b9a\u3059\u308b\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h2 id=\"padding-margin\">\u4f59\u767d\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-padding-explanation.png\" alt=\"\u5916\u90e8\u4f59\u767d\u3068\u5185\u90e8\u4f59\u767d\u306e\u8a2d\u5b9a\" width=\"1404\" height=\"790\" class=\"alignnone size-full wp-image-1003\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-padding-explanation.png 1404w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-padding-explanation-300x169.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-padding-explanation-768x432.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-padding-explanation-1024x576.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-padding-explanation-718x404.png 718w\" sizes=\"(max-width: 1404px) 100vw, 1404px\" \/><\/p>\n<p>\u4f59\u767d\u306b\u306f\u8981\u7d20\u5916\u90e8\u306b\u8a2d\u5b9a\u3059\u308b\u5916\u90e8\u4f59\u767d(margin)\u3068\u8981\u7d20\u5185\u90e8\u306b\u8a2d\u5b9a\u3059\u308b\u5185\u90e8\u4f59\u767d(padding)\u306e2\u3064\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<table>\n<tr>\n<th>\u9805\u76ee<\/th>\n<th colspan=\"2\">\u5024<\/th>\n<\/tr>\n<tr>\n<td rowspan=\"2\">\u5916\u90e8\u4f59\u767d<\/td>\n<td>margin<\/td>\n<td>\u5916\u90e8\u4f59\u767d<\/td>\n<\/tr>\n<tr>\n<td>margin-(\u203b\u5404\u8fba)<\/td>\n<td>\u5916\u90e8\u4f59\u767d\u306e\u5404\u8fba<br \/>(\u4e0atop\/\u4e0bbottom\/\u53f3right\/\u5de6left)<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">\u5185\u90e8\u4f59\u767d<\/td>\n<td>padding<\/td>\n<td>\u5185\u90e8\u4f59\u767d<\/td>\n<\/tr>\n<tr>\n<td>padding-(\u203b\u5404\u8fba)<\/td>\n<td>\u5185\u90e8\u4f59\u767d\u306e\u5404\u8fba<br \/>(\u4e0atop\/\u4e0bbottom\/\u53f3right\/\u5de6left)<\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<h3 id=\"margin\">\u5916\u90e8\u4f59\u767d margin<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-margin.png\" alt=\"div\u306e\u5916\u90e8\u4f59\u767d\u3092100px\u3068\u308b\" width=\"1368\" height=\"353\" class=\"alignnone size-full wp-image-1012\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-margin.png 1368w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-margin-300x77.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-margin-768x198.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-margin-1024x264.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-margin-718x185.png 718w\" sizes=\"(max-width: 1368px) 100vw, 1368px\" \/><\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u5916\u90e8\u4f59\u767d<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 margin:\u5024;<\/li>\n<li>\u3010\u4f8b\u3011 margin:200px;<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b div\u30bf\u30b0\u306e\u5916\u90e8\u4f59\u767d\u3092100px\u3068\u308b<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div style=\"margin:100px;border:5px green solid;\"&gt;\r\n      \u5916\u90e8\u4f59\u767d100px\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\r\n    &lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<br \/>\n\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-margin.png\" alt=\"CSS\u30b5\u30f3\u30d7\u30eb\u3000\u5916\u90e8\u4f59\u767d 100px\" width=\"1018\" height=\"287\" class=\"alignnone size-full wp-image-924\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-margin.png 1018w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-margin-300x85.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-margin-768x217.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-margin-718x202.png 718w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/p>\n<p>margin\u306e\u5024\u306e\u4ee3\u8868\u7684\u306a\u5358\u4f4d\u306f\u300cpx\u300d\u3067\u3059\u3002\u5024\u306f\u534a\u89d2\u30b9\u30da\u30fc\u30b9\u3067\u533a\u5207\u3063\u3066\u8907\u6570\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<table>\n<tr>\n<th>\u9805\u76ee<\/th>\n<th>\u5185\u5bb9<\/th>\n<\/tr>\n<tr>\n<td>margin:\u5024;<\/td>\n<td>\u4e0a\u4e0b\u5de6\u53f3\u3067\u6307\u5b9a\u3057\u305f\u5024\u306e\u4f59\u767d\u304c\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>margin:\u50241 \u50242;<\/td>\n<td>\u300c\u50241\u304c\u4e0a\u4e0b\u300d\u300c\u50242\u304c\u5de6\u53f3\u300d\u306e\u4f59\u767d\u304c\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002<\/td>\n<\/tr>\n<tr>\n<td>margin:\u50241 \u50242 \u50243 \u50244;<\/td>\n<td>\u8a18\u8ff0\u9806\u306b\u4e0a\u53f3\u4e0b\u5de6\u3068\u4f59\u767d\u304c\u8a2d\u5b9a\uff08\u6642\u8a08\u5468\u308a\uff09\u3055\u308c\u307e\u3059\u3002<\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<p>\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u500b\u3005\u306b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li>margin-left:\u5024; (\u5de6\u306e\u5916\u90e8\u4f59\u767d)<\/li>\n<li>margin-right:\u5024; (\u53f3\u306e\u5916\u90e8\u4f59\u767d)<\/li>\n<li>margin-top:\u5024; (\u4e0a\u306e\u5916\u90e8\u4f59\u767d)<\/li>\n<li>margin-bottom:\u5024; (\u4e0b\u306e\u5916\u90e8\u4f59\u767d)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4>\u5404\u8981\u7d20\u9593\u306emargin\u306e\u76f8\u6bba<\/h4>\n<p>\u5404\u8981\u7d20\u9593\u3067margin\u3067\u4f59\u767d\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u6642\u3001\u5916\u90e8\u4f59\u767d\u306f\u8db3\u3057\u7b97\u306b\u306a\u308b\u306e\u3067\u306f\u306a\u304f\u3069\u3061\u3089\u304b\u5927\u304d\u3044\u65b9\u306e\u4f59\u767d\u304c\u63a1\u7528\u3055\u308c\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u25a0margin\u306e\u76f8\u6bba\u306e\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-offset.png\" alt=\"\" width=\"848\" height=\"305\" class=\"alignnone size-full wp-image-2938\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-offset.png 848w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-offset-300x108.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-offset-768x276.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-offset-718x258.png 718w\" sizes=\"(max-width: 848px) 100vw, 848px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS&lt;\/title&gt;\r\n    &lt;style media=\"screen\"&gt;\r\n      .sample1{\r\n        background-color: skyblue;\r\n        margin-bottom:100px;\r\n      }\r\n      .sample2{\r\n        background-color: pink;\r\n        margin-top:100px;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div class=\"sample1\"&gt;\r\n      \u5916\u90e8\u4f59\u767d\r\n      &lt;br&gt;\r\n      \u4e0b\u5411\u304d\u306b100px;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"sample2\"&gt;\r\n      \u5916\u90e8\u4f59\u767d\r\n      &lt;br&gt;\r\n      \u4e0a\u5411\u304d\u306b100px;\r\n    &lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<br \/>\n&nbsp;<\/p>\n<h4>\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u3092\u771f\u3093\u4e2d\u5bc4\u305b\u306b\u3059\u308b\u4f8b margin:auto\u3092\u5229\u7528\u3059\u308b<\/h4>\n<p>\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb(div\u306a\u3069)\u306b\u5bfe\u3057\u3066\u5de6\u5074\u4f59\u767d\u3092\u81ea\u52d5(margin-left:auto)\u3001\u53f3\u5074\u4f59\u767d\u3082\u81ea\u52d5(margin-right:auto)\u306e\u3088\u3046\u306b\u3001\u5de6\u53f3\u306emargin\u3092\u305d\u308c\u305e\u308cauto \u306b\u3059\u308c\u3070\u8981\u7d20\u304c\u771f\u3093\u4e2d\u5bc4\u305b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>margin:\u3007\u3007px auto; (margin:auto\u3067\u3082\u53ef\u80fd)\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u306a\u304a\u3001\u5bfe\u8c61\u306e\u8981\u7d20\u306bwidth\u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002width\u306f\u30c7\u30d5\u30a9\u30eb\u30c8100%\u306e\u305f\u3081\u3001\u8a2d\u5b9a\u3057\u3066\u3044\u306a\u3044\u3068\u771f\u3093\u4e2d\u5bc4\u305b\u3057\u3066\u3044\u3066\u3082\u5909\u5316\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u4e0a\u4e0b\u306b\u5bfe\u3059\u308bauto\u306f\u52b9\u304b\u306a\u3044\u305f\u30810\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-0-auto.png\" alt=\"margin:\u3007\u3007px auto;\u3067\u8981\u7d20\u3092\u771f\u3093\u4e2d\u5bc4\u305b\u306b\u3059\u308b\" width=\"1374\" height=\"602\" class=\"alignnone size-full wp-image-2931\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-0-auto.png 1374w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-0-auto-300x131.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-0-auto-768x336.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-0-auto-1024x449.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-0-auto-718x315.png 718w\" sizes=\"(max-width: 1374px) 100vw, 1374px\" \/><br \/>\n&nbsp;<\/p>\n<p><div style=\"width: 914px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-132-1\" width=\"914\" height=\"212\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-auto-center.mp4?_=1\" \/><a href=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-auto-center.mp4\">https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-auto-center.mp4<\/a><\/video><\/div><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div style=\"background:pink;width:400px;\"&gt;\r\n      400px&lt;br&gt;\u901a\u5e38\u914d\u7f6e\u306e&lt;br&gt;\u5de6\u5bc4\u305b\u306b\u306a\u3063\u3066\u3044\u308b\u30dc\u30c3\u30af\u30b9\r\n    &lt;\/div&gt;\r\n\r\n\t\t&lt;div style=\"background:skyblue;width:400px;margin:10px auto;\"&gt;\r\n      400px&lt;br&gt;margin:0 auto\u3067&lt;br&gt;\u771f\u3093\u4e2d\u5bc4\u305b\u3057\u305f\u30dc\u30c3\u30af\u30ba\r\n    &lt;\/div&gt;\r\n\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h4>margin\u306e\u771f\u3093\u4e2d\u5bc4\u305b\u3068text-align\u306e\u4e2d\u592e\u63c3\u3048\u306e\u9055\u3044<\/h4>\n<p>margin\u306f\u81ea\u8eab\u306e\u8981\u7d20\u3092\u771f\u3093\u4e2d\u5bc4\u305b\u306b\u3059\u308b\u306e\u306b\u5bfe\u3057\u3066\u3001text-align:center\u306f\u6587\u5b57\u3084\u753b\u50cf\u306a\u3069\u306e\u4e2d\u8eab\u3092\u4e2d\u592e\u63c3\u3048\u306b\u3057\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-textalign-center.png\" alt=\"margin\u306f\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u3092\u771f\u3093\u4e2d\u5bc4\u305b\u306b\u3059\u308b\u306e\u306b\u5bfe\u3057\u3066\u3001text-align:center\u306f\u6587\u5b57\u3084\u753b\u50cf\u306a\u3069\u306e\u4e2d\u8eab\u3092\u4e2d\u592e\u63c3\u3048\u3057\u307e\u3059\u3002\" width=\"1404\" height=\"482\" class=\"alignnone size-full wp-image-2934\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-textalign-center.png 1404w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-textalign-center-300x103.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-textalign-center-768x264.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-textalign-center-1024x352.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-textalign-center-718x246.png 718w\" sizes=\"(max-width: 1404px) 100vw, 1404px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<div style=\"width: 920px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-132-2\" width=\"920\" height=\"224\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-textalign-center.mp4?_=2\" \/><a href=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-textalign-center.mp4\">https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/margin-textalign-center.mp4<\/a><\/video><\/div><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div style=\"background:pink;width:400px;text-align:center;\"&gt;\r\n      400px&lt;br&gt;\u901a\u5e38\u914d\u7f6e\u306e&lt;br&gt;\u5de6\u5bc4\u305b\u306b\u306a\u3063\u3066\u3044\u308b\u30dc\u30c3\u30af\u30b9\r\n\t\t\t&lt;br&gt;\r\n\t\t\ttext-align:center\u3067\u6587\u5b57\u3092\u4e2d\u592e\u5bc4\u305b\u3002\r\n    &lt;\/div&gt;\r\n\t\t&lt;div style=\"background:skyblue;width:400px;margin:10px auto;text-align:center;\"&gt;\r\n      400px&lt;br&gt;margin:0 auto\u3067&lt;br&gt;\u771f\u3093\u4e2d\u5bc4\u305b\u3057\u305f\u30dc\u30c3\u30af\u30b9\r\n\t\t\t&lt;br&gt;\r\n\t\t\ttext-align:center\u3067\u6587\u5b57\u3092\u4e2d\u592e\u5bc4\u305b\u3002\r\n    &lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>\u5916\u90e8\u4f59\u767dmargin\u306b\u95a2\u3059\u308b\u8a73\u7d30\u306a\u8aac\u660e\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-margin\/\">\u3010\u521d\u5fc3\u8005\u5411\u3051\u3011CSS \u5916\u90e8\u4f59\u767dmargin\u30bf\u30b0\u306e\u4f7f\u3044\u65b9\u306e\u57fa\u672c\u3092\u89e3\u8aac<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n<h3 id=\"padding\">\u5185\u90e8\u4f59\u767d padding<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-padding.png\" alt=\"div\u306e\u5185\u90e8\u4f59\u767d\u3092100px\u3068\u308b\" width=\"1364\" height=\"349\" class=\"alignnone size-full wp-image-1011\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-padding.png 1364w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-padding-300x77.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-padding-768x197.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-padding-1024x262.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/example-padding-718x184.png 718w\" sizes=\"(max-width: 1364px) 100vw, 1364px\" \/><br \/>\n&nbsp;<\/p>\n<div class=\"list-frame\">\n<p class=\"list-frame-p\">\u5185\u90e8\u4f59\u767d padding<\/p>\n<ul>\n<li>\u3010\u66f8\u304d\u65b9\u3011 padding:\u5024;<\/li>\n<li>\u3010\u4f8b\u3011 padding:200px;<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\u25a0\u4f7f\u7528\u4f8b div\u30bf\u30b0\u306e\u5185\u90e8\u4f59\u767d\u3092100px\u3068\u308b<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;\u306f\u3058\u3081\u3066\u306eCSS\u30bb\u30df\u30ca\u30fc&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div style=\"padding:100px;border:5px green solid;\"&gt;\r\n      \u5185\u90e8\u4f59\u767d100px\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\r\n    &lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-padding-1.png\" alt=\"CSS\u30b5\u30f3\u30d7\u30eb \u5185\u90e8\u4f59\u767d100px\" width=\"766\" height=\"303\" class=\"alignnone size-full wp-image-925\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-padding-1.png 766w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-padding-1-300x119.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-sample-padding-1-718x284.png 718w\" sizes=\"(max-width: 766px) 100vw, 766px\" \/><br \/>\n&nbsp;<\/p>\n<p>padding\u306e\u4e3b\u306a\u5024\u306e\u5358\u4f4d\u306f\u300cpx\u300d\u3067\u3059\u3002\u5916\u90e8\u4f59\u767dmargin\u3068\u540c\u69d8\u306b\u8907\u6570\u306e\u5024\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<table>\n<tr>\n<th>\u9805\u76ee<\/th>\n<th>\u5185\u5bb9<\/th>\n<\/tr>\n<tr>\n<td>padding:\u5024;<\/td>\n<td>\u4e0a\u4e0b\u5de6\u53f3\u3067\u6307\u5b9a\u3057\u305f\u5024\u306e\u4f59\u767d\u304c\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002<br \/>\n\u4f8b. padding:100px;<\/td>\n<\/tr>\n<tr>\n<td>padding:\u50241 \u50242;<\/td>\n<td>\u300c\u50241\u304c\u4e0a\u4e0b\u300d\u300c\u50242\u304c\u5de6\u53f3\u300d\u306e\u4f59\u767d\u304c\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002<br \/>\n\u4f8b. padding:100px 200px;\n<\/td>\n<\/tr>\n<tr>\n<td>padding:\u50241 \u50242 \u50243 \u50244;<\/td>\n<td>\u8a18\u8ff0\u9806\u306b\u4e0a\u53f3\u4e0b\u5de6\u3068\u4f59\u767d\u304c\u8a2d\u5b9a\uff08\u6642\u8a08\u5468\u308a\uff09\u3055\u308c\u307e\u3059\u3002<br \/>\n\u4f8b. padding:100px 150px 200px 250px;\n<\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<p>\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u500b\u3005\u306b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li>padding-left:\u5024; (\u5de6\u306e\u4f59\u767d)<\/li>\n<li>padding-right:\u5024; (\u53f3\u306e\u4f59\u767d)<\/li>\n<li>padding-top:\u5024; (\u4e0a\u306e\u4f59\u767d)<\/li>\n<li>padding-bottom:\u5024; (\u4e0b\u306e\u4f59\u767d)<\/li>\n<\/ul>\n<p>&nbsp;<br \/>\n\u5185\u90e8\u4f59\u767dpadding\u306b\u95a2\u3059\u308b\u8a73\u7d30\u306a\u8aac\u660e\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-padding\/\">\u3010\u521d\u5fc3\u8005\u5411\u3051\u3011CSS \u5185\u90e8\u4f59\u767dpadding\u30bf\u30b0\u306e\u4f7f\u3044\u65b9\u306e\u57fa\u672c\u3092\u89e3\u8aac<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"box-sizing\">\u30dc\u30c3\u30af\u30b9\u306e\u7b97\u51fa\u65b9\u6cd5\u3000border-box<\/h3>\n<p>\u67a0\u7dda\u300cborder\u300d\u3084\u5185\u90e8\u4f59\u767d\u300cpadding\u300d\u3092\u6a2a\u5e45\u3084\u9ad8\u3055\u306b\u542b\u3081\u308b\u304b\u3069\u3046\u304b\u3001\u30dc\u30c3\u30af\u30b9\u306e\u7b97\u51fa\u65b9\u6cd5\u306b\u300cborder-box\u300d\u3092\u5229\u7528\u3057\u307e\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-box-sizing.png\" alt=\"CSS box-sizing\u3092\u8a2d\u5b9a\u3059\u308b\u3068\u304d\u3068\u3057\u306a\u3044\u6642\u306e\u9055\u3044\" width=\"2002\" height=\"1126\" class=\"alignnone size-full wp-image-4248\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-box-sizing.png 2002w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-box-sizing-300x169.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-box-sizing-768x432.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-box-sizing-1024x576.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-box-sizing-718x404.png 718w\" sizes=\"(max-width: 2002px) 100vw, 2002px\" \/><\/p>\n<table>\n<tr>\n<th>\u9805\u76ee<\/th>\n<th>\u5185\u5bb9<\/th>\n<\/tr>\n<tr>\n<td>content-box<\/td>\n<td>\u67a0\u7dda\u300cborder\u300d\u3084\u5185\u90e8\u4f59\u767d\u300cpadding\u300d\u3092\u6a2a\u5e45\u3068\u9ad8\u3055\u306b\u542b\u3081\u306a\u3044\uff08\u521d\u671f\u5024\uff09<\/td>\n<\/tr>\n<tr>\n<td>border-box<\/td>\n<td>\u67a0\u7dda\u300cborder\u300d\u3084\u5185\u90e8\u4f59\u767d\u300cpadding\u300d\u3092\u6a2a\u5e45\u3068\u9ad8\u3055\u306b\u542b\u3081\u308b<\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b<br \/>\n<div style=\"width: 910px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-132-3\" width=\"910\" height=\"554\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-box-sizing.mp4?_=3\" \/><a href=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-box-sizing.mp4\">https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/06\/css-box-sizing.mp4<\/a><\/video><\/div><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;CSS&lt;\/title&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n    &lt;style media=\"screen\"&gt;\r\n      .box1{\r\n        background:skyblue;\r\n        width:400px;\r\n        height:300px;\r\n        padding: 100px;\r\n        box-sizing: border-box;\r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div class=\"box1\"&gt;\r\n      \u6a2a\u5e45400 x \u9ad8\u3055300px\u306e\u30dc\u30c3\u30af\u30b9\r\n    &lt;\/div&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<br \/>\nbox-siging\u306b\u95a2\u3059\u308b\u8a73\u7d30\u306a\u8aac\u660e\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-box-sizing\/\">CSS box-sizing:border-box\u3067\u4f59\u767d\u3068\u67a0\u3092\u6a2a\u5e45\u9ad8\u3055\u306b\u542b\u3081\u308b<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n<h2 id=\"display\">\u8868\u793a\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb display<\/h2>\n<p>\u8981\u7d20\u306e\u8868\u793a\u5f62\u5f0f\u3092\u6307\u5b9a\u3059\u308b\u969b\u306b\u300cdisplay\u300d\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<p>\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u30fb\u30a4\u30f3\u30e9\u30a4\u30f3\u306e\u8a2d\u5b9a\u3084(display:block,inline,inline-block)\u3001\u975e\u8868\u793a\u8a2d\u5b9a(display:none)\u3001\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9(display:flex)\u3001\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8(display:grid)\u306a\u3069\u8272\u3005\u306a\u8868\u793a\u8a2d\u5b9a\u3092\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>display\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u306f\u4e3b\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u8a2d\u5b9a\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<table>\n<tr>\n<th>\u9805\u76ee<\/th>\n<th>\u610f\u5473<\/th>\n<th>\u5099\u8003<\/th>\n<\/tr>\n<tr>\n<td>display:inline<\/td>\n<td>\u6307\u5b9a\u3057\u305f\u8981\u7d20\u3092\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u306b\u3059\u308b<\/td>\n<td>\u6539\u884c\u306a\u304f\u306a\u308a\u6a2a\u4e26\u3073\u306b\u3067\u304d\u308b\u3002<br \/>\u5e45\u30fb\u9ad8\u3055\u30fb\u4e0a\u4e0b\u4f59\u767d\u3092\u6307\u5b9a\u3067\u304d\u306a\u3044<br \/>\n(\u53c2\u8003)<a href=\"https:\/\/webst8.com\/code\/css-display\/\">\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u30fb\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u3068CSS\u300cdisplay\u300d\u306e\u4f7f\u3044\u65b9<\/a><\/td>\n<\/tr>\n<tr>\n<td>display:block<\/td>\n<td>\u6307\u5b9a\u3057\u305f\u8981\u7d20\u3092\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u306b\u3059\u308b<\/td>\n<td>\u6539\u884c\u304c\u3067\u304d\u3066\u7e26\u4e26\u3073\u306b\u306a\u308b\u3002<br \/>\u5e45\u30fb\u9ad8\u3055\u30fb\u4f59\u767d\u3092\u6307\u5b9a\u3067\u304d\u308b<br \/>\n(\u53c2\u8003)<a href=\"https:\/\/webst8.com\/code\/css-display\/\">\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u30fb\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u3068CSS\u300cdisplay\u300d\u306e\u4f7f\u3044\u65b9<\/a><\/td>\n<\/tr>\n<tr>\n<td>display:inline-block<\/td>\n<td>\u6307\u5b9a\u3057\u305f\u8981\u7d20\u3092\u30a4\u30f3\u30e9\u30a4\u30f3\u3068\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u306e\u4e2d\u9593\u306e\u6027\u8cea\u306b\u3059\u308b<\/td>\n<td>\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u306e\u3088\u3046\u306b\u6539\u884c\u304c\u3064\u304b\u305a\u6a2a\u4e26\u3073\u306b\u306a\u308b\u304c\u3001<br \/>\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u306e\u3088\u3046\u306b\u5e45\u30fb\u9ad8\u3055\u30fb\u4f59\u767d\u3092\u6307\u5b9a\u3067\u304d\u308b<br \/>\n(\u53c2\u8003)<a href=\"https:\/\/webst8.com\/code\/css-display\/\">\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u30fb\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u3068CSS\u300cdisplay\u300d\u306e\u4f7f\u3044\u65b9<\/a><\/td>\n<\/tr>\n<tr>\n<td>display:none<\/td>\n<td>\u6307\u5b9a\u3057\u305f\u8981\u7d20\u3092\u975e\u8868\u793a\u306b\u3059\u308b<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>display:table-cell<\/td>\n<td>\u30c6\u30fc\u30d6\u30ebtable\u30bf\u30b0\u306etd\u8981\u7d20\u306e\u3088\u3046\u306b\u6a2a\u4e26\u3073\u306b\u3059\u308b<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>display:flex<\/td>\n<td>\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u3068\u3044\u3063\u3066\u67d4\u8edf\u306a\u6a2a\u4e26\u3073\u30fb\u5747\u7b49\u306a\u9ad8\u3055\u3092\u5b9f\u73fe\u3067\u304d\u308b<\/td>\n<td>\n(\u53c2\u8003)<a href=\"https:\/\/webst8.com\/code\/css-flex\/\">\u3010\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u3011CSS display:flex\u306e\u4f7f\u3044\u65b9\u3092\u89e3\u8aac<\/a><\/td>\n<\/tr>\n<tr>\n<td>display:grid<\/td>\n<td>\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u3068\u3044\u3063\u3066\u683c\u5b50\u72b6\u306b\u591a\u5f69\u306a\u6a2a\u4e26\u3073\u30fb\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5b9f\u73fe\u3067\u304d\u308b<\/td>\n<td>\n(\u53c2\u8003)<a href=\"https:\/\/webst8.com\/code\/css-display-grid\/\">\u3010CSS \u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u3011display: grid\u306e\u4f7f\u3044\u65b9<\/a><\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<h3>\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u30fb\u30a4\u30f3\u30e9\u30a4\u30f3\u306e\u8a2d\u5b9a\u3000display:block,inline<\/h3>\n<p>\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u8abf\u6574\u3057\u3066\u3044\u304f\u4e2d\u3067\u3001<span class=\"bold\">\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u3092\u4f7f\u3046\u3051\u3069\u9ad8\u3055\u3068\u5e45\u3092\u6307\u5b9a\u3057\u305f\u3044\u3001\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u3092\u4f7f\u3046\u3051\u3069\u6539\u884c\u3057\u305f\u304f\u306a\u3044\u3068\u3044\u3046\u30b1\u30fc\u30b9\u304c\u51fa\u3066\u304d\u305f\u3068\u304d\u306bCSS\u3067\u300cdisplay:block\u307e\u305f\u306finline\u3001inline-block\u300d\u3092\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/span><br \/>\n&nbsp;<\/p>\n<p>\u25a0HTML\u3000\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u3068\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u306e\u9055\u3044\u3068\u7279\u5fb4<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/04\/html-block-inline-explanation.png\" alt=\"HTML\u3000\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u3068\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u306e\u9055\u3044\u3068\u7279\u5fb4\" width=\"1000\" height=\"543\" class=\"alignnone size-full wp-image-4186\" \/><br \/>\n&nbsp;<\/p>\n<p>\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u30fb\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u306e\u610f\u5473\u3068\u9055\u3044\u304a\u3088\u3073\u300cdisplay\u300d\u306b\u3064\u3044\u3066\u306f<a href=\"https:\/\/webst8.com\/code\/css-display\/\">\u30a4\u30f3\u30e9\u30a4\u30f3\u8981\u7d20\u30fb\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u3068CSS\u300cdisplay\u300d\u306e\u4f7f\u3044\u65b9<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"display-flex\">\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u306e\u8a2d\u5b9a\u3000display:flex<\/h3>\n<p>\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9(\u30d5\u30ec\u30ad\u30b7\u30d6\u30eb\u30dc\u30c3\u30af\u30b9)\u306f\u3001CSS\u306e\u65b0\u3057\u3044\u30ec\u30a4\u30a2\u30a6\u30c8\u6280\u6cd5\u3067\u3001HTML\u30d6\u30ed\u30c3\u30af\u3092\u6a2a\u4e26\u3073\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>display:flex\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001css\u306eflexbox\uff08\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\uff09\u3068\u547c\u3070\u308c\u308b\u30ec\u30a4\u30a2\u30a6\u30c8\u30e2\u30fc\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2019\/04\/bootstrap-flex-explanation.png\" alt=\"\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u306e\u8aac\u660e\" width=\"1000\" height=\"509\" class=\"alignnone size-full wp-image-8866\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2019\/04\/bootstrap-flex-explanation.png 1000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2019\/04\/bootstrap-flex-explanation-300x153.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2019\/04\/bootstrap-flex-explanation-768x391.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2019\/04\/bootstrap-flex-explanation-718x365.png 718w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u8868\u793a\u4f8b\u3000\u89aa\u8981\u7d20\u306bdisplay:flex\u3092\u6307\u5b9a<br \/>\n<div style=\"width: 920px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-132-4\" width=\"920\" height=\"450\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2019\/10\/display-flex.mp4?_=4\" \/><a href=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2019\/10\/display-flex.mp4\">https:\/\/webst8.com\/code\/wp-content\/uploads\/2019\/10\/display-flex.mp4<\/a><\/video><\/div><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n<pre class=\"lang:default decode:true \" >&lt;html lang=\"ja\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n  &lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\r\n  &lt;title&gt;flexbox&lt;\/title&gt;\r\n  &lt;style&gt;\r\n     *{\r\n       box-sizing: border-box;\r\n     }\r\n    #flexbox{\r\n      display:flex;\r\n      background:#ddd;\r\n      width: 100%;\r\n      height:auto;\r\n      padding:10px;\r\n    }\r\n    .box-item{\r\n      background:orange;\r\n      text-align: center;\r\n      padding:15px 40px;\r\n      border:5px solid #ddd;\r\n    }    \r\n  &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div id=\"flexbox\"&gt;\r\n    &lt;div class=\"box-item\"&gt;1&lt;\/div&gt;\r\n    &lt;div class=\"box-item\"&gt;2&lt;\/div&gt;\r\n    &lt;div class=\"box-item\"&gt;3&lt;\/div&gt;\r\n    &lt;div class=\"box-item\"&gt;4&lt;\/div&gt;\r\n    &lt;div class=\"box-item\"&gt;5&lt;\/div&gt;             \r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>\u30d5\u30ec\u30c3\u30af\u30b9\u30b3\u30f3\u30c6\u30ca\u306b\u8a2d\u5b9a\u3067\u304d\u308b\u9805\u76ee\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<table>\n<tr>\n<th style=\"width:30%\">\u9805\u76ee<\/th>\n<th style=\"width:70%\">\u610f\u5473<\/th>\n<\/tr>\n<tr>\n<th>display:flex<\/th>\n<td><span class=\"hutoaka\">\u3010\u6700\u91cd\u8981(\u5fc5\u9808)\u3011\u3000<\/span>\u30d5\u30ec\u30c3\u30af\u30b9\u30b3\u30f3\u30c6\u30ca\u306e\u6307\u5b9a<\/td>\n<\/tr>\n<tr>\n<th>flex-direction<\/th>\n<td><span class=\"hutoaka\">\u3010\u91cd\u8981\u3011 <\/span>\u5b50\u8981\u7d20(\u30d5\u30ec\u30c3\u30af\u30b9\u30a2\u30a4\u30c6\u30e0)\u3092\u3069\u306e\u65b9\u5411\u306b\u4e26\u3079\u3066\u3044\u304f\u304b\u3092\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3<\/td>\n<\/tr>\n<tr>\n<th>flex-wrap<\/th>\n<td><span class=\"hutoaka\">\u3010\u91cd\u8981\u3011 <\/span>\u5b50\u8981\u7d20(\u30d5\u30ec\u30c3\u30af\u30b9\u30a2\u30a4\u30c6\u30e0)\u3092\u4e00\u884c\u306b\u4e26\u3079\u308b\u304b\u3001\u8907\u6570\u884c\u306b\u4e26\u3079\u308b\u304b\u3092\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3<\/td>\n<\/tr>\n<tr>\n<th>justify-content<\/th>\n<td>flex-direction\u3067\u4e26\u3079\u308b\u969b\u306b\u3001(\u4e3b\u8ef8\u306b\u5bfe\u3057\u3066)\u5b50\u8981\u7d20\u540c\u58eb\u3092\u3069\u306e\u3088\u3046\u306a\u9593\u9694\u3067\u4e26\u3079\u308b\u304b\u3092\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3<\/td>\n<\/tr>\n<tr>\n<th>align-items<\/th>\n<td>flex-direction\u3067\u4e26\u3079\u308b\u969b\u306b\u3001\u4ea4\u5dee\u8ef8\u306b\u5bfe\u3057\u3066\u5b50\u8981\u7d20\u540c\u58eb\u3092\u3069\u306e\u3088\u3046\u306a\u9593\u9694\u3067\u4e26\u3079\u308b\u304b\u3092\u6307\u5b9a\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3<\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<p>\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u306e\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-flex\/\">\u3010\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u3011CSS display:flex\u306e\u4f7f\u3044\u65b9\u3092\u89e3\u8aac<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"display-grid\">\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u8a2d\u5b9a\u3000display:grid<\/h3>\n<p>Grid Layout(display: grid)\u306f\u3001CSS\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3080\u624b\u6cd5\u306e1\u3064\u3067\u3001\u8981\u7d20\u3092\u683c\u5b50\u72b6\u306b\u4e26\u3079\u3066\u914d\u7f6e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Grid Layout\u3067\u306f\u5217\u6570\u3068\u884c\u6570\u3092\u3042\u3089\u304b\u3058\u3081\u6307\u5b9a\u3057\u3001\u6c34\u5e73\u7dda\u3068\u5782\u76f4\u7dda\u304c\u4ea4\u5dee\u3057\u3066\u3067\u304d\u305f\u30a8\u30ea\u30a2\u306b\u30a2\u30a4\u30c6\u30e0\u3092\u914d\u7f6e\u3057\u3066\u3044\u304f\u3053\u3068\u3067\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7d44\u3093\u3067\u3044\u304d\u307e\u3059\u3002<\/p>\n<p class=\"komozi\"><strong>\u25a0(\u53c2\u8003)\u5217\u6570\u30923\u3001\u884c\u6570\u30924\u3068\u6307\u5b9a\u3057\u30011\u756a\u5de6\u4e0a\u306e\u30a8\u30ea\u30a2\u306b\u30a2\u30a4\u30c6\u30e0\u3092\u914d\u7f6e\u3055\u305b\u3066\u3044\u308b\u4f8b<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-37467\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/grid-layout-image.jpg\" alt=\"\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u8a2d\u5b9a\u30a4\u30e1\u30fc\u30b8\" width=\"2000\" height=\"1125\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/grid-layout-image.jpg 2000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/grid-layout-image-300x169.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/grid-layout-image-1024x576.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/grid-layout-image-768x432.jpg 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/grid-layout-image-1536x864.jpg 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u300cdisplay: grid\u300d\u304c\u6307\u5b9a\u3055\u308c\u305f\u8981\u7d20\u3092<strong>\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca<\/strong>\u3001\u305d\u306e\u5b50\u8981\u7d20\u3068\u306a\u308b\u8981\u7d20\u3092<strong>\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0<\/strong>\u3068\u547c\u3073\u307e\u3059\u3002<br \/>\n<span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-37479\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/grid-layout-container-item.jpg\" alt=\"\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u3068\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u306b\u3064\u3044\u3066\u306e\u8aac\u660e\u56f3\" width=\"1500\" height=\"962\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/grid-layout-container-item.jpg 1500w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/grid-layout-container-item-300x192.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/grid-layout-container-item-1024x657.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/grid-layout-container-item-768x493.jpg 768w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/span><br \/>\n&nbsp;<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"index.html\">&lt;div class=\"grid-container\"&gt;\r\n  &lt;div class=\"grid__item\"&gt;Grid Item1&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<pre class=\"lang:css decode:true\" title=\"style.css\">* {\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.grid-container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  grid-template-rows: 100px 100px 100px 100px;\r\n  gap: 20px;\r\n}<\/pre>\n<p>&nbsp;<br \/>\n\u306a\u304a\u3001\u5217\u6570\u3068\u884c\u6570\u306e\u6307\u5b9a\u306f\u30a2\u30a4\u30c6\u30e0\u5168\u4f53\u3092\u56f2\u3063\u305f\u89aa\u8981\u7d20\u306b\u5bfe\u3057\u3066\u300cdisplay: grid\u300d\u3092\u6307\u5b9a\u3057\u305f\u5f8c\u3001\u300cgrid-template-columns\u300d\u300cgrid-template-rows\u300d\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<table>\n<tbody>\n<tr>\n<th rowspan=\"4\" style=\"width: 20%\">\u89aa\u8981\u7d20(\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca)\u306b\u5bfe\u3057\u3066\u8a2d\u5b9a<\/th>\n<th style=\"width: 30%\">display:grid(\u5fc5\u9808)<\/th>\n<td style=\"width: 50%\">\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u6210\u3059\u308b(\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u3092\u4f5c\u6210\u3059\u308b)<\/td>\n<\/tr>\n<tr>\n<th>grid-template-columns(\u5b9f\u8cea\u5fc5\u9808)<\/th>\n<td>\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u306e\u5217\u6570\u3084\u5404\u30b0\u30ea\u30c3\u30c9\u306e\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\u3059\u308b<\/td>\n<\/tr>\n<tr>\n<th>grid-template-rows(\u5b9f\u8cea\u5fc5\u9808)<\/th>\n<td>\u30b0\u30ea\u30c3\u30c9\u30b3\u30f3\u30c6\u30ca\u306e\u884c\u6570\u3084\u5404\u30b0\u30ea\u30c3\u30c9\u306e\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\u3059\u308b<\/td>\n<\/tr>\n<tr>\n<th>gap<\/th>\n<td>\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u540c\u58eb\u306e\u9699\u9593\u3092\u8a2d\u5b9a\u3059\u308b<\/td>\n<\/tr>\n<tr>\n<th rowspan=\"2\">\u5b50\u8981\u7d20(\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0)\u306b\u5bfe\u3057\u3066\u8a2d\u5b9a<\/th>\n<th>grid-column(\u5b9f\u8cea\u5fc5\u9808)<\/th>\n<td>\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u306e\u6a2a\u65b9\u5411\u306e\u4f4d\u7f6e\u3092\u6307\u5b9a\u3059\u308b<\/td>\n<\/tr>\n<tr>\n<th>grid-row(\u5b9f\u8cea\u5fc5\u9808)<\/th>\n<td>\u30b0\u30ea\u30c3\u30c9\u30a2\u30a4\u30c6\u30e0\u306e\u7e26\u65b9\u5411\u306e\u4f4d\u7f6e\u3092\u6307\u5b9a\u3059\u308b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-display-grid\/\">\u3010CSS \u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8\u3011display: grid\u306e\u4f7f\u3044\u65b9<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h2>\u5f71\u3092\u3064\u3051\u308b\u30b9\u30bf\u30a4\u30eb box-shadow\u3001text-shadow<\/h2>\n<h3 id=\"text-shadow\">text-shadow\u3067\u30c6\u30ad\u30b9\u30c8\u306b\u5f71\u3092\u3064\u3051\u308b\u65b9\u6cd5<\/h3>\n<p>text-shadow\u30d7\u30ed\u30d1\u30c6\u30a3\u306fCSS\u30d7\u30ed\u30d1\u30c6\u30a3\u306e1\u3064\u3067\u3001<strong>\u30c6\u30ad\u30b9\u30c8\u306b\u5f71\u3092\u4ed8\u3051\u308b<\/strong>\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u4e0b\u8a18\u306f\u3001h1\u30bf\u30b0\u306btext-shadow\u3067\u5f71\u3092\u3064\u3051\u305f\u4f8b\u3067\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \" title=\"index.html\">&lt;h1&gt;\u30c6\u30ad\u30b9\u30c8\u30b7\u30e3\u30c9\u30a6\u306e\u4f7f\u3044\u65b9&lt;\/h1&gt;<\/pre>\n<pre class=\"lang:css decode:true \" title=\"style.css\">h1{\r\n  text-shadow: 6px 3px #bbb;\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36292\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/text-shadow-1-2-values-sample.png\" alt=\"text-shadow\u30d7\u30ed\u30d1\u30c6\u30a31\u30012\u3064\u76ee\u306e\u5024\u3092\u6307\u5b9a\u3057\u3066\u5f71\u306e\u4f4d\u7f6e\u3092\u8abf\u7bc0\u3057\u3066\u3044\u308b\u4f8b\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/text-shadow-1-2-values-sample.png 1500w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/text-shadow-1-2-values-sample-300x200.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/text-shadow-1-2-values-sample-1024x683.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/text-shadow-1-2-values-sample-768x512.png 768w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/span><br \/>\n&nbsp;<\/p>\n<p>text-shadow\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u306f\u5408\u8a08\u30674\u3064\u306e\u5024\u3092\u534a\u89d2\u30b9\u30da\u30fc\u30b9\u3067\u533a\u5207\u3063\u3066\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u3001\u305d\u308c\u305e\u308c\u306e\u5024\u306e\u610f\u5473\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36291\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/text-shadow-4-values.jpg\" alt=\"text-shadow\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u6307\u5b9a\u3067\u304d\u308b4\u3064\u306e\u5024\u306e\u610f\u5473\" width=\"2000\" height=\"1125\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/text-shadow-4-values.jpg 2000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/text-shadow-4-values-300x169.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/text-shadow-4-values-1024x576.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/text-shadow-4-values-768x432.jpg 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/text-shadow-4-values-1536x864.jpg 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><br \/>\n&nbsp;<\/p>\n<p>text-shadow\u306e\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-text-shadow\/\">\u3010CSS text-shadow\u306e\u4f7f\u3044\u65b9\u3011\u6587\u5b57\u306b\u5f71\u3092\u4ed8\u3051\u308b\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"box-shadow\">box-shadow\u3067\u30dc\u30c3\u30af\u30b9\u306b\u5f71\u3092\u3064\u3051\u308b\u65b9\u6cd5<\/h3>\n<p>box-shadow\u306f\u3001<span class=\"ymarker\"><strong>\u753b\u50cf\u3084\u30dc\u30c3\u30af\u30b9\u306e\u5468\u308a\u306b\u30c9\u30ed\u30c3\u30d7\u30b7\u30e3\u30c9\u30a6\u306e\u3088\u3046\u306a\u5f71\u306e\u52b9\u679c\u3092\u4ed8\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u308bCSS\u30d7\u30ed\u30d1\u30c6\u30a3<\/strong><\/span>\u3067\u3059\u3002<\/p>\n<p>\u8907\u6570\u306e\u5024\u3092\u534a\u89d2\u30b9\u30da\u30fc\u30b9\u3067\u533a\u5207\u3063\u3066\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u3001\u3053\u3046\u3059\u308b\u3053\u3068\u3067\u5f71\u306e\u4f4d\u7f6e\u306e\u8abf\u6574\u3084\u8272\u306e\u5909\u66f4\u3001\u5927\u304d\u3055\u306e\u8abf\u6574\u306a\u3069\u69d8\u3005\u306a\u8a2d\u5b9a\u3092\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\" title=\"index.html\">&lt;div class=\"box\"&gt;&lt;\/div&gt;<\/pre>\n<pre class=\"lang:css mark:5 decode:true \" title=\"style.css\">.box{\r\n  width: 200px;\r\n  height: 200px;\r\n  background-color: bisque;\r\n  box-shadow: 10px 10px 4px #ccc ;\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36183\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/box-shadow-sample.jpg\" alt=\"box-shadow\u306e\u4f7f\u7528\u4f8b\" width=\"1000\" height=\"750\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/box-shadow-sample.jpg 1000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/box-shadow-sample-300x225.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/box-shadow-sample-768x576.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/span><br \/>\n&nbsp;<\/p>\n<p>box-shadow\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u306f\u5408\u8a08\u30676\u3064\u306e\u5024\u3092\u534a\u89d2\u30b9\u30da\u30fc\u30b9\u3067\u533a\u5207\u3063\u3066\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u3001\u305d\u308c\u305e\u308c\u306e\u5024\u306e\u610f\u5473\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36189\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/box-shadow-6-values.jpg\" alt=\"box-shadow\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u6307\u5b9a\u3067\u304d\u308b6\u3064\u306e\u5024\u306e\u610f\u5473\" width=\"2000\" height=\"1125\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/box-shadow-6-values.jpg 2000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/box-shadow-6-values-300x169.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/box-shadow-6-values-1024x576.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/box-shadow-6-values-768x432.jpg 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/box-shadow-6-values-1536x864.jpg 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/p>\n<p>\u3053\u306e\u3046\u3061\u3001\u6bd4\u8f03\u7684\u3088\u304f\u4f7f\u3046\u3082\u306e\u306f\u30011:\u6c34\u5e73\u65b9\u5411\u306e\u5f71\u306e\u4f4d\u7f6e\u30012:\u5782\u76f4\u65b9\u5411\u306e\u5f71\u306e\u4f4d\u7f6e\u30013:\u307c\u304b\u3057\u30015\uff1a\u8272\u3000\u306e4\u3064\u3067\u3059\u3002<\/p>\n<p>box-shadow\u306e\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-box-shadow\/\">\u3010CSS box-shadow\u306e\u4f7f\u3044\u65b9\u3011\u30dc\u30c3\u30af\u30b9\u8981\u7d20\u3084\u753b\u50cf\u306b\u5f71\u3092\u3064\u3051\u308b\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h2 id=\"position\">\u4f4d\u7f6e\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb position<\/h2>\n<p>\u57fa\u6e96\u4f4d\u7f6e\u3092\u8a2d\u5b9a\u3057\u3066\u304b\u3089\u3001\u8981\u7d20\u3092px\u3084%\u3067\u914d\u7f6e\u3059\u308b\u65b9\u6cd5\u3068\u3057\u3066\u300cposition\u300d\u3068\u3044\u3046\u30b9\u30bf\u30a4\u30eb\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>position\u3067\u914d\u7f6e\u65b9\u6cd5\u3092\u6307\u5b9a\u3057\u3064\u3064\u3001\u4f4d\u7f6e\u6307\u5b9a\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u300ctop(\u4e0a)\u3001bottom(\u4e0b)\u3001left(\u5de6)\u3001right(\u53f3)\u300d\u3068\u5408\u308f\u305b\u3066\u8981\u7d20\u306e\u4f4d\u7f6e\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p>\u25a0position\u3092\u5229\u7528\u3057\u305f\u4f4d\u7f6e\u6307\u5b9a\u306e\u30b5\u30f3\u30d7\u30eb<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/css-position-explanation-1.png\" alt=\"CSS position\u306e\u8aac\u660e\" width=\"800\" height=\"430\" class=\"alignnone size-full wp-image-4108\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/css-position-explanation-1.png 800w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/css-position-explanation-1-300x161.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/css-position-explanation-1-768x413.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/css-position-explanation-1-718x386.png 718w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><br \/>\n&nbsp;<\/p>\n<p>position\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u306f\u4e3b\u306b\u4ee5\u4e0b\u306e4\u3064\u306e\u8a2d\u5b9a\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<table class=\"table\">\n<tr>\n<th style=\"width:25%;\">\u9805\u76ee<\/th>\n<th style=\"width:75%;\">\u610f\u5473<\/th>\n<\/tr>\n<tr>\n<th>position:static;<\/th>\n<td>\n\u300cposition: static\u300d\u306f\u521d\u671f\u5024\u3067\u3059\u3002\u901a\u5e38\u306e\u4f4d\u7f6e\u306b\u914d\u7f6e\u3055\u308c\u307e\u3059\uff08\u8981\u7d20\u306e\u9806\u756a\u306b\u5de6\u4e0a\u304b\u3089\u914d\u7f6e\u3055\u308c\u307e\u3059)\u3002<br \/>\n\u5f8c\u8ff0\u306etop,bottom\u306a\u3069\u3067\u4f4d\u7f6e\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093\u3002<br \/>\n\u4f55\u3082\u6307\u5b9a\u3057\u306a\u3044\u6642\u306fposition:static\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u660e\u793a\u7684\u306b\u6307\u5b9a\u3059\u308b\u30b1\u30fc\u30b9\u306f\u5c11\u306a\u3044\u3067\u3059\u3002\n<\/td>\n<\/tr>\n<tr>\n<th>position:relative;<\/th>\n<td>\n\u300cposition:relative\u300d\u3092\u8a2d\u5b9a\u3059\u308b\u3068\u3001\u3082\u3068\u3082\u3068\u914d\u7f6e\u3055\u308c\u308b\u306f\u305a\u306e\u5834\u6240\u3092\u57fa\u6e96\u306btop,left\u306a\u3069\u306e\u4f4d\u7f6e\u6307\u5b9a\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002position:relative\u306f\u76f8\u5bfe\u4f4d\u7f6e\u3068\u8a00\u3044\u307e\u3059\u3002\n<\/td>\n<\/tr>\n<tr>\n<th>position:absolute;<\/th>\n<td>\n\u300cposition:absolute\u300d\u3092\u6307\u5b9a\u3059\u308b\u3068\u901a\u5e38\u306e\u914d\u7f6e\u304b\u3089\u5916\u308c\u3066\u30d6\u30e9\u30a6\u30b6(body)\u304c\u57fa\u6e96\u4f4d\u7f6e\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u89aa\u8981\u7d20\u306bposition:static\u4ee5\u5916\u306e\u5024\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u89aa\u8981\u7d20\u306e\u5de6\u4e0a\u304c\u57fa\u6e96\u4f4d\u7f6e\u306b\u306a\u308a\u307e\u3059\u3002\n<\/td>\n<\/tr>\n<tr>\n<th>position:fixed;<\/th>\n<td>\nposition:fixed\u3092\u6307\u5b9a\u3059\u308b\u3068absolute\u3068\u540c\u69d8\u306b\u3001\u901a\u5e38\u306e\u914d\u7f6e\u304b\u3089\u5916\u308c\u3066\u89aa\u8981\u7d20\u3092\u57fa\u6e96\u70b9\u3068\u3057\u305f\u4f4d\u7f6e\u306b\u5f37\u5236\u7684\u306b\u914d\u7f6e\u3055\u308c\u307e\u3059\u3002\u524d\u8ff0\u306eabsolute\u3068\u306e\u9055\u3044\u306f\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u3082\u4f4d\u7f6e\u304c\u56fa\u5b9a\u3055\u308c\u305f\u307e\u307e\u3068\u3044\u3046\u70b9\u3067\u3059\u3002\n<\/td>\n<\/tr>\n<tr>\n<th>position:sticky;<\/th>\n<td>\u30d6\u30e9\u30a6\u30b6\u753b\u9762\u306e\u9014\u4e2d\u304b\u3089\u8981\u7d20\u3092\u30a6\u30a3\u30f3\u30c9\u30a6\u4e0a\u306b\u304f\u3063\u3064\u3051\u305f\u308a\u3059\u308b\u3053\u3068(\u9014\u4e2d\u304b\u3089position:fixed\u306e\u3088\u3046\u306b)\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n(\u53c2\u8003)<a href=\"https:\/\/webst8.com\/code\/css-position-sticky\/\">CSS position:sticky\u306e\u4f7f\u3044\u65b9\u3068\u52d5\u304b\u306a\u3044\u6642\u306e\u5bfe\u51e6\u6cd5<\/a>\n<\/td>\n<\/tr>\n<\/table>\n<p>&nbsp;<\/p>\n<p>\u307e\u305f\u3001position\u306b\u3088\u308b\u4f4d\u7f6e\u6307\u5b9a\u3068\u3068\u3082\u306b\u3001\u5177\u4f53\u7684\u306a\u4f4d\u7f6e(\u8ddd\u96e2)\u6307\u5b9a\u306b\u300ctop(\u4e0a)\u3001bottom(\u4e0b)\u3001left(\u5de6)\u3001right(\u53f3)\u300d\u3092\u5229\u7528\u3057\u307e\u3059\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/css-top-bottom-left-right-sample.png\" alt=\"CSS top,bottom,left,right\u3092\u6307\u5b9a\u3057\u305f\u30b5\u30f3\u30d7\u30eb\" width=\"800\" height=\"467\" class=\"alignnone size-full wp-image-4112\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/css-top-bottom-left-right-sample.png 800w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/css-top-bottom-left-right-sample-300x175.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/css-top-bottom-left-right-sample-768x448.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/02\/css-top-bottom-left-right-sample-718x419.png 718w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><br \/>\n&nbsp;<\/p>\n<p>position\u306b\u95a2\u3059\u308b\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\u306f<a href=\"https:\/\/webst8.com\/code\/css-position\/\">\u4f4d\u7f6e\u6307\u5b9a\u3067\u4f7f\u3046CSS\u30d7\u30ed\u30d1\u30c6\u30a3\u300cposition\u300d\u306e\u4f7f\u3044\u65b9<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"overlflow\">\u8981\u7d20\u306e\u306f\u307f\u51fa\u3057\u306b\u95a2\u3059\u308b\u8a2d\u5b9a overflow<\/h2>\n<p>overflow\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001\u8981\u7d20\u304c\u30dc\u30c3\u30af\u30b9\u306e\u5916\u5074\u306b\u306f\u307f\u51fa\u3066\u3057\u307e\u3063\u305f\u969b\u306b\u3001<strong>\u306f\u307f\u51fa\u305f\u90e8\u5206\u3092\u3069\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u305b\u308b\u304b\u3092\u6307\u5b9a\u3059\u308b\u4e8b\u304c\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3<\/strong>\u3067\u3059\u3002<\/p>\n<p>\u57fa\u672c\u7684\u306b\u8981\u7d20\u304c\u30dc\u30c3\u30af\u30b9\u304b\u3089\u306f\u307f\u51fa\u308b\u3068\u3044\u3046\u3053\u3068\u306f\u306a\u3044\u306e\u3067\u3059\u304c\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u6a2a\u5e45(width)\u3084\u9ad8\u3055(height)\u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u5834\u5408\u3001\u8981\u7d20\u304c\u30dc\u30c3\u30af\u30b9\u304b\u3089\u306f\u307f\u51fa\u3066\u3057\u307e\u3046\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \" title=\"index.html\"> &lt;div class=\"sample\"&gt;\u4eca\u56de\u306foverflow\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u4f7f\u3044\u65b9\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u307e\u3059\u3002&lt;\/div&gt;<\/pre>\n<pre class=\"lang:css decode:true\" title=\"style.css\">.sample {\r\n width: 50px;\r\n height: 50px;\r\n background-color: bisque;\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-35265\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/when-to-use-overflow.jpg\" alt=\"\u6a2a\u5e45(width)\u3084\u9ad8\u3055(height)\u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u3053\u3068\u3067\u8981\u7d20\u304c\u30dc\u30c3\u30af\u30b9\u304b\u3089\u306f\u307f\u51fa\u3066\u3057\u307e\u3063\u3066\u3044\u308b\u30b1\u30fc\u30b9\u3002\" width=\"1500\" height=\"1125\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/when-to-use-overflow.jpg 1500w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/when-to-use-overflow-300x225.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/when-to-use-overflow-1024x768.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/when-to-use-overflow-768x576.jpg 768w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/span><\/p>\n<p>\u3053\u306e\u3088\u3046\u306a\u5834\u5408\u306boverflow\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3063\u3066\u3001\u306f\u307f\u51fa\u3066\u3044\u308b\u8981\u7d20\u3092\u96a0\u3057\u305f\u308a\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u3067\u8868\u793a\u3055\u305b\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"lang:css mark:5 decode:true\" title=\"style.css\">.sample {\r\n width: 50px;\r\n height: 50px;\r\n background-color: bisque;\r\n overflow: scroll;\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-35266\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/overflow-use-sample.gif\" alt=\"overflow\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3063\u3066\u3001\u306f\u307f\u51fa\u3066\u3044\u308b\u8981\u7d20\u3092\u96a0\u3057\u3066\u3044\u308b\u4f8b\u3002\" width=\"2000\" height=\"1333\" \/><\/span><br \/>\n&nbsp;<\/p>\n<p><strong>overflow:hidden<\/strong>\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30dc\u30c3\u30af\u30b9\u304b\u3089\u306f\u307f\u51fa\u305f\u90e8\u5206\u3092\u898b\u3048\u306a\u304f\u3059\u308b\u4e8b\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"lang:css mark:5 decode:true \" title=\"style.css\">.sample {\r\n  width: 100px;\r\n  height: 50px;\r\n  background-color: bisque;\r\n  overflow: hidden;\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-35269\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/overflow-hidden-sample.png\" alt=\"overflow: hidden\u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u4f8b\u3002\" width=\"1500\" height=\"1125\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/overflow-hidden-sample.png 1500w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/overflow-hidden-sample-300x225.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/overflow-hidden-sample-1024x768.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/05\/overflow-hidden-sample-768x576.png 768w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/span><\/p>\n<p>&nbsp;<\/p>\n<div class=\"yellowbox\">\n<p><strong>\u25a0overflow\u3067\u4f7f\u7528\u3067\u304d\u308b\u5024<\/strong><\/p>\n<div class=\"maruck\">\n<ul>\n<li>visible(\u521d\u671f\u5024)\uff1a\u306f\u307f\u51fa\u305f\u90e8\u5206\u3092\u305d\u306e\u307e\u307e\u8868\u793a\u3059\u308b<\/li>\n<li>hidden\uff1a\u306f\u307f\u51fa\u305f\u90e8\u5206\u3092\u96a0\u3059<\/li>\n<li>scroll\uff1a\u306f\u307f\u51fa\u305f\u90e8\u5206\u3092\u30b9\u30af\u30ed\u30fc\u30eb\u3067\u8868\u793a\u3059\u308b<\/li>\n<li>auto\uff1a\u306f\u307f\u51fa\u305f\u90e8\u5206\u306e\u51e6\u7406\u3092\u30d6\u30e9\u30a6\u30b6\u5074\u306b\u59d4\u306d\u308b(\u57fa\u672c\u7684\u306b\u306fscroll\u3068\u540c\u3058\u7d50\u679c\u306b\u306a\u308b)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>overflow\u306b\u95a2\u3059\u308b\u8a73\u7d30\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-overflow\/\">\u3010CSS overflow\u306e\u4f7f\u3044\u65b9\u3011hidden\u3084scroll\u306e\u9055\u3044<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h2 id=\"transform\">\u8981\u7d20\u306e\u56de\u8ee2\u3001\u79fb\u52d5\u3001\u4f38\u7e2e\u3001\u5909\u5f62 transform<\/h2>\n<p><strong>transform<\/strong>\u3067\u306f\u3001\u8981\u7d20\u306e\u56de\u8ee2\u3001\u79fb\u52d5\u3001\u4f38\u7e2e\u3001\u5909\u5f62\u3092\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>transform\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u6307\u5b9a\u3067\u304d\u308b\u4e3b\u306a\u95a2\u6570\u306f\u4e0b\u8a18\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<table>\n<tbody>\n<tr>\n<th>rotate()<\/th>\n<td>\u8981\u7d20\u3092\u56de\u8ee2\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u95a2\u6570<br \/>\n(\u8a73\u7d30\u8a18\u4e8b)<a href=\"https:\/\/webst8.com\/code\/css-transform-rotate\/\">\u3010transform:rotate()\u306e\u4f7f\u3044\u65b9\u3011\u8981\u7d20\u3092\u56de\u8ee2\u3055\u305b\u308b\u65b9\u6cd5<\/a>\n<\/td>\n<\/tr>\n<tr>\n<th>translate()<\/th>\n<td>\u8981\u7d20\u3092\u79fb\u52d5\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u95a2\u6570<br \/>\n(\u8a73\u7d30\u8a18\u4e8b)<a href=\"https:\/\/webst8.com\/code\/css-transform-translate\/\">\u3010transform:translate()\u306e\u4f7f\u3044\u65b9\u3011xy\u8ef8\u4e0a\u306e\u79fb\u52d5\u65b9\u6cd5<\/a>\n<\/td>\n<\/tr>\n<tr>\n<th>scale()<\/th>\n<td>\u8981\u7d20\u3092\u4f38\u7e2e\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u95a2\u6570<br \/>\n(\u8a73\u7d30\u8a18\u4e8b)<a href=\"https:\/\/webst8.com\/code\/css-transform-scale\/\">\u3010transform:scale()\u306e\u4f7f\u3044\u65b9\u3011\u8981\u7d20\u306e\u62e1\u5927\u30fb\u7e2e\u5c0f\u65b9\u6cd5<\/a>\n<\/td>\n<\/tr>\n<tr>\n<th>skew()<\/th>\n<td>\u8981\u7d20\u3092\u6b6a\u307e\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u95a2\u6570<br \/>\n(\u8a73\u7d30\u8a18\u4e8b)<a href=\"https:\/\/webst8.com\/code\/css-transform-skew\/\">\u3010transform:skew()\u306e\u4f7f\u3044\u65b9\u3011\u8981\u7d20\u306b\u50be\u659c\u3092\u3064\u3051\u308b\u65b9\u6cd5<\/a>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 id=\"transform-rotate\">transform:rotate()\u3067\u8981\u7d20\u3092\u56de\u8ee2\u3055\u305b\u308b\u65b9\u6cd5<\/h3>\n<p>rotate()\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30de\u30a6\u30b9\u30db\u30d0\u30fc\u6642\u306b\u8981\u7d20\u3092\u597d\u304d\u306a\u89d2\u5ea6\u3067\u56de\u8ee2\u3055\u305b\u305f\u308a\u3068\u3044\u3063\u305f\u5b9f\u88c5\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36764\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/transform-rotate.png\" alt=\"transform: rotate\u306e\u6307\u5b9a\u65b9\u6cd5\" width=\"2323\" height=\"559\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/transform-rotate.png 2323w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/transform-rotate-300x72.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/transform-rotate-1024x246.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/transform-rotate-768x185.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/transform-rotate-1536x370.png 1536w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/transform-rotate-2048x493.png 2048w\" sizes=\"(max-width: 2323px) 100vw, 2323px\" \/><\/span><\/p>\n<p>rotate()\u306e\u5f15\u6570\u306b\u56de\u8ee2\u89d2\u5ea6\u3092\u8a18\u8ff0\u3059\u308b\u3053\u3068\u3067\u3001<span class=\"hutoaka\">\u8981\u7d20\u306e\u4e2d\u5fc3\u3092\u57fa\u6e96<\/span>\u306b\u56de\u8ee2\u3055\u305b\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"index.html\">&lt;div class=\"box\"&gt;\u30db\u30d0\u30fc\u3092\u3059\u308b\u3068\u56de\u8ee2&lt;\/div&gt;<\/pre>\n<pre class=\"lang:css mark:14 decode:true\" title=\"style.css\">body{\r\n  margin: 100px 0 0 100px;\r\n}\r\n\r\n.box {\r\n  text-align: center;\r\n  width: 200px;\r\n  line-height: 200px;\r\n  background-color: aquamarine;\r\n  transition: 1.0s;\r\n}\r\n\r\n.box:hover {\r\n  transform: rotate(360deg);\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36759\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/rotate-sample.gif\" alt=\"\u30de\u30a6\u30b9\u30db\u30d0\u30fc\u6642\u306b\u8981\u7d20\u3092360\u2103\u56de\u8ee2\u3055\u305b\u3066\u3044\u308b\u4f8b\" width=\"2000\" height=\"1333\" \/><\/span><\/p>\n<p>\u4e0a\u306e\u4f8b\u3067\u306f<span class=\"huto\">\u300c360deg\u300d\u3068\u6307\u5b9a\u3059\u308b\u3068\u30db\u30d0\u30fc\u3092\u3059\u308b\u3068\u53f3\u65b9\u5411(\u6642\u8a08\u56de\u308a)\u306b<\/span>360\u5ea6\u56de\u8ee2\u3057\u3066\u3044\u308b\u3053\u3068\u304c\u5206\u304b\u308a\u307e\u3059\u3002<br \/>\n&nbsp;<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-36767\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/rotate-plus-negative-value.jpg\" alt=\"rotate()\u306e\u5f15\u6570\u306b\u6b63\u306e\u5024\u3001\u8ca0\u306e\u5024\u3092\u6307\u5b9a\u3057\u305f\u5834\u5408\u306e\u56de\u8ee2\u65b9\u5411\u3092\u89e3\u8aac\u3057\u3066\u3044\u308b\u56f3\" width=\"2000\" height=\"1125\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/rotate-plus-negative-value.jpg 2000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/rotate-plus-negative-value-300x169.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/rotate-plus-negative-value-1024x576.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/rotate-plus-negative-value-768x432.jpg 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/rotate-plus-negative-value-1536x864.jpg 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/p>\n<p>\u5b9f\u969b\u306b\u3088\u304f\u898b\u308b\u4f8b\u3067\u306f\u3001\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc\u306e\u4e0a\u4e0b\u306e\u68d2\u309245\u5ea6\u56de\u8ee2\u3055\u305b\u305f\u308a\u3068\u3044\u3063\u305f\u5b9f\u88c5\u304c\u6319\u3052\u3089\u308c\u307e\u3059\u3002<br \/>\n<span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-37587\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/hamburder-menu.gif\" alt=\"\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc\u30b5\u30f3\u30d7\u30eb\" width=\"2000\" height=\"1333\" \/><\/span><br \/>\n&nbsp;<\/p>\n<p>rotate()\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-transform-rotate\/\">\u3010transform:rotate()\u306e\u4f7f\u3044\u65b9\u3011\u8981\u7d20\u3092\u56de\u8ee2\u3055\u305b\u308b\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"transform-translate\">transform:translate()\u3067\u8981\u7d20\u3092xy\u8ef8\u4e0a\u3067\u79fb\u52d5\u3059\u308b\u65b9\u6cd5<\/h3>\n<p>transform:translate()\u3092\u5229\u7528\u3059\u308b\u3068\u3001<strong>\u8981\u7d20\u3092\u6c34\u5e73\u65b9\u5411\u3084\u5782\u76f4\u65b9\u5411\u306b\u79fb\u52d5<\/strong>\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>translate()\u306e1\u3064\u76ee\u306e\u5f15\u6570\u306b\u306fx\u8ef8\u65b9\u5411\u306e\u79fb\u52d5\u8ddd\u96e2, 2\u3064\u76ee\u306e\u5f15\u6570\u306b\u306fy\u8ef8\u65b9\u5411\u306e\u79fb\u52d5\u8ddd\u96e2\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<br \/>\n<span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36577\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/translate-function.png\" alt=\"translate\u95a2\u6570\u3067\u306f\u7b2c\u4e00\u5f15\u6570\u306b\u300cx\u8ef8\u65b9\u5411\u306e\u8ddd\u96e2\u300d\u3001\u7b2c\u4e8c\u5f15\u6570\u306b\u300cy\u8ef8\u65b9\u5411\u306e\u8ddd\u96e2\u300d\u3092\u6307\u5b9a\u3059\u308b\" width=\"1000\" height=\"150\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/translate-function.png 1000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/translate-function-300x45.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/translate-function-768x115.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/span><\/p>\n<p>translate\u3067\u8a2d\u5b9a\u3059\u308b\u8ddd\u96e2\u306e\u5358\u4f4d\u306b\u306f\u7d76\u5bfe\u5024(px)\u3084\u76f8\u5bfe\u5024(%\u306a\u3069)\u304c\u4f7f\u7528\u53ef\u80fd\u3067\u3059\u3002\u300c%\u300d\u306f\u81ea\u5206\u81ea\u8eab\u306e\u8981\u7d20\u306e\u6a2a\u5e45\u30fb\u9ad8\u3055\u3092\u57fa\u6e96\u3068\u3057\u3066\u76f8\u5bfe\u5024\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \" title=\"index.html\">&lt;div class=\"box\"&gt;&lt;\/div&gt;<\/pre>\n<pre class=\"lang:css mark:13 decode:true\" title=\"style.css\">body{\r\n  margin: 100px 0 0 100px;\r\n}\r\n\r\n.box {\r\n  width: 100px;\r\n  height: 100px;\r\n  background-color: aquamarine;\r\n  transition: 0.5s;\r\n}\r\n\r\n.box:hover {\r\n  transform: translate(50px, 50px);\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36578\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/translate-plus-value-sample.gif\" alt=\" transform: translate(50px, 50px);\u306e\u4f7f\u7528\u30c7\u30e2\" width=\"2000\" height=\"1333\" \/><\/span><\/p>\n<p>\u306a\u304a\u3001translate\u306e\u5024\u306b\u306f\u8ca0\u306e\u5024\u3082\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306btranslate\u306e\u5f15\u6570\u3092\u8ca0\u306e\u5024\u306b\u5909\u66f4\u3057\u3066\u3042\u3052\u308b\u3068\u9006\u65b9\u5411\u306b\u8981\u7d20\u3092\u79fb\u52d5\u3055\u305b\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<p><span class=\"photoline\"><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/translate-vertical-horizontal-center-demo-step2-img1.png\" alt=\"translate\u3092\u4f7f\u3063\u3066\u8981\u7d20\u306e\u5927\u304d\u3055\u306e\u534a\u5206\u3092\u5de6\u4e0a\u65b9\u5411\u306b\u623b\u3059\" width=\"1788\" height=\"1362\" class=\"alignnone size-full wp-image-37186\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/translate-vertical-horizontal-center-demo-step2-img1.png 1788w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/translate-vertical-horizontal-center-demo-step2-img1-300x229.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/translate-vertical-horizontal-center-demo-step2-img1-1024x780.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/translate-vertical-horizontal-center-demo-step2-img1-768x585.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/translate-vertical-horizontal-center-demo-step2-img1-1536x1170.png 1536w\" sizes=\"(max-width: 1788px) 100vw, 1788px\" \/><\/span><\/p>\n<p>translate()\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-transform-translate\/\">\u3010transform:translate()\u306e\u4f7f\u3044\u65b9\u3011xy\u8ef8\u4e0a\u306e\u79fb\u52d5\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"transform-scale\">transform:scale()\u3067\u8981\u7d20\u3092\u62e1\u5927\u30fb\u7e2e\u5c0f\u3059\u308b\u65b9\u6cd5<\/h3>\n<p>transform:scale()\u3092\u5229\u7528\u3059\u308b\u3068\u3001<strong>\u8981\u7d20\u3092x\u8ef8\u3001y\u8ef8\u65b9\u5411\u306b\u62e1\u5927\u30fb\u7e2e\u5c0f\u3055\u305b\u308b<\/strong>\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u5f15\u6570\u30922\u3064\u53d6\u308b\u3053\u3068\u304c\u3067\u304d\u30011\u3064\u76ee\u306e\u5024\u306b\u306fx\u8ef8\u65b9\u5411\u30012\u3064\u76ee\u306e\u5024\u306b\u306fy\u8ef8\u65b9\u5411\u3078\u306e\u62e1\u5927\u30fb\u7e2e\u5c0f\u7387\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-36832\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale.png\" alt=\"transform: scale()\u306e\u6307\u5b9a\u65b9\u6cd5\" width=\"1500\" height=\"227\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale.png 1500w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale-300x45.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale-1024x155.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale-768x116.png 768w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<div class=\"graybox\">\n<strong>\u25a0transform: scale()\u306e\u6307\u5b9a\u4f8b<\/strong><\/p>\n<ul>\n<li>transform: scale(1.2, 1.2) \u30fb\u30fb\u30fb \u8981\u7d20\u3092x\u8ef8\u65b9\u5411\u3001y\u8ef8\u65b9\u5411\u306b1.2\u500d\u62e1\u5927\u3059\u308b<\/li>\n<li>transform: scale(0.5, 1.5) \u30fb\u30fb\u30fb \u8981\u7d20\u3092x\u8ef8\u65b9\u5411\u306b0.5\u500d\u7e2e\u5c0f\u3001y\u8ef8\u65b9\u5411\u306b1.5\u500d\u62e1\u5927\u3059\u308b<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"index.html\">&lt;a class=\"button\" href=\"#\"&gt;\u8a73\u3057\u304f\u306f\u3053\u3061\u3089&lt;\/a&gt;<\/pre>\n<pre class=\"lang:css mark:17 decode:true\" title=\"style.css\">body {\r\n  margin: 100px 0 0 100px;\r\n}\r\n\r\n.button {\r\n  text-decoration: none;\r\n  display: block;\r\n  width: 300px;\r\n  padding: 20px 0;\r\n  text-align: center;\r\n  background-color: rgb(253, 25, 0);\r\n  color: #fff;\r\n  transition: 0.5s;\r\n}\r\n\r\n.button:hover {\r\n  transform: scale(1.3, 1.3);\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36826\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale-sample.gif\" alt=\"\u5b9f\u969b\u306bscale\u95a2\u6570\u3092\u4f7f\u3063\u305f\u4f8b\" width=\"2000\" height=\"1333\" \/><\/span><\/p>\n<p>\u4e0a\u306e\u4f8b\u3067\u306f\u30db\u30d0\u30fc\u6642\u306e\u307f\u300cscale(1.3, 1.3)\u30681\u3088\u308a\u5927\u304d\u306a\u6570\u5024\u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u70ba\u3001\u30dc\u30bf\u30f3\u304c\u62e1\u5927\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36835\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale-1.3-expansion.jpg\" alt=\"\u30dc\u30bf\u30f3\u304c\u30db\u30d0\u30fc\u6642\u306e\u307fx\u8ef8\u3001y\u8ef8\u65b9\u5411\u306b1.3\u500d\u62e1\u5927\u3055\u308c\u3066\u3044\u308b\" width=\"2000\" height=\"1125\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale-1.3-expansion.jpg 2000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale-1.3-expansion-300x169.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale-1.3-expansion-1024x576.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale-1.3-expansion-768x432.jpg 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale-1.3-expansion-1536x864.jpg 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/p>\n<p>\u306a\u304a\u30dc\u30bf\u30f3\u3092\u7e2e\u5c0f\u3055\u305b\u305f\u3044\u5834\u5408\u306f\u3001\u300c0~1\u300d\u306e\u9593\u306e\u5c11\u6570\u3092\u6307\u5b9a\u3059\u308c\u3070OK\u3067\u3059\u3002<\/p>\n<pre class=\"lang:css mark:4 decode:true\" title=\"style.css\">\/* \u7701\u7565 *\/\r\n\r\n.button:hover {\r\n  transform: scale(0.5, 0.5);\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36836\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-scale-shrink-sample.gif\" alt=\"scale()\u306b0~1\u306e\u9593\u306e\u5c11\u6570\u3092\u6307\u5b9a\u3057\u3066\u8981\u7d20\u3092\u7e2e\u5c0f\u3057\u3066\u3044\u308b\u4f8b\" width=\"2000\" height=\"1333\" \/><\/span><\/p>\n<p>scale()\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-transform-scale\/\">\u3010transform:scale()\u306e\u4f7f\u3044\u65b9\u3011\u8981\u7d20\u306e\u62e1\u5927\u30fb\u7e2e\u5c0f\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h3 id=\"transform-skew\">transform:skew()\u3067\u8981\u7d20\u306b\u50be\u659c\u3092\u3064\u3051\u308b\u65b9\u6cd5<\/h3>\n<p>transform:skew()\u3092\u5229\u7528\u3059\u308b\u3068\u3001<strong>\u8981\u7d20\u306b\u50be\u659c\u3092\u4ed8\u3051\u308b(\u5909\u5f62)<\/strong>\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>skew()\u306e1\u3064\u76ee\u306e\u5f15\u6570\u306b\u306fx\u8ef8\u65b9\u5411\u30012\u3064\u76ee\u306e\u5f15\u6570\u306b\u306fy\u8ef8\u65b9\u5411\u306e\u50be\u659c\u89d2\u5ea6\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<br \/>\n<span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36888\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew.png\" alt=\"transform: skew()\u306e\u6307\u5b9a\u65b9\u6cd5\" width=\"2000\" height=\"286\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew.png 2000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-300x43.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-1024x146.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-768x110.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-1536x220.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/span><\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"index.html\">&lt;img src=\"cat.jpg\" alt=\"\"&gt;<\/pre>\n<pre class=\"lang:css mark:6 decode:true\" title=\"style.css\">body {\r\n  margin: 100px 0 0 100px;\r\n}\r\n\r\nimg{\r\n  transform: skew(20deg,0deg);\r\n}<\/pre>\n<p>\u4e0a\u306e\u4f8b\u3067\u306fx\u8ef8\u65b9\u5411\u306b\u306e\u307f\u50be\u659c\u89d2\u5ea6\u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u7e26\u306e\u30b5\u30a4\u30ba\u306f\u56fa\u5b9a\u3055\u308c\u3001x\u8ef8\u65b9\u5411\u306b\u306e\u307f\u50be\u659c\u304c\u4ed8\u3044\u3066\u3044\u308b\u3053\u3068\u304c\u5206\u304b\u308a\u307e\u3059\u3002<\/p>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36904\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-only-x.jpg\" alt=\"x\u8ef8\u65b9\u5411\u306b\u306e\u307f\u50be\u659c\u89d2\u5ea6\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u7e26\u306e\u30b5\u30a4\u30ba\u306f\u56fa\u5b9a\u3055\u308c\u3001x\u8ef8\u65b9\u5411\u306b\u306e\u307f\u50be\u659c\u3092\u4ed8\u3051\u308b\u3053\u3068\u304c\u53ef\u80fd\u3002\" width=\"1500\" height=\"1083\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-only-x.jpg 1500w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-only-x-300x217.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-only-x-1024x739.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-only-x-768x554.jpg 768w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/span><\/p>\n<p>\u307e\u305f\u3001\u6a2a\u306e\u30b5\u30a4\u30ba\u306f\u56fa\u5b9a\u3055\u305b\u3066y\u8ef8\u65b9\u5411\u306b\u306e\u307f\u50be\u659c\u3092\u4ed8\u3051\u305f\u3044\u5834\u5408\u306f\u3001\u7b2c\u4e00\u5f15\u6570\u3092\u300c0\u300d\u3068\u3057\u3001\u7b2c\u4e8c\u5f15\u6570\u306b\u4efb\u610f\u306e\u89d2\u5ea6\u3092\u6307\u5b9a\u3057\u3066\u3042\u3052\u308c\u3070OK\u3002<\/p>\n<pre class=\"lang:css mark:2 decode:true \" title=\"style.css\">img{\r\n  transform: skew(0deg,20deg);\r\n}<\/pre>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36905\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-only-y.jpg\" alt=\"y\u8ef8\u65b9\u5411\u306b\u306e\u307f\u50be\u659c\u89d2\u5ea6\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u6a2a\u306e\u30b5\u30a4\u30ba\u306f\u56fa\u5b9a\u3055\u308c\u3001y\u8ef8\u65b9\u5411\u306b\u306e\u307f\u50be\u659c\u3092\u4ed8\u3051\u308b\u3053\u3068\u304c\u53ef\u80fd\u3002\" width=\"1500\" height=\"1014\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-only-y.jpg 1500w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-only-y-300x203.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-only-y-1024x692.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/transform-skew-only-y-768x519.jpg 768w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/span><\/p>\n<p>skew()\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-transform-skew\/\">\u3010transform:skew()\u306e\u4f7f\u3044\u65b9\u3011\u8981\u7d20\u306b\u50be\u659c\u3092\u3064\u3051\u308b\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n<h2 id=\"object-fit\">\u753b\u50cf\u306e\u30c8\u30ea\u30df\u30f3\u30b0\u8a2d\u5b9a\u3000object-fit<\/h2>\n<p>object-fit\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001<strong>\u753b\u50cf\u3092\u30c8\u30ea\u30df\u30f3\u30b0\u3059\u308b\u4e8b\u304c\u3067\u304d\u308bCSS<\/strong>\u3067\u3059\u3002<\/p>\n<p>\u901a\u5e38\u3001\u7e26\u6a2a\u6bd4\u306e\u7570\u306a\u308b\u753b\u50cf\u3092\u6a2a\u4e00\u5217\u306b\u4e26\u3079\u308b\u5834\u5408\u3001\u6a2a\u5e45\u3092\u63c3\u3048\u3066\u8868\u793a\u3055\u305b\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u9ad8\u3055\u304c\u63c3\u308f\u305a\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p><span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36537\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/arrange-images-with-different-aspect-ratios-in-a-horizontal-row.jpg\" alt=\"\u7e26\u6a2a\u6bd4\u7387\u306e\u7570\u306a\u308b\u753b\u50cf\u3092\u6a2a\u4e00\u5217\u306b\u4e26\u3079\u3066\u3044\u308b\u4f8b\" width=\"1499\" height=\"1000\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/arrange-images-with-different-aspect-ratios-in-a-horizontal-row.jpg 1499w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/arrange-images-with-different-aspect-ratios-in-a-horizontal-row-300x200.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/arrange-images-with-different-aspect-ratios-in-a-horizontal-row-1024x683.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/arrange-images-with-different-aspect-ratios-in-a-horizontal-row-768x512.jpg 768w\" sizes=\"(max-width: 1499px) 100vw, 1499px\" \/><\/span><\/p>\n<p>\u9ad8\u3055\u3092\u63c3\u3048\u305f\u3044\u5834\u5408\u306f\u753b\u50cf\u306e\u7e26\u6a2a\u6bd4\u3092\u63c3\u3048\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u304c\u3001object-fit\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3059\u308c\u3070CSS\u3060\u3051\u3067\u7c21\u5358\u306b\u30c8\u30ea\u30df\u30f3\u30b0\u3092\u3057\u3001\u9ad8\u3055\u3092\u63c3\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n<span class=\"photoline\"><img decoding=\"async\" class=\"alignnone size-full wp-image-36539\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/arrange-images-with-different-aspect-ratios-in-a-horizontal-row-trimming.png\" alt=\"\u7e26\u6a2a\u6bd4\u7387\u306e\u7570\u306a\u308b\u753b\u50cf\u3092\u30c8\u30ea\u30df\u30f3\u30b0\u3092\u3057\u3066\u6a2a\u4e00\u5217\u306b\u4e26\u3079\u3066\u3044\u308b\u4f8b\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/arrange-images-with-different-aspect-ratios-in-a-horizontal-row-trimming.png 1500w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/arrange-images-with-different-aspect-ratios-in-a-horizontal-row-trimming-300x200.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/arrange-images-with-different-aspect-ratios-in-a-horizontal-row-trimming-1024x683.png 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/06\/arrange-images-with-different-aspect-ratios-in-a-horizontal-row-trimming-768x512.png 768w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/span><\/p>\n<p>object-fit\u3092\u4f7f\u3063\u3066\u753b\u50cf\u3092\u30c8\u30ea\u30df\u30f3\u30b0\u3059\u308b\u306b\u306f\u3001\u4ee5\u4e0b\u306e2\u3064\u306e\u30d7\u30ed\u30bb\u30b9\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<div class=\"graybox\">\n<p><strong>\u25a0object-fit\u3092\u4f7f\u3063\u3066\u753b\u50cf\u3092\u30c8\u30ea\u30df\u30f3\u30b0\u3059\u308b\u65b9\u6cd5<\/strong><\/p>\n<div class=\"maruck\">\n<ul>\n<li>(STEP. 1) \u753b\u50cf\u306b\u5bfe\u3057\u3066\u9ad8\u3055\u3001\u5e45\u3092\u6307\u5b9a\u3057\u3066\u30b3\u30f3\u30c6\u30ca\u3092\u4f5c\u6210\u3059\u308b<\/li>\n<li>(STEP. 2) object-fit\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6307\u5b9a\u3057\u3001\u30b3\u30f3\u30c6\u30ca\u3078\u306e\u306f\u3081\u8fbc\u307f\u65b9\u3092\u6307\u5b9a\u3059\u308b<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>object-fit\u306b\u95a2\u3059\u308b\u8a73\u3057\u3044\u4f7f\u3044\u65b9\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-object-fit\/\">\u3010CSS object-fit\u306e\u4f7f\u3044\u65b9\u3011CSS\u3067\u753b\u50cf\u30c8\u30ea\u30df\u30f3\u30b0\u3059\u308b\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n<h2 id=\"animation\">\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb<\/h2>\n<h3 id=\"transition\">transition\u3067\u5b9f\u88c5\u3059\u308b\u7c21\u5358\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 <\/h3>\n<p>CSS\u306etransition\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5229\u7528\u3059\u308b\u3068\u3001\u3042\u308bHTML\u8981\u7d20\u306e\u72b6\u614b\u306e\u5909\u5316\u3092\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3068\u3057\u3066\u52d5\u4f5c\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p>\u4e0b\u8a18\u306ftransition\u306e\u4f8b\u3067\u3059\u30023\u79d2\u9593\u3067\u3001\u53f3\u306b\u4f38\u3073\u3066\u3044\u3063\u3066\u3001\u8272\u304c\u6c34\u8272\u304b\u3089\u30aa\u30ec\u30f3\u30b8\u8272\u306b\u5909\u5316\u3057\u307e\u3059\u3002\u30ab\u30fc\u30bd\u30eb\u3092\u5916\u3059\u3068(\u30b9\u30de\u30db\u306e\u65b9\u306f\u5225\u306e\u3068\u3053\u308d\u306b\u30bf\u30c3\u30c1\u3059\u308b\u3068)\u3001\u5143\u306b\u623b\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u25a0\u4f8b)\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc(hover)\u3057\u305f\u3068\u304d\u306bwidth\u3068background\u3092\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3059\u308b<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/06\/transition-sample-bar_AdobeExpress.gif\" alt=\"transition\u3067\u30d0\u30fc\u304c\u4f38\u3073\u3066\u30aa\u30ec\u30f3\u30b8\u8272\u306b\u306a\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\" width=\"735\" height=\"132\" class=\"alignnone size-full wp-image-42300\" \/><br \/>\n&nbsp;<\/p>\n<p>\u25a0\u4e0a\u8a18\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/p>\n<pre class=\"lang:default decode:true \" >.tra-sample{ \r\n    width:10%;\r\n    height:50px;\r\n    background-color: aqua;\r\n    transition:all 3s ease-out;\r\n }\r\n\r\n.tra-sample:hover{ \r\n    width:80%;\r\n    background-color: orange;\r\n}<\/pre>\n<pre class=\"lang:default decode:true \" >&lt;body&gt;\r\n  &lt;div class=\"tra-sample\"&gt;&lt;\/div&gt;\r\n&lt;\/body&gt;<\/pre>\n<p>&nbsp;<br \/>\ntransition\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001<strong>\u300ctransition: \u5909\u5316\u306e\u5bfe\u8c61 \u5909\u5316\u306e\u6642\u9593 \u5909\u5316\u306e\u4ed5\u65b9 (\u9806\u4e0d\u540c)<\/strong>\u300d\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u52a0\u3048\u3066\u3001\u5909\u5316\u306e\u7d42\u308f\u308a\u306e\u72b6\u614b\u3068\u306a\u308b\u300c:hover\u300d\u306a\u3069\u306e\u64ec\u4f3c\u30af\u30e9\u30b9\u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u5229\u7528\u3059\u308b\u3068\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u767a\u751f\u3057\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/06\/transition-basic-howto.png\" alt=\"CSS \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 transition\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u8aac\u660e\" width=\"1000\" height=\"750\" class=\"alignnone size-full wp-image-5212\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/06\/transition-basic-howto.png 1000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/06\/transition-basic-howto-300x225.png 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/06\/transition-basic-howto-768x576.png 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/06\/transition-basic-howto-718x539.png 718w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><br \/>\n&nbsp;<\/p>\n<p>transition\u3092\u5229\u7528\u3059\u308b\u3068\u3001\u305f\u3068\u3048\u3070\u3001\u30e1\u30cb\u30e5\u30fc\u30d0\u30fc\u306e\u5404\u9805\u76ee\u306b\u5bfe\u3057\u3066\u3086\u3063\u304f\u308a\u9077\u79fb\u3055\u305b\u308b\u306a\u3069\u3001\u8272\u3005\u306a\u3068\u3053\u308d\u3067\u304a\u624b\u8efd\u306b\u4f7f\u3048\u3066\u4fbf\u5229\u3067\u3059\u3002<br \/>\n<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2018\/06\/transition-sample.gif\" alt=\"CSS transition\u306e\u30b5\u30f3\u30d7\u30eb\" width=\"550\" height=\"82\" class=\"alignnone size-full wp-image-42298\" \/><br \/>\n&nbsp;<\/p>\n<p>tansition\u306b\u95a2\u3059\u308b\u8a73\u7d30\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-transition\/\">\u3010CSS transition\u3011transition\u306e\u4f7f\u3044\u65b9\u30fb\u7c21\u5358\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"keyframes-animation\">keyframes\u3068animation\u3067\u5b9f\u88c5\u3059\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/h3>\n<p>CSS\u306ekeyframes\u3068animation\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5229\u7528\u3059\u308b\u3068\u3001transition\u3088\u308a\u3082\u3088\u308a\u8907\u96d1\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>keyframes\u3067\u306f\u300c<strong>\u3069\u3046\u3044\u3063\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5909\u5316\u3092\u3055\u305b\u305f\u3044\u304b<\/strong>\u300d\u3092\u8a2d\u5b9a\u3057\u3001animation\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3063\u3066\u300c<strong>\u305d\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u52d5\u4f5c\u306b\u304b\u304b\u308b\u6642\u9593\u3084\u56de\u6570\u306a\u3069<\/strong>\u300d\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"index.html\">&lt;div class=\"box\"&gt;&lt;\/div&gt;<\/pre>\n<pre class=\"lang:css mark:1,15 decode:true\" title=\"style.css\">@keyframes fadein {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n\r\n  100% {\r\n    opacity: 1.0;\r\n  }\r\n}\r\n\r\n.box {\r\n  width: 200px;\r\n  height: 200px;\r\n  background-color: aquamarine;\r\n  animation: fadein 3.0s;\r\n}<\/pre>\n<div style=\"width: 920px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-132-5\" width=\"920\" height=\"613\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation-sample.mp4?_=5\" \/><a href=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation-sample.mp4\">https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation-sample.mp4<\/a><\/video><\/div>\n<p>&nbsp;<\/p>\n<p><div class=\"sb-type-drop\">\n\t<div class=\"sb-subtype-a\">\n\t\t<div class=\"sb-speaker\">\n\t\t\t<div class=\"sb-icon\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/plugins\/speech-bubble\/img\/keisuke.jpg\" class=\"sb-icon\">\n\t\t\t<\/div>\n\t\t\t<div class=\"sb-name\"><\/div>\n\t\t<\/div>\n\t\t<div class=\"sb-content\">\n\t\t\t<div class=\"sb-speech-bubble\">\u4e0a\u306e\u4f8b\u3067\u306f\u3001keyframes\u3092\u4f7f\u3063\u3066\u300c\u4e0d\u900f\u660e\u5ea6\u304c0\u306e\u72b6\u614b\u304b\u30891.0\u306e\u72b6\u614b\u306b\u5909\u5316\u3055\u305b\u308b\u300d\u3068\u3044\u3046\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u52d5\u4f5c\u3092\u3001animation\u3092\u4f7f\u3063\u30663.0\u79d2\u9593\u306e\u3046\u3061\u306b\u884c\u3046\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div><br \/>\n&nbsp;<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-37016\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation.jpg\" alt=\"keyframes\u3068animation\u306e\u5f79\u5272\u3092\u89e3\u8aac\u3057\u305f\u56f3\" width=\"2000\" height=\"1125\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation.jpg 2000w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation-300x169.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation-1024x576.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation-768x432.jpg 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation-1536x864.jpg 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><br \/>\n&nbsp;<\/p>\n<table>\n<tbody>\n<tr>\n<th style=\"width: 30%\">keyframes<\/th>\n<td style=\"width: 70%\">\u3069\u306e\u3088\u3046\u306b\u5909\u5316\u3055\u305b\u308b\u304b\u3068\u3044\u3063\u305f\u300c\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u52d5\u4f5c\u300d\u3092\u8a2d\u5b9a\u3059\u308b<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 30%\">animation\u30d7\u30ed\u30d1\u30c6\u30a3<\/th>\n<td style=\"width: 70%\">\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u52d5\u4f5c\u306b\u304b\u304b\u308b\u6642\u9593\u3084\u56de\u6570\u306a\u3069\u3092\u8a2d\u5b9a\u3059\u308b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>keyframes\u3068animation\u3092\u5229\u7528\u3059\u308b\u3068\u3001transition\u3088\u308a\u3082\u8907\u96d1\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092CSS\u3060\u3051\u3067\u5b9f\u73fe\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n<div style=\"width: 920px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-132-6\" width=\"920\" height=\"613\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation-demo-kansei.mp4?_=6\" \/><a href=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation-demo-kansei.mp4\">https:\/\/webst8.com\/code\/wp-content\/uploads\/2022\/07\/keyframes-animation-demo-kansei.mp4<\/a><\/video><\/div><br \/>\n&nbsp;<\/p>\n<p>keyframes\u3068animation\u306e\u4f7f\u3044\u65b9\u8a73\u7d30\u306f\u300c<a href=\"https:\/\/webst8.com\/code\/css-keyframes-animation\/\">\u3010keyframes animation\u3011CSS\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3059\u308b\u65b9\u6cd5<\/a>\u300d\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h2 id=\"float\">\u6a2a\u4e26\u3073(\u6d6e\u52d5)\u306b\u95a2\u3059\u308b\u30b9\u30bf\u30a4\u30eb float<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/09\/css-float-left.png\" alt=\"float:left\u3092\u5229\u7528\u3057\u3066div1\u3001div2\u3001div3\u304c\u5de6\u304b\u3089\u9806\u306b\u6a2a\u4e26\u3073\u306b\u3059\u308b\" width=\"696\" height=\"462\" class=\"size-full wp-image-1698\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/09\/css-float-left.png 696w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/09\/css-float-left-300x200.png 300w\" sizes=\"(max-width: 696px) 100vw, 696px\" \/><br \/>\n&nbsp;<\/p>\n<p>div\u30bf\u30b0\u306a\u3069\u306e\u30d6\u30ed\u30c3\u30af\u30ec\u30d9\u30eb\u8981\u7d20\u306f\u57fa\u672c\u7684\u306b\u4e0a\u304b\u3089\u4e0b\u306b\u5411\u304b\u3063\u3066\u9806\u756a\u306b\u7e26\u306b\u4e26\u3093\u3067\u8868\u793a\u3055\u308c\u307e\u3059\u304c\u3001\u3053\u308c\u3092\u5de6\u307e\u305f\u306f\u53f3\u306b\u5bc4\u305b\u3066\u6a2a\u4e26\u3073\u3067\u914d\u7f6e\u3057\u305f\u3044\u5834\u5408\u306f\u3001\u300cfloat\u300d\u3092\u5229\u7528\u3057\u3066\u6a2a\u4e26\u3073\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><div class=\"sb-type-drop\">\n\t<div class=\"sb-subtype-a\">\n\t\t<div class=\"sb-speaker\">\n\t\t\t<div class=\"sb-icon\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/plugins\/speech-bubble\/img\/keisuke.jpg\" class=\"sb-icon\">\n\t\t\t<\/div>\n\t\t\t<div class=\"sb-name\"><\/div>\n\t\t<\/div>\n\t\t<div class=\"sb-content\">\n\t\t\t<div class=\"sb-speech-bubble\">\u306a\u304a\u3001\u73fe\u5728float\u306f\u3042\u307e\u308a\u4f7f\u308f\u308c\u306a\u304f\u306a\u3063\u305f\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\uff08\u6a2a\u4e26\u3073\u3057\u305f\u3044\u6642\u306f\u3001\u524d\u8ff0\u306edisplay:flex\u306e\u65b9\u304c\u3088\u304f\u4f7f\u308f\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f)<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div><br \/>\n&nbsp;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/09\/css-float-left.png\" alt=\"float:left\u3092\u5229\u7528\u3057\u3066div1\u3001div2\u3001div3\u304c\u5de6\u304b\u3089\u9806\u306b\u6a2a\u4e26\u3073\u306b\u3059\u308b\" width=\"696\" height=\"462\" class=\"size-full wp-image-1698\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/09\/css-float-left.png 696w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2017\/09\/css-float-left-300x200.png 300w\" sizes=\"(max-width: 696px) 100vw, 696px\" \/><br \/>\n&nbsp;<\/p>\n<p>\u307e\u305f\u3001float\u3068\u30bb\u30c3\u30c8\u3067\u5f8c\u308d\u306e\u8981\u7d20\u306bclear\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5229\u7528\u3057\u307e\u3059\u3002<br \/>\n&nbsp;<\/p>\n<p>float\u3068clear\u306b\u3064\u3044\u3066\u306f\u3001\u3088\u308a\u8a73\u7d30\u306a\u5185\u5bb9\u3092<a href=\"https:\/\/webst8.com\/code\/css-float\/\">CSS\u306efloat\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u8981\u7d20\u3092\u6a2a\u4e26\u3073\u306b\u3059\u308b\u65b9\u6cd5<\/a>\u300d\u306b\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u3053\u3061\u3089\u3082\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<br \/>\n&nbsp;<\/p>\n<h2>\u307e\u3068\u3081<\/h2>\n<p>\u4eca\u56de\u306f\u3001\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u521d\u3081\u3066\u4f5c\u308d\u3046\u3068\u3057\u3066\u3044\u308b\u65b9\u5411\u3051\u306b\u3001CSS\u306e\u66f8\u304d\u65b9\u3068\u307e\u305a\u306f\u3058\u3081\u306b\u899a\u3048\u3066\u304a\u304d\u305f\u3044\u4ee3\u8868\u7684\u306a\u30b9\u30bf\u30a4\u30eb\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>HTML\u306b\u52a0\u3048\u3066CSS\u306e\u4f7f\u3044\u65b9\u3092\u77e5\u3063\u3066\u3044\u308b\u3068\u3001\u3061\u3087\u3063\u3068\u3057\u305f\u30d6\u30ed\u30b0\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3084\u898b\u305f\u76ee\u306e\u8abf\u6574\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u81ea\u5206\u306e\u601d\u3063\u305f\u3088\u3046\u306b\u4f5c\u3063\u3066\u3044\u304f\u3053\u3068\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4eca\u56de\u7d39\u4ecb\u3057\u305f\u3082\u306e\u306f\u3001\u307b\u3093\u306e\u4e00\u90e8\u306b\u306a\u308a\u307e\u3059\u304c\u3001CSS \u4e00\u89a7\u3000\u306a\u3069\u3067\u691c\u7d22\u3059\u308b\u3068\u3001\u307b\u304b\u306b\u3082\u305f\u304f\u3055\u3093\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u30d2\u30c3\u30c8\u3057\u307e\u3059\u3002<\/p>\n<p>\u306a\u304a\u3001\u5b9f\u969b\u306b\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u4e0a\u306b\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u516c\u958b\u3059\u308b\u306b\u306f\u30c9\u30e1\u30a4\u30f3\u3068\u30ec\u30f3\u30bf\u30eb\u30b5\u30fc\u30d0\u30fc\u3092\u501f\u308a\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306e\u4f5c\u308a\u65b9\u306b\u3064\u3044\u3066\u306f\u300c<a href=\"https:\/\/webst8.com\/blog\/homepage-open-process\/\">\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306e\u4f5c\u308a\u65b9\u30fb\u500b\u4ebaWeb\u30b5\u30a4\u30c8\u306e\u81ea\u4f5c\u65b9\u6cd5\u3010\u7dcf\u307e\u3068\u3081\u7248\u3011<\/a>\u300d\u3092\u3042\u308f\u305b\u3066\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<\/p>\n<p><div class=\"flex-pc\">\n<div class=\"content-wrap\">\n\u25a0\u6e96\u5099\u30fb\u30a8\u30c7\u30a3\u30bf\u30fc\u7de8<br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/vscode-install\/\">Visual Studio Code\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/vscode-recommend-plugins\/\">VSCode\u306e\u304a\u3059\u3059\u3081\u30d7\u30e9\u30b0\u30a4\u30f3<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/vscode-emmet\/\">Emmet\u306e\u66f8\u304d\u65b9<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/vscode-file-create\/\">VSCode\u3067HTML\u30fbCSS\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5<\/a>\n<\/div>\n<div class=\"content-wrap\">\n\u25a0\u30ec\u30f3\u30bf\u30eb\u30b5\u30fc\u30d0\u30fc\u30fb\u30c9\u30e1\u30a4\u30f3\u7de8<br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/server\/\">\u304a\u3059\u3059\u3081\u306e\u30b5\u30fc\u30d0\u30fc\u7dcf\u307e\u3068\u3081<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/recommend-corporate-rental-server\/\">\u304a\u3059\u3059\u3081\u6cd5\u4eba\u5411\u3051\u30b5\u30fc\u30d0\u30fc<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/recommend-reasonable-rental-server\/\">\u304a\u3059\u3059\u3081\u683c\u5b89\u30b5\u30fc\u30d0\u30fc<\/a>\n<\/div>\n<\/div>\n<div class=\"flex-pc\">\n<div class=\"content-wrap\">\n\u25a0HTML\u7de8\u57fa\u790e<br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/html-major-basic-tag\/\">(\u307e\u3068\u3081)\u521d\u5fc3\u8005\u5411\u3051HTML\u306e\u57fa\u672c<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/html-a\/\">\u30ea\u30f3\u30af\uff1aa\u30bf\u30b0<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/html-heading\/\">\u898b\u51fa\u3057\uff1ah1\u301ch6<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/html-img\/\">\u753b\u50cf:img<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/html-list\/\">\u30ea\u30b9\u30c8\uff1aul\u30fbol\u30fbli<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/html-dldtdd\/\">\u8aac\u660e\u30ea\u30b9\u30c8\uff1adl\u30fbdt\u30fbdd<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/html-table\/\">\u30c6\u30fc\u30d6\u30eb\u30fb\u8868\uff1atable<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/html-div\/\">\u30b0\u30eb\u30fc\u30d4\u30f3\u30b0:div\/span<\/a>\n<\/div>\n<div class=\"content-wrap\">\n\u25a0CSS\u7de8\u57fa\u790e\u30fb\u30ec\u30a4\u30a2\u30a6\u30c8\u57fa\u672c<br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/html-img\/\">(\u307e\u3068\u3081)CSS\u306e\u57fa\u672c<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-howto-write\/\">CSS\u306e\u66f8\u304d\u65b9<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-width-height\/\">\u6a2a\u5e45\u3068\u9ad8\u3055:width\/height<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-margin\/\">\u5916\u90e8\u4f59\u767d:margin<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-padding\/\">\u5185\u90e8\u4f59\u767d:padding<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-border\/\">\u67a0\u7dda:border<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-display\/\">\u30a4\u30f3\u30e9\u30a4\u30f3\u30fb\u30d6\u30ed\u30c3\u30af\uff1adisplay<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-box-sizing\/\">\u6a2a\u5e45\u9ad8\u3055\u306e\u7b97\u51fa\u65b9\u6cd5:box-sizing<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-flex\/\">\u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9 display:flex<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-display-grid\/\">\u30b0\u30ea\u30c3\u30c9\u30ec\u30a4\u30a2\u30a6\u30c8 display:grid<\/a>\n<\/div>\n<\/div>\n<div class=\"flex-pc\">\n<div class=\"content-wrap\">\n\u25a0CSS\u30d5\u30a9\u30f3\u30c8\u30fb\u6587\u5b57\u88c5\u98fe<br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-color\/\">\u6587\u5b57\u8272:color<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-font-size\/\">\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba:font-size<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-font-weight\/\">\u30d5\u30a9\u30f3\u30c8\u306e\u592a\u3055:font-weight<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-font-family\/\">\u30d5\u30a9\u30f3\u30c8\u306e\u5b57\u4f53:font-family<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-text-align\/\">\u884c\u63c3\u3048:text-align<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-letter-spacing\/\">\u6587\u5b57\u306e\u9593\u9694:letter-spacing<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-text-decoration\/\">\u30c6\u30ad\u30b9\u30c8\u88c5\u98fe:text-decoration<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-text-shadow\/\">\u30c6\u30ad\u30b9\u30c8\u306e\u5f71:text-shadow<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-line-height\/\">\u884c\u9593:line-height<\/a>\n<\/div>\n<div class=\"content-wrap\">\n\u25a0CSS\u30ec\u30a4\u30a2\u30a6\u30c82<br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-position\/\">\u4f4d\u7f6e\u6307\u5b9a:position<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-float\/\">\u6a2a\u4e26\u3073:float<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-overflow\/\">\u8981\u7d20\u306e\u306f\u307f\u51fa\u3057\u8abf\u6574:overflow<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-transform-translate\/\">\u8981\u7d20\u306e\u79fb\u52d5transform:translate<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-transform-rotate\/\">\u8981\u7d20\u306e\u56de\u8ee2transform:rotate<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-transform-scale\/\">\u8981\u7d20\u306e\u62e1\u5927\u30fb\u7e2e\u5c0ftransform:scale<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-transform-skew\/\">\u8981\u7d20\u306e\u5909\u5f62transform:skew<\/a>\n<\/div>\n<\/div>\n<div class=\"flex-pc\">\n<div class=\"content-wrap\">\n\u25a0CSS\u8981\u7d20\u306e\u88c5\u98fe<br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-background\/\">\u80cc\u666f:background<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-box-shadow\/\">\u30dc\u30c3\u30af\u30b9\u306e\u5f71:box-shadow<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-object-fit\/\">\u753b\u50cf\u306e\u30c8\u30ea\u30df\u30f3\u30b0:object-fit<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-transition\/\">\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3:transition<\/a>\n<\/div>\n<div class=\"content-wrap\">\n\u25a0\u305d\u306e\u4ed6<br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-before-after\/\">\u7591\u4f3c\u8981\u7d20:before\/after<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/css-pointer-events\/\">\u30af\u30ea\u30c3\u30af\u7121\u52b9\u5316:pointer-events<\/a><br \/>\n\u30fb<a href=\"https:\/\/webst8.com\/code\/reset-css\/\">\u30ea\u30bb\u30c3\u30c8CSS<\/a>\n<\/div>\n<\/div>\n<br \/>\n&nbsp;<\/p>\n<div class=\"sb-type-drop\">\n\t<div class=\"sb-subtype-a\">\n\t\t<div class=\"sb-speaker\">\n\t\t\t<div class=\"sb-icon\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/plugins\/speech-bubble\/img\/boy-point.jpg\" class=\"sb-icon\">\n\t\t\t<\/div>\n\t\t\t<div class=\"sb-name\"><\/div>\n\t\t<\/div>\n\t\t<div class=\"sb-content\">\n\t\t\t<div class=\"sb-speech-bubble\"><span class=\"font-14\"><strong>\u300c\u696d\u8005\u306b\u4efb\u305b\u305f\u3051\u3069\u3001\u66f4\u65b0\u304c\u3067\u304d\u306a\u3044\u300d\u300c\u672c\u3067\u72ec\u5b66\u306f\u6642\u9593\u304c\u304b\u304b\u308a\u3059\u304e\u308b\u30fb\u30fb\u300d<\/strong>\u305d\u3093\u306a\u304a\u60a9\u307f\u306e\u65b9\u3082\u591a\u3044\u306e\u3067\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u304b\u3002<\/span><\/p>\n<p><span class=\"font-14\"><strong>\u500b\u5225\u6307\u5c0e\u5f62\u5f0f\u306e\u30b9\u30af\u30fc\u30eb\u3067\u306f\u3001\u81ea\u5206\u306e\u77e5\u308a\u305f\u3044\u3053\u3068\u3092\u30d4\u30f3\u30dd\u30a4\u30f3\u30c8\u3067\u5b66\u7fd2\u30fb\u9054\u6210\u3067\u304d\u3001\u81ea\u5206\u3067\u66f4\u65b0\u3082\u3067\u304d\u308b\u3068\u3044\u3046\u30e1\u30ea\u30c3\u30c8<\/strong>\u3082\u3042\u308a\u307e\u3059\u3002<\/span><\/p>\n<p><span class=\"font-14\">\u6559\u5ba4\u306e\u7121\u6599\u4e8b\u524d\u76f8\u8ac7\u3082\u3057\u3066\u304a\u308a\u307e\u3059\u306e\u3067\u3001\u307e\u305a\u306f\u304a\u6c17\u8efd\u306b\u3054\u767b\u9332\u304f\u3060\u3055\u3044\u3002 <\/span><\/p>\n<p class=\"text-center\"><a href=\"https:\/\/webst8.com\/\" class=\"webst8-banar-2 btn btn-success btn-lg\">\u8a73\u7d30\u306f\u3053\u3061\u3089<\/a><\/p>\n<p><\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<h2>YouTube\u30c1\u30e3\u30f3\u30cd\u30eb\u958b\u8a2d\u3057\u307e\u3057\u305f\uff01<\/h2>\n<p><a href=\"https:\/\/www.youtube.com\/channel\/UCYIqpw7ZJFgMGMSLhWq83Fg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/05\/webst8-youtube-channel.jpg\" alt=\"WEBST8\u3000YouTube Channel\u3000\u958b\u8a2d\" width=\"2428\" height=\"1104\" class=\"alignnone size-full wp-image-24529\" srcset=\"https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/05\/webst8-youtube-channel.jpg 2428w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/05\/webst8-youtube-channel-300x136.jpg 300w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/05\/webst8-youtube-channel-1024x466.jpg 1024w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/05\/webst8-youtube-channel-768x349.jpg 768w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/05\/webst8-youtube-channel-1536x698.jpg 1536w, https:\/\/webst8.com\/code\/wp-content\/uploads\/2021\/05\/webst8-youtube-channel-2048x931.jpg 2048w\" sizes=\"(max-width: 2428px) 100vw, 2428px\" \/><\/a><br \/>\n\u6700\u5927\u6708\u959350\u4e07PV\u306e\u5f53\u30d6\u30ed\u30b0\u3092\u30d9\u30fc\u30b9\u306b\u3001Youtube\u52d5\u753b\u914d\u4fe1\u306b\u3066WordPress\u3001\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u4f5c\u6210\u3001\u30d6\u30ed\u30b0\u306e\u3053\u3068\u306b\u3064\u3044\u3066\u304a\u5f79\u7acb\u3061\u60c5\u5831\u3092\u968f\u6642\u914d\u4fe1\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u3054\u8208\u5473\u3042\u308b\u65b9\u306f\u305c\u3072\u30c1\u30e3\u30f3\u30cd\u30eb\u767b\u9332\u3092\u3057\u3066\u3044\u305f\u3060\u3051\u307e\u3059\u3068\u5e78\u3044\u3067\u3059\u3002<\/p>\n<div class=\"rankstlink-r2\">\n<p><a href=\"https:\/\/www.youtube.com\/channel\/UCYIqpw7ZJFgMGMSLhWq83Fg\" target=\"_blank\" rel=\"noopener\">YouTube\u30c1\u30e3\u30f3\u30cd\u30eb\u306f\u3053\u3061\u3089<\/a><\/p>\n<\/div>\n\n<p>\u4eca\u56de\u306f\u4ee5\u4e0a\u306b\u306a\u308a\u307e\u3059\u3002\u6700\u5f8c\u307e\u3067\u3054\u89a7\u3044\u305f\u3060\u304d\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\u3002<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4eca\u56de\u306f\u3001\u3053\u308c\u304b\u3089\u81ea\u5206\u3067\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u4f5c\u6210\u3057\u3088\u3046\u3068CSS\u306e\u52c9\u5f37\u3092\u59cb\u3081\u305f\u521d\u5fc3\u8005\u306e\u65b9\u5411\u3051\u306b\u3001CSS\u306e\u57fa\u672c\u3068\u66f8\u304d\u65b9\u3084\u3088\u304f\u4f7f\u3046\u30d7\u30ed\u30d1\u30c6\u30a3\u4e00\u89a7\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002 \u203bHTML\u3092\u52c9\u5f37\u3057\u305f\u3044\u65b9\u306f\u300c\u3010\u521d\u5fc3\u8005\u5411\u3051\u3011\u77e5\u3063\u3066\u304a\u304d\u305f\u3044 &#8230; <\/p>\n","protected":false},"author":1,"featured_media":42260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[1],"tags":[],"class_list":["post-132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/webst8.com\/code\/wp-json\/wp\/v2\/posts\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webst8.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webst8.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webst8.com\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webst8.com\/code\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":20,"href":"https:\/\/webst8.com\/code\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":67119,"href":"https:\/\/webst8.com\/code\/wp-json\/wp\/v2\/posts\/132\/revisions\/67119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webst8.com\/code\/wp-json\/wp\/v2\/media\/42260"}],"wp:attachment":[{"href":"https:\/\/webst8.com\/code\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webst8.com\/code\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webst8.com\/code\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}