\n| \n \u5c5e\u6027\u540d<\/span><\/p>\n<\/td>\n | \n \u8aac\u660e<\/span><\/p>\n<\/td>\n<\/tr>\n\n| \n id<\/span><\/p>\n<\/td>\n | \n \u30fb\u8981\u7d20\u306b\u540d\u79f0\u3092\u3064\u3051\u3089\u308c\u308b<\/span><\/p>\n\u30fb\u540d\u79f0\u306e\u91cd\u8907\u4f7f\u7528\u306f\u3067\u304d\u306a\u3044\uff081\u3064\u306e\u30da\u30fc\u30b8\u3067\u4f7f\u7528\u306f\u4e00\u5ea6\u306e\u307f\uff09<\/span><\/p>\n<\/td>\n<\/tr>\n\n| \n class<\/span><\/p>\n<\/td>\n | \n \u30fb\u8981\u7d20\u306b\u30b0\u30eb\u30fc\u30d7\u540d\u3092\u4ed8\u4e0e\u3059\u308b<\/span><\/p>\n\u30fb\u8907\u6570\u8981\u7d20\u306b\u540c\u4e00class\u540d\u306e\u4ed8\u4e0e\u304c\u53ef\u80fd<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n <\/p>\n class\u5c5e\u6027\u306f\u4e00\u3064\u306e\u30da\u30fc\u30b8\u5185\u3067\u4f55\u5ea6\u3082\u4f7f\u3048\u307e\u3059\u304c\u3001id\u5c5e\u6027\u306f\u4e00\u3064\u306e\u30da\u30fc\u30b8\u306b\u4e00\u5ea6\u3057\u304b\u4f7f\u3048\u307e\u305b\u3093\u3002<\/span><\/p>\n\u5143\u3005\u306e\u8a9e\u6e90\u3092\u898b\u3066\u307f\u308b\u3068\u3001class\u306f\u300c\u5206\u985e\u30fb\u7a2e\u985e\u300d\u3001id(identity)\u306f\u300c\u500b\u6027\u30fb\u72ec\u81ea\u6027\u300d\u3092\u610f\u5473\u3059\u308b\u3068\u3053\u308d\u304b\u3089\u3082\u3001\u4f7f\u308f\u308c\u65b9\u304c\u7406\u89e3\u3067\u304d\u307e\u3059\u3002<\/span><\/p>\n\u305d\u308c\u305e\u308c\u306e\u8a18\u8ff0\u4f8b\u3092\u4ee5\u4e0b\u306b\u793a\u3057\u307e\u3059\u3002<\/span><\/p>\n\u3010\u8a18\u8ff0\u66f8\u5f0f\uff08class\u5c5e\u6027\uff09\u3011<\/span><\/p>\n\u3000\u8981\u7d20\u540d.\u30af\u30e9\u30b9\u540d {\u30d7\u30ed\u30d1\u30c6\u30a3\u540d:\u5024;}\u3000\u203b\u8981\u7d20\u540d\u306f\u7701\u7565\u53ef<\/span><\/p>\n\u3010\u8a18\u8ff0\u66f8\u5f0f\uff08id\u5c5e\u6027\uff09\u3011<\/span><\/p>\n\u3000\u8981\u7d20\u540d#id\u540d {\u30d7\u30ed\u30d1\u30c6\u30a3\u540d:\u5024;}\u3000\u203b\u8981\u7d20\u540d\u306f\u7701\u7565\u53ef<\/span><\/p>\n\u3010\u8a18\u8ff0\u4f8b\uff08HTML\u5185\u8a18\u8ff0\uff09\u3011<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0<div class =\u201dfish\u201d><\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id =\u201dmaguro\u201d>\u307e\u3050\u308d<\/div><\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id =\u201dsaba\u201d>\u3055\u3070<\/div><\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id =\u201dtai\u201d>\u305f\u3044<\/div><\/span><\/p>\n\u3000<\/div><\/span><\/p>\n <\/p>\n \u3053\u306e\u8a18\u8ff0\u4f8b\u3067\u793a\u3057\u305fclass\u5c5e\u6027\u306e\u201dfish\u201d\u306f\u3001\u30b0\u30eb\u30fc\u30d7\u540d\u3068\u3057\u3066\u8a18\u8ff0\u3057\u3066\u3044\u307e\u3059\u3002<\/span><\/p>\n\u305d\u306e\u5f8c\u306b\u8a18\u8ff0\u3057\u3066\u3044\u308bid\u5c5e\u6027\u306e\u201d\u307e\u3050\u308d\u201d\u3001\u201d\u3055\u3070\u201d\u3001\u201d\u305f\u3044\u201d\u306f\u3001\u9b5a\u985e\u306e\u56fa\u6709\u540d\u79f0\u3092\u793a\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u305d\u308c\u3092id\u3067\u7ba1\u7406\u3057\u3066\u3044\u307e\u3059\u3002<\/span><\/p>\n\u3053\u3053\u306e\u8a18\u8ff0\u3067\u6ce8\u610f\u3059\u3079\u304d\u70b9\u306f\u3001\u4e21\u8005\u306e\u9055\u3044\u3092\u53b3\u5bc6\u306b\u3053\u3060\u308f\u308a\u3059\u304e\u306a\u3044\u3053\u3068\u3067\u3059\u3002<\/span><\/p>\n\u4f8b\u3048\u3070\u3001class\u5c5e\u6027\u3092\u300c\u751f\u7269\u300d\u3068\u8a18\u8ff0\u3057\u305f\u5834\u5408\u3001\u4e0a\u8a18\u3067\u8a18\u8ff0\u3057\u305fclass\u5c5e\u6027\u3067\u3042\u308b\u201dfish\u201d\u304cid\u5c5e\u6027\u3068\u306a\u308a\u3001\u89e3\u91c8\u3092\u5909\u3048\u308b\u3053\u3068\u3067\u4f7f\u3044\u65b9\u304c\u5909\u308f\u308a\u307e\u3059\u3002<\/span><\/p>\n\u3053\u306e\u4e8c\u3064\u306e\u5c5e\u6027\u3092\u4f7f\u3044\u5206\u3051\u306f\u3001\u81ea\u793e\u5185\u3067\u72ec\u81ea\u306e\u57fa\u6e96\u304c\u4f5c\u3089\u308c\u308b\u3053\u3068\u304c\u591a\u304f\u3001\u305d\u308c\u306b\u5f93\u3046\u306e\u304c\u826f\u3044\u3067\u3057\u3087\u3046\u3002<\/span><\/p>\nCSS\u3067div\u30bf\u30b0\u306e\u8981\u7d20\u3092\u914d\u7f6e\u3059\u308b<\/b><\/h3>\n\u4eca\u5ea6\u306fCSS\u3092\u4f7f\u3044\u3001div\u30bf\u30b0\u306e\u8981\u7d20\u306e\u914d\u7f6e\u3092\u5909\u3048\u308b\u8a18\u8ff0\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/span><\/p>\n\u5177\u4f53\u7684\u306a\u5185\u5bb9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/span><\/p>\n\n- div\u30bf\u30b0\u306e\u8981\u7d20\u3092\u5168\u4f53\u7684\u306b\u5de6\u5bc4\u305b\u306b\u3059\u308b<\/span><\/li>\n
- div\u30bf\u30b0\u306e\u8981\u7d20\u3092\u4e2d\u592e\u771f\u4e2d\u306b\u914d\u7f6e\u3059\u308b<\/span><\/li>\n
- div\u30bf\u30b0\u306e\u8981\u7d20\u3092\u5de6\u53f3\u4e2d\u592e\u306b\u914d\u7f6e\u3059\u308b<\/span><\/li>\n
- div\u30bf\u30b0\u306e\u8981\u7d20\u3092\u6a2a\u4e26\u3073\u306b\u3059\u308b<\/span><\/li>\n<\/ul>\n
div\u30bf\u30b0\u306e\u8981\u7d20\u3092\u5168\u4f53\u7684\u306b\u5de6\u5bc4\u305b\u306b\u3059\u308b<\/b><\/h4>\nCSS\u3067\u6b21\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/span><\/p>\n\u3010\u8a18\u8ff0\u4f8b\uff08CSS\u5185\u8a18\u8ff0\uff09\u3011<\/span><\/p>\n <\/p>\n .sample-box {<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0width: 50px;\u3000<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0height: 50px;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0color: #FFF<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0background: #529fff:<\/span><\/p>\n}<\/span><\/p>\n <\/p>\n \u3053\u3053\u3067\u306fdiv\u30bf\u30b0\u3067\u56f2\u3093\u3060\u8981\u7d20\u306e\u5e45\u3068\u9ad8\u3055\u309250px\u306b\u6307\u5b9a\u3057\u3001\u5168\u4f53\u7684\u306b\u5de6\u5bc4\u308a\u306b\u8868\u793a\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/span><\/p>\ndiv\u30bf\u30b0\u306e\u8981\u7d20\u3092\u4e2d\u592e\u771f\u3093\u4e2d\u306b\u914d\u7f6e\u3059\u308b<\/b><\/h4>\nCSS\u3067div\u30bf\u30b0\u306e\u8981\u7d20\u3092\u4e2d\u592e\u771f\u3093\u4e2d\u306b\u914d\u7f6e\u3059\u308b\u5834\u5408\u3001\u6b21\u306e3\u3064\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/span><\/p>\n\n- display: flex<\/span><\/li>\n
- justify-content: center<\/span><\/li>\n
- align-items: center<\/span><\/li>\n<\/ul>\n
\u3053\u306e\u4e09\u3064\u3092\u7528\u3044\u3066CSS\u3067\u8a18\u8ff0\u3059\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/span><\/p>\n\u3010\u8a18\u8ff0\u4f8b\uff08CSS\u5185\u8a18\u8ff0\uff09\u3011<\/span><\/p>\n.sample-box {<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0width: 50px;\u3000<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0height: 50px;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0color: #FFF;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0background: #529fff;<\/span><\/p>\n\u3000margin: 0 auto;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0display: flex;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0justify-content: center;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0align-items: center;<\/span><\/p>\n}<\/span><\/p>\ndiv\u30bf\u30b0\u306e\u8981\u7d20\u3092\u5de6\u53f3\u4e2d\u592e\u306b\u914d\u7f6e\u3059\u308b<\/b><\/h4>\ndiv\u30bf\u30b0\u306e\u8981\u7d20\u3092\u5de6\u53f3\u4e2d\u592e\u306b\u914d\u7f6e\u3057\u305f\u3044\u5834\u5408\u3001\u6b21\u306e2\u3064\u306e\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002<\/span><\/p>\n\n- text-align: center\u3092\u8a18\u8ff0\u3059\u308b<\/span><\/li>\n
- display: flex\u3068justify-content: center\u3092\u8a18\u8ff0\u3059\u308b<\/span><\/li>\n<\/ul>\n
\u307e\u305a\u3001text-align: center\u3092\u8a18\u8ff0\u3059\u308b\u5834\u5408\u3001\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/span><\/p>\n <\/p>\n \u3010text-align: center\u3092\u5229\u7528\u3057\u305f\u8a18\u8ff0\u4f8b\u3011<\/span><\/p>\n.sample-box {<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0width: 50px;\u3000<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0height: 50px;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0color: #FFF;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0background: #529fff;<\/span><\/p>\n\u3000margin: 0 auto;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0text-align: center;<\/span><\/p>\n}<\/span><\/p>\n <\/p>\n div\u30bf\u30b0\u3067\u56f2\u3093\u3060\u8981\u7d20\u306e\u4e2d\u8eab\u304c\u30c6\u30ad\u30b9\u30c8\u3001\u3082\u3057\u304f\u306fdisplay: inline\u3067\u6307\u5b9a\u3057\u305f\u8981\u7d20\u306e\u5834\u5408\u3001CSS\u4e0a\u3067\u300ctext-align: center\u300d\u306e\u8a18\u8ff0\u3067\u8981\u7d20\u3092\u5de6\u53f3\u4e2d\u592e\u5bc4\u305b\u3067\u304d\u307e\u3059\u3002<\/span><\/p>\n\u6b21\u306b\u3001display: flex\u3068justify-content: center\u3092\u7528\u3044\u305f\u8a18\u8ff0\u4f8b\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/span><\/p>\n <\/p>\n .sample-box {<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0width: 50px;\u3000<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0height: 50px;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0color: #FFF;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0background: #529fff;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0display: flex;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0justify-content: center;<\/span><\/p>\n}<\/span><\/p>\n <\/p>\n div\u30bf\u30b0\u3067\u56f2\u3093\u3060\u8981\u7d20\u306b\u5bfe\u3057\u3001display: flex\u3068justify-content: center\u3092\u8a18\u8ff0\u3059\u308b\u3053\u3068\u3067\u3001<\/span><\/p>\n\u5bfe\u8c61\u3068\u306a\u308b\u8981\u7d20\u306b\u304b\u304b\u308f\u3089\u305a\u3001\u5de6\u53f3\u4e2d\u592e\u306b\u5bc4\u305b\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/span><\/p>\ndiv\u30bf\u30b0\u306e\u8981\u7d20\u3092\u6a2a\u4e26\u3073\u306b\u3059\u308b<\/b><\/h4>\n\u4f8b\u3048\u3070\u3001\u6b21\u306e\u3088\u3046\u306adiv\u30bf\u30b0\u306b\u56f2\u307e\u308c\u305f\u8981\u7d20\u306b\u542b\u307e\u308c\u308bclass\u5c5e\u6027\u304c\u3042\u308a\u3001\u3053\u308c\u3089\u3092\u6a2a\u4e26\u3073\u3067\u8868\u793a\u3055\u305b\u305f\u3044\u3068\u3057\u307e\u3059\u3002<\/span><\/p>\n | | |
![\"div\u30bf\u30af\u3099](\"https:\/\/mieru-ca.com\/blog\/wp-content\/uploads\/2023\/08\/d18aac30c14daaea75d843fb504f2821-400x225.jpeg\")
<\/p>\n