Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
frame_source
Python Playground
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html> <head> <title>HTML5, CSS3 and JavaScript demo</title> </head> <body> <!-- imgè¦ç´ ã§ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³ã—ã€ã‚»ãƒ³ã‚¿ãƒªãƒ³ã‚° --> <div class="box"> <p>インラインブãƒãƒƒã‚¯ãƒ¬ãƒ™ãƒ«ã®imgè¦ç´ を横並ã³ã—ã¦ã€ã‚»ãƒ³ã‚¿ãƒªãƒ³ã‚°ã™ã‚‹æ–¹æ³•</p> <img src="https://jp.sputniknews.com/images/220/21/2202129.jpg"> <img src="http://dogs-info.jp/wp-content/uploads/2015/10/%E7%8A%AC%E3%80%80%E5%9C%9F.jpg"> <img src="http://www.dogactually.net/blog/assets_c/2015/06/Canaille02-thumb-500x333-7418.jpg"> </div> <!-- リストを使ã£ã¦æ¨ªä¸¦ã³ã—ã¦ã€ã‚»ãƒ³ã‚¿ãƒªãƒ³ã‚° --> <div class="container"> <p>リストを使ã£ã¦æ¨ªä¸¦ã³ã—ã¦ã€ã‚»ãƒ³ã‚¿ãƒªãƒ³ã‚°ã™ã‚‹æ–¹æ³•</p> <ul> <li><img src="https://jp.sputniknews.com/images/220/21/2202129.jpg"></li> <li><img src="http://dogs-info.jp/wp-content/uploads/2015/10/%E7%8A%AC%E3%80%80%E5%9C%9F.jpg"></li> <li><img src="http://www.dogactually.net/blog/assets_c/2015/06/Canaille02-thumb-500x333-7418.jpg"></li> </ul> </div> </body> </html>
/* リセットCSS */ * { margin: 0; padding: 0; } /* imgè¦ç´ ã§ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³ã—ã€ã‚»ãƒ³ã‚¿ãƒªãƒ³ã‚°ã®CSS */ .box { width: 660px; margin: 0 auto; display: table; } .box p{ text-align: center; } .box img { width: 200px; height: auto; padding: 10px; vertical-align: middle; } /* リストを使ã£ã¦æ¨ªä¸¦ã³ã—ã¦ã€ã‚»ãƒ³ã‚¿ãƒªãƒ³ã‚°ã®CSS */ .container { margin: 70px auto 0; width: 660px; } .container p { text-align: center; } .container ul { list-style-type: none; display: table; } .container li { vertical-align: middle; display: table-cell; } img { width: 200px; height: auto; padding: 10px; }
// Write JavaScript here