ホームページビルダー19 SPの使い方 試作第一弾 (サイトタイプ=通常)

本日発売開始のホームページビルダー19、新機能のホームページビルダー19 SPを軽く使ってみました。(明日には、できるホームページビルダー19にそって勉強しようと思います。)

とりいそぎ簡単な作業のみ行い http://hpb19-sp-html.hpb18.org/ に公開してみました。これはサイトタイプはワードプレスではなくて通常(HTML)です。

ホームページビルダー19 SP

ざっとHTMLソースも見たのですが、外部スタイルシートではなく、埋め込まれているのがちょっと気になりました。

 

 

[html]

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>ホームページビルダー19 SP 初挑戦 サイトタイプ=通常 | ホームページビルダー19 SP による試作です@ホームページビルダー教室</title><!–[if lt IE 9]>
<script src=”html5.js” type=”text/javascript”></script>
<![endif]–>
<style type=”text/css”>
<!–

html{
font-size: 62.5%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{
display: block;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, table{
margin-top: 0;
box-sizing: border-box;
}

ul{
margin: 0;
box-sizing: border-box;
}

nav{
box-sizing: border-box;
}

/* body */

body{
text-align: left;
padding:0px;
margin:0px;
word-wrap: break-word;
word-break: break-all;
font-size: 13px;
font-size: 1.3rem;
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, Arial, sans-serif;
line-height: 1.5;
}

#content{
position: relative;
}

/* Parts */

.sp-part-top{
display: block;
position: relative;
}

.sp-part-top::after{
display: table;
clear: both;
content: “”;
}

/* copyright */

.hpb-copyright{
display: block;
text-align: center;
}

/* layout */

/*追加*/
#main{
overflow: hidden;
padding: 0;
margin: 0 auto;
}

#main::after{
clear: both;
display: table;
content: “”;
}

/*追加*/
#colophon{
padding: 0px;
padding-top: 30px;
width:100%;
margin: 0 auto;
}
#sidebar1, #sidebar2{
float: none;
width: auto;
padding: 0px;
box-sizing:border-box;
}

/*—*/

#primary{
margin-top:0;
}

.screen-reader-text{
display:none;
}

/* table */
th{
text-align: left;
}

table.sp-part-top{
margin: 5px auto;
display: table;
border-collapse: collapse;
width: 100%;
}
table > tbody > tr > th, table > tbody > tr > td{
padding: 5px 8px;
}

/* Yahoo!ロコ-地図, Googleマップ */

div[data-hpbmap]{
word-wrap: normal;
}

div[data-hpbmap] img{
max-width: none !important;
}

/* 追加 */

@media screen and (max-width: 568px){

*{
box-sizing: border-box;
}
body{
min-width: 100%;
}

#masthead{
position: static;
}
#primary, #main-inner, #contenthead, #content{
float: none;
width: 100%;
}
#main,#content{
width: 100%;
padding: 0;
}
#main-inner{
padding: 10px;
}

#sidebar1, #sidebar2{
float: none;
width: auto;
padding: 10px;
box-sizing:border-box;
}

#colophon{
padding: 10px;
}

}
#colophon{
background-color : #e1e1e1;
padding-top : 30px;
margin-top : 30px;
margin-left : auto;
margin-right : auto;
margin-bottom : 0px;
width : 100%;
}

#content{
background-color : #ffffff;
padding-top : 10px;
padding-left : 10px;
padding-right : 10px;
padding-bottom : 10px;
margin-bottom : 10px;
border-top-width : 1px;
border-left-width : 1px;
border-right-width : 1px;
border-bottom-width : 1px;
border-top-style : solid;
border-left-style : solid;
border-right-style : solid;
border-bottom-style : solid;
border-top-color : #d9d9d9;
border-left-color : #d9d9d9;
border-right-color : #d9d9d9;
border-bottom-color : #d9d9d9;
position : relative;
}

#masthead{
background-color : #3d3d3d;
background-image : url(img/header-back.png);
background-repeat : repeat-x;
min-height : 100px;
position : relative;
}

#primary{
margin-top : 0px;
}

a{
color : #737373;
text-decoration : none;
}

a:hover,a:active{
text-decoration : underline;
}

body{
color : #666666;
background-color : #f6f6f6;
}

html{
background-image : url(img/back-body.png);
}

@media screen and (min-width: 569px) {

#colophon .inner-box{
margin-top : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom : 0px;
width : 960px;
}

#main{
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom : 0px;
width : 960px;
overflow : hidden;
}

#main::after{
clear : both;
display : table;
content : “”;
}

body{
min-width : 960px;
}
}

@media screen and (min-width: 569px) {

#content{
width : 625px;
float : left;
}

#contenthead,#main-inner{
width : 960px;
}

#sidebar2{
width : 300px;
float : right;
}
}

#sp-site-navigation-2{
background-color : #e1e1e1;
text-align : center;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom : 30px;
width : 100%;
box-sizing : border-box;
}

#sp-site-navigation-2 .menu-toggle{
display : none;
}

#sp-site-navigation-2 .screen-reader-text{
display : none;
}

#sp-site-navigation-2 > ul{
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
list-style-type : none;
list-style-position : outside;
}

#sp-site-navigation-2 > ul > li{
display : inline;
}

#sp-site-navigation-2 > ul > li::after{
margin-top : 0px;
margin-left : 5px;
margin-right : 5px;
margin-bottom : 0px;
content : “/”;
}

#sp-site-navigation-2 > ul > li > a{
color : #666666;
text-decoration : none;
margin-left : 10px;
}

#sp-site-navigation-2 > ul > li > a:hover,#sp-site-navigation-2 > ul > li > a:active{
text-decoration : underline;
}

@media screen and (max-width: 568px) {

#sp-site-navigation-2{
text-align : center;
width : 100%;
}

#sp-site-navigation-2 .menu-toggle{
display : none;
cursor : pointer;
}

#sp-site-navigation-2 .screen-reader-text{
display : none;
}

#sp-site-navigation-2 ul{
display : block;
list-style-type : none;
list-style-position : outside;
}

#sp-site-navigation-2 ul li{
background-color : #e1e1e1;
}

#sp-site-navigation-2 ul ul{
display : none;
}

.button-menu#sp-site-navigation-2{
background-color : #575757;
background-image : none;
padding-top : 0px;
margin-top : 0px;
border-top-width : 1px;
border-left-width : 1px;
border-right-width : 1px;
border-bottom-width : 1px;
border-top-style : solid;
border-left-style : solid;
border-right-style : solid;
border-bottom-style : solid;
border-top-color : #ffffff;
border-left-color : #ffffff;
border-right-color : #ffffff;
border-bottom-color : #ffffff;
position : relative;
}

.button-menu#sp-site-navigation-2 .menu-toggle{
background-image : url(img/icon-menu.png);
background-repeat : no-repeat;
background-position : center center;
text-indent : -999em;
padding-top : 10px;
padding-left : 10px;
padding-right : 10px;
padding-bottom : 10px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
display : block;
cursor : pointer;
}

.button-menu#sp-site-navigation-2 ul{
display : none;
}

.button-menu#sp-site-navigation-2 ul.toggled-on{
display : block;
}

#sp-site-navigation-2 > ul > li{
display : block;
}

#sp-site-navigation-2 > ul > li::after{
margin-top : 0px;
margin-left : 5px;
margin-right : 5px;
margin-bottom : 0px;
content : “”;
}
}

#sp-page-title-1{
font-weight : bold;
line-height : 24px;
color : #004bbc;
text-align : left;
padding-top : 20px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 10px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 10px;
border-bottom-width : 2px;
border-bottom-style : solid;
border-bottom-color : #e2e2e2;
overflow : hidden;
}

#sp-page-title-1 > h1{
font-size : 1.8rem;
margin-bottom : 0px;
}

#breadcrumb-list a{
color : #3c3c3c;
text-decoration : none;
outline-width : medium;
outline-style : none;
outline-color : black;
}

#breadcrumb-list a:active,#breadcrumb-list a:hover,#breadcrumb-list a:focus{
color : #ff0000;
text-decoration : none;
}

#breadcrumb-list div{
padding-bottom : 10px;
margin-top : 10px;
margin-right : 10px;
width : auto;
display : inline-block;
}

@media screen and (max-width: 568px) {

#breadcrumb-list{
padding-left : 10px;
padding-right : 10px;
}
}

#sp-definition-list-1 dl{
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 1rem;
margin-right : 1rem;
margin-bottom : 10px;
zoom : 1;
}

#sp-definition-list-1 > dd{
line-height : 1.5;
padding-top : 10px;
padding-left : 170px;
padding-right : 15px;
padding-bottom : 10px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
}

#sp-definition-list-1 > dd::after{
clear : both;
display : block;
content : “”;
}

#sp-definition-list-1 > dt{
font-weight : bold;
line-height : 1.5;
text-align : left;
padding-top : 10px;
padding-left : 10px;
padding-right : 10px;
padding-bottom : 10px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
width : 150px;
min-height : 16px;
float : left;
}

@media screen and (max-width: 568px) {

#sp-definition-list-1 > dd{
padding-top : 10px;
padding-left : 10px;
padding-right : 15px;
padding-bottom : 10px;
}

#sp-definition-list-1 > dt{
width : 100%;
}
}

#sp-site-branding-1{
background-color : #3d3d3d;
background-image : url(img/header-back-01.png);
background-repeat : repeat-x;
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
width : 100%;
}

#sp-site-branding-1 .inner-box{
margin-top : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom : 0px;
width : 960px;
}

#sp-site-branding-1 .site-description{
font-size : 1rem;
font-weight : normal;
color : #a4a4a4;
text-align : left;
width : 960px;
height : 1rem;
position : absolute;
top : 0.5rem;
}

#sp-site-branding-1 .site-title{
padding-top : 40px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
width : 460px;
min-height : 60px;
overflow : hidden;
}

#sp-site-branding-1 .site-title a{
background-image : url(img/logo_basic-3.png);
background-repeat : no-repeat;
text-indent : -9999px;
width : 460px;
height : 60px;
float : left;
display : block;
}

@media screen and (max-width: 568px) {

#sp-site-branding-1{
background-color : #3d3d3d;
background-image : none;
padding-top : 0px;
width : 100%;
}

#sp-site-branding-1 .inner-box{
width : 100%;
}

#sp-site-branding-1 .site-description{
color : #a4a4a4;
text-align : left;
padding-top : 0px;
padding-left : 10px;
padding-right : 10px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom : 0px;
width : 100%;
position : absolute;
left : 0px;
box-sizing : border-box;
}

#sp-site-branding-1 .site-title{
text-align : center;
padding-top : 40px;
padding-left : 7px;
padding-right : 7px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 10px;
width : 100%;
height : 80px;
float : none;
}

#sp-site-branding-1 .site-title a{
background-size : 100% auto;
padding-top : 5px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 5px;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom : 0px;
width : 100%;
box-sizing : border-box;
}
}

#sp-block-container-1, #sp-block-container-2, #sp-block-container-3{
color : #666666;
}

#sp-block-container-1 .large, #sp-block-container-2 .large, #sp-block-container-3 .large{
font-size : 1.5rem;
}

#sp-block-container-1 .medium, #sp-block-container-2 .medium, #sp-block-container-3 .medium{
font-size : 1.4rem;
}

#sp-block-container-1 .small, #sp-block-container-2 .small, #sp-block-container-3 .small{
font-size : 1.2rem;
}

#sp-block-container-1 .x-large, #sp-block-container-2 .x-large, #sp-block-container-3 .x-large{
font-size : 1.8rem;
}

#sp-block-container-1 .x-small, #sp-block-container-2 .x-small, #sp-block-container-3 .x-small{
font-size : 1.1rem;
}

#sp-block-container-1 .xx-large, #sp-block-container-2 .xx-large, #sp-block-container-3 .xx-large{
font-size : 2rem;
}

#sp-block-container-1 .xx-small, #sp-block-container-2 .xx-small, #sp-block-container-3 .xx-small{
font-size : 1rem;
}

#sp-block-container-1 em, #sp-block-container-2 em, #sp-block-container-3 em{
font-style : oblique;
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : #666666;
}

#sp-block-container-1 hr, #sp-block-container-2 hr, #sp-block-container-3 hr{
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 25px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 25px;
border-top-width : 1px;
border-left-width : 0px;
border-right-width : 0px;
border-bottom-width : 0px;
border-top-style : dashed;
border-left-style : none;
border-right-style : none;
border-bottom-style : none;
border-top-color : #cccccc;
border-left-color : initial;
border-right-color : initial;
border-bottom-color : initial;
height : 0px;
}

#sp-block-container-1 strong, #sp-block-container-2 strong, #sp-block-container-3 strong{
font-weight : bold;
}

#sp-block-container-1 > h1, #sp-block-container-2 > h1, #sp-block-container-3 > h1{
font-size : 2rem;
font-weight : normal;
color : #0d0e12;
background-color : #f1f1f1;
padding-top : 15px;
padding-left : 20px;
padding-right : 20px;
padding-bottom : 15px;
margin-bottom : 15px;
border-top-width : 1px;
border-top-style : solid;
border-top-color : #3c3f53;
}

#sp-block-container-1 > h1,#sp-block-container-1 > h2,#sp-block-container-1 > h3,#sp-block-container-1 > h4,#sp-block-container-1 > h5,#sp-block-container-1 > h6, #sp-block-container-2 > h1,#sp-block-container-2 > h2,#sp-block-container-2 > h3,#sp-block-container-2 > h4,#sp-block-container-2 > h5,#sp-block-container-2 > h6, #sp-block-container-3 > h1,#sp-block-container-3 > h2,#sp-block-container-3 > h3,#sp-block-container-3 > h4,#sp-block-container-3 > h5,#sp-block-container-3 > h6{
font-weight : bold;
color : #666666;
}

#sp-block-container-1 > h2, #sp-block-container-2 > h2, #sp-block-container-3 > h2{
font-size : 1.8rem;
font-weight : normal;
color : #0d0e12;
background-color : #f1f1f1;
padding-top : 15px;
padding-left : 20px;
padding-right : 20px;
padding-bottom : 15px;
margin-bottom : 15px;
border-top-width : 1px;
border-top-style : solid;
border-top-color : #3c3f53;
}

#sp-block-container-1 > h3, #sp-block-container-2 > h3, #sp-block-container-3 > h3{
font-size : 1.7rem;
font-weight : normal;
color : #0d0e12;
background-color : #f1f1f1;
padding-top : 15px;
padding-left : 20px;
padding-right : 20px;
padding-bottom : 15px;
border-top-width : 1px;
border-top-style : solid;
border-top-color : #3c3f53;
}

#sp-block-container-1 > h4, #sp-block-container-2 > h4, #sp-block-container-3 > h4{
font-size : 1.6rem;
font-weight : normal;
padding-top : 3px;
padding-bottom : 0.4em;
margin-bottom : 15px;
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : #d5d5d5;
clear : both;
}

#sp-block-container-1 > h5, #sp-block-container-2 > h5, #sp-block-container-3 > h5{
font-size : 1.5rem;
margin-bottom : 15px;
}

#sp-block-container-1 > h6, #sp-block-container-2 > h6, #sp-block-container-3 > h6{
font-size : 1.4rem;
margin-bottom : 15px;
}

#sp-block-container-1 > p, #sp-block-container-2 > p, #sp-block-container-3 > p{
font-size : 1.4rem;
line-height : 1.4;
color : #666666;
text-align : left;
padding-left : 0.1em;
padding-right : 0.1em;
margin-top : 0.5em;
margin-bottom : 1.5em;
}

#sp-block-container-1 > p.indent, #sp-block-container-2 > p.indent, #sp-block-container-3 > p.indent{
padding-left : 5px;
}

@media screen and (max-width: 568px) {

#sp-block-container-1, #sp-block-container-2, #sp-block-container-3{
width : 100%;
}
}

#page-content > .large{
font-size : 1.2em;
}

#page-content > .medium{
font-size : 1em;
}

#page-content > .small{
font-size : 0.9em;
}

#page-content > .x-large{
font-size : 1.8em;
}

#page-content > .x-small{
font-size : 0.8em;
}

#page-content > .xx-large{
font-size : 2em;
}

#page-content > .xx-small{
font-size : 0.7em;
}

#page-content > em{
font-style : oblique;
color : #00a47f;
}

#page-content > h1{
color : #ffffff;
background-color : #00a453;
background-image : none;
background-repeat : repeat;
background-attachment : scroll;
background-position : 0% 0%;
background-clip : border-box;
background-origin : padding-box;
background-size : auto auto;
padding-top : 13px;
padding-left : 13px;
padding-right : 0px;
padding-bottom : 11px;
border-top-left-radius : 5px 5px;
border-top-right-radius : 5px 5px;
border-bottom-right-radius : 5px 5px;
border-bottom-left-radius : 5px 5px;
}

#page-content > h2{
color : #ffffff;
background-color : #00a47f;
background-image : none;
background-repeat : repeat;
background-attachment : scroll;
background-position : 0% 0%;
background-clip : border-box;
background-origin : padding-box;
background-size : auto auto;
padding-top : 6px;
padding-left : 8px;
padding-right : 0px;
padding-bottom : 7px;
border-top-left-radius : 5px 5px;
border-top-right-radius : 5px 5px;
border-bottom-right-radius : 5px 5px;
border-bottom-left-radius : 5px 5px;
}

#page-content > h3{
font-size : 1.3em;
color : #ffffff;
background-color : #10bf97;
background-image : none;
background-repeat : repeat;
background-attachment : scroll;
background-position : 0% 0%;
background-clip : border-box;
background-origin : padding-box;
background-size : auto auto;
padding-top : 6px;
padding-left : 8px;
padding-right : 0px;
padding-bottom : 7px;
border-top-left-radius : 5px 5px;
border-top-right-radius : 5px 5px;
border-bottom-right-radius : 5px 5px;
border-bottom-left-radius : 5px 5px;
clear : both;
}

#page-content > h4{
font-size : 1.2em;
color : #ffffff;
background-color : #46ccb2;
background-image : none;
background-repeat : repeat;
background-attachment : scroll;
background-position : 0% 0%;
background-clip : border-box;
background-origin : padding-box;
background-size : auto auto;
padding-top : 6px;
padding-left : 8px;
padding-right : 0px;
padding-bottom : 7px;
border-top-left-radius : 5px 5px;
border-top-right-radius : 5px 5px;
border-bottom-right-radius : 5px 5px;
border-bottom-left-radius : 5px 5px;
clear : both;
}

#page-content > h5{
font-size : 1em;
color : #ffffff;
background-color : #6ad4bf;
background-image : none;
background-repeat : repeat;
background-attachment : scroll;
background-position : 0% 0%;
background-clip : border-box;
background-origin : padding-box;
background-size : auto auto;
padding-top : 6px;
padding-left : 8px;
padding-right : 0px;
padding-bottom : 7px;
border-top-left-radius : 5px 5px;
border-top-right-radius : 5px 5px;
border-bottom-right-radius : 5px 5px;
border-bottom-left-radius : 5px 5px;
clear : both;
}

#page-content > h6{
font-size : 1em;
color : #ffffff;
background-color : #6ad4bf;
background-image : none;
background-repeat : repeat;
background-attachment : scroll;
background-position : 0% 0%;
background-clip : border-box;
background-origin : padding-box;
background-size : auto auto;
padding-top : 3px;
padding-left : 8px;
padding-right : 0px;
padding-bottom : 3px;
border-top-left-radius : 5px 5px;
border-top-right-radius : 5px 5px;
border-bottom-right-radius : 5px 5px;
border-bottom-left-radius : 5px 5px;
}

#page-content > p{
line-height : 1.6;
color : #515151;
text-align : left;
margin-top : 1em;
margin-left : 3em;
margin-right : 3em;
margin-bottom : 1em;
}

#page-content > p.indent{
padding-left : 15px;
}

#page-content > strong{
font-weight : bold;
color : #515151;
background-color : #6ad4bf;
background-image : none;
background-repeat : repeat;
background-attachment : scroll;
background-position : 0% 0%;
background-clip : border-box;
background-origin : padding-box;
background-size : auto auto;
}

#sp-site-navigation-1{
font-size : 1.3rem;
color : #ffffff;
background-color : #21539f;
background-image : url(img/navi-w-1.png);
text-decoration : none;
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 10px;
border-top-width : medium;
border-top-style : none;
border-top-color : initial;
width : 100%;
min-height : 50px;
}

#sp-site-navigation-1 .menu-toggle{
display : none;
}

#sp-site-navigation-1 .screen-reader-text{
display : none;
}

#sp-site-navigation-1 a{
color : #ffffff;
}

#sp-site-navigation-1 a:hover,#sp-site-navigation-1 a:active{
background-color : rgba(0, 0, 0, 0.5);
}

#sp-site-navigation-1 li{
padding-top : 1px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 1px;
margin-right : 0px;
float : left;
}

#sp-site-navigation-1 li a{
font-size : 14px;
line-height : 49px;
color : #ffffff;
text-decoration : none;
padding-top : 0px;
padding-left : 10px;
padding-right : 10px;
padding-bottom : 0px;
border-right-width : 1px;
border-right-style : solid;
border-right-color : rgba(255, 255, 255, 0.2);
display : block;
}

#sp-site-navigation-1 li a:hover{
border-right-width : 1px;
border-right-style : solid;
border-right-color : transparent;
}

#sp-site-navigation-1 ul{
background-repeat : no-repeat;
text-align : left;
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom : 0px;
border-left-width : 1px;
border-left-style : solid;
border-left-color : rgba(255, 255, 255, 0.2);
width : 960px;
max-width : 100%;
display : block;
list-style-type : none;
list-style-position : outside;
}

#sp-site-navigation-1 ul ul{
color : #333333;
background-color : #ffffff;
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
border-top-width : 1px;
border-left-width : 1px;
border-right-width : 1px;
border-bottom-width : medium;
border-top-style : solid;
border-left-style : solid;
border-right-style : solid;
border-bottom-style : none;
border-top-color : #666666;
border-left-color : #666666;
border-right-color : #666666;
border-bottom-color : initial;
width : auto;
min-width : 150px;
display : none;
position : absolute;
top : 100%;
left : 0px;
z-index : 9999;
}

#sp-site-navigation-1 ul ul li{
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : #575757;
width : 100%;
white-space : nowrap;
}

#sp-site-navigation-1 ul ul li a{
color : #333333;
padding-top : 0px;
padding-left : 15px;
padding-right : 15px;
padding-bottom : 0px;
display : block;
}

#sp-site-navigation-1 ul ul li a:hover,#sp-site-navigation-1 ul ul li.current_page_item > a,#sp-site-navigation-1 ul ul li.current_page_ancestor > a,#sp-site-navigation-1 ul ul li.current-menu-item > a,#sp-site-navigation-1 ul ul li.current-menu-ancestor > a{
color : #ffffff;
background-color : rgba(0, 0, 0, 0.7);
}

#sp-site-navigation-1 ul ul li:hover{
border-bottom-width : 1px;
display : block;
position : relative;
}

#sp-site-navigation-1 ul ul li:hover > ul{
background-color : #000000;
border-bottom-width : 1px;
width : 100%;
display : block;
top : 0px;
left : 100%;
}

#sp-site-navigation-1 > ul::after{
clear : both;
display : table;
content : “”;
}

#sp-site-navigation-1 > ul > li:hover{
position : relative;
}

#sp-site-navigation-1 > ul > li:hover > ul{
display : block;
}

@media screen and (max-width: 568px) {

#sp-site-navigation-1{
background-color : #3363ac;
background-image : none;
padding-top : 0px;
margin-top : 10px;
position : relative;
}

#sp-site-navigation-1 .menu-toggle{
background-image : url(img/icon-menu.png);
background-repeat : no-repeat;
background-position : center center;
text-indent : -999em;
padding-top : 10px;
padding-left : 10px;
padding-right : 10px;
padding-bottom : 10px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
display : none;
cursor : pointer;
}

#sp-site-navigation-1 .screen-reader-text{
display : none;
}

#sp-site-navigation-1 li{
background-repeat : repeat-x;
background-position : left top;
padding-left : 0px;
border-left-width : 0px;
}

#sp-site-navigation-1 li a{
color : #ffffff;
display : block;
}

#sp-site-navigation-1 ul{
background-color : #ffffff;
background-image : url(img/back-01.png);
width : auto;
height : auto;
display : block;
list-style-type : none;
list-style-position : outside;
}

#sp-site-navigation-1 ul li{
width : auto;
float : none;
}

#sp-site-navigation-1 ul li a{
line-height : 24px;
color : #3c3f53;
background-repeat : no-repeat;
background-position : 5px 12px;
text-decoration : none;
padding-top : 8px;
padding-left : 25px;
padding-right : 10px;
padding-bottom : 7px;
float : none;
}

#sp-site-navigation-1 ul li a:hover,#sp-site-navigation-1 ul li a:active{
color : #ffffff;
text-decoration : none;
}

#sp-site-navigation-1 ul ul{
color : #3c3f53;
border-top-width : medium;
border-left-width : medium;
border-right-width : medium;
border-bottom-width : medium;
border-top-style : none;
border-left-style : none;
border-right-style : none;
border-bottom-style : none;
border-top-color : initial;
border-left-color : initial;
border-right-color : initial;
border-bottom-color : initial;
width : auto;
min-width : 150px;
display : block;
position : relative;
top : 100%;
left : 0px;
z-index : 9999;
}

#sp-site-navigation-1 ul ul li{
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : transparent;
}

#sp-site-navigation-1 ul ul li a{
color : #000000;
padding-top : 8px;
padding-left : 50px;
padding-right : 50px;
padding-bottom : 8px;
border-top-width : medium;
border-left-width : medium;
border-right-width : medium;
border-bottom-width : medium;
border-top-style : none;
border-left-style : none;
border-right-style : none;
border-bottom-style : none;
border-top-color : initial;
border-left-color : initial;
border-right-color : initial;
border-bottom-color : initial;
}

#sp-site-navigation-1 ul ul li a:hover{
background-color : rgba(0, 0, 0, 0.6);
}

#sp-site-navigation-1 ul > li{
color : #ffffff;
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
}

.button-menu#sp-site-navigation-1 .menu-toggle{
display : block;
}

.button-menu#sp-site-navigation-1 ul.toggled-on{
display : block;
}

.button-menu#sp-site-navigation-1 > ul{
display : none;
}

.button-menu#sp-site-navigation-1 > ul > ul{
display : block;
}

#sp-site-navigation-1 > ul > li.current_page_item > a,#sp-site-navigation-1 > ul > li.current_page_ancestor > a,#sp-site-navigation-1 > ul > li.current-menu-item > a,#sp-site-navigation-1 > ul > li.current-menu-ancestor > a{
color : #ffffff;
background-color : rgba(0, 0, 0, 0.6);
}

#sp-site-navigation-1 > ul > li > a:hover{
background-color : rgba(0, 0, 0, 0.6);
}
}

@media screen and (min-width: 569px) {

#sp-image-1, #sp-image-2, #sp-image-3 {
}
}

@media screen and (max-width: 568px) {

#sp-image-1, #sp-image-2, #sp-image-3{
max-width : 100%;
}
}

#page-content{
border-top-left-radius : 20px 20px;
border-top-right-radius : 20px 20px;
border-bottom-right-radius : 20px 20px;
border-bottom-left-radius : 20px 20px;
}

#sp-site-branding-1 > .inner-box > .site-title > a{
background-image : url(img/logo_basic-31.png);
}

@media screen and (min-width: 569px) {

#sp-block-container-1{
width : 500px;
position : absolute;
top : 4rem;
left : 50%;
}

#sp-block-container-1 p{
font-size : 1.1rem;
color : #ffffff;
text-align : right;
}

#sp-block-container-1 p span{
font-size : 2.6rem;
}

#sp-image-1{
margin-top : 10px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 10px;
width : 100%;
}
}

@media screen and (max-width: 568px) {

#sp-block-container-1{
margin-bottom : 10px;
width : 100%;
top : 0px;
left : 0%;
}

#sp-block-container-1 p{
font-size : 1rem;
color : #ffffff;
text-align : left;
padding-top : 0px;
padding-left : 10px;
padding-right : 10px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
width : 100%;
box-sizing : border-box;
}

#sp-block-container-1 p span{
font-size : 1rem;
}

#sp-image-1{
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
width : 100%;
}
}

–>
</style></head>
<body class=”basic home” id=”hpb-sp-19-0002-02″>
<div id=”page” class=”site”>
<header id=”masthead” class=”site-header sp-part-top” role=”banner”>
<div id=”sp-site-branding-1″ class=”sp-part-top”>
<div class=”inner-box”>
<h1 class=”site-title”><a href=”index.html” rel=”home”>ホームページビルダー19 SP 初挑戦 サイトタイプ=通常</a></h1>
<h2 class=”site-description”>ホームページビルダー19 SP による試作です@ホームページビルダー教室</h2>
<div id=”sp-block-container-1″ class=”sp-part-top”>
<p><span>TEL.045-567-8393</span><br>
〒230-0061 神奈川県横浜市鶴見区佃野町34-2 レアールつくの商店街内</p></div></div></div></header>
<div id=”main” class=”site-main”>
<div id=”contenthead” class=”sp-part-top”><a style=”display: block”><img id=”sp-image-1″ src=”img/header-main1.png” class=”sp-part-top”></a>
<nav id=”sp-site-navigation-1″ class=”navigation-main button-menu sp-part-top” role=”navigation”>
<h1 class=”menu-toggle”>メニュー</h1>
<div class=”screen-reader-text skip-link”><a title=”コンテンツへスキップ” href=”#content”>コンテンツへスキップ</a></div>
<ul id=”menu-mainnav”>
<li class=”menu-item current_page_item”><a href=”index.html”>ホームページビルダー19 SP 試作サイト</a>
<li class=”menu-item”><a href=”concept.html”>コンセプト</a>
<li class=”menu-item”><a href=”itemlist.html”>商品紹介</a>
<li class=”menu-item”><a href=”company.html”>会社案内</a>
<li class=”menu-item”><a href=”recruit.html”>採用情報</a>
<li class=”menu-item”><a href=”contact.html”>お問い合わせ</a>
<li class=”menu-item”><a href=”access.html”>アクセス</a></ul></nav></div>
<div id=”main-inner”>
<div id=”primary” class=”content-area”>
<div id=”content” class=”site-content” role=”main”>
<header id=”sp-page-title-1″ class=”entry-header sp-part-top”>
<h1 class=”entry-title”>ホームページビルダー19 SP 試作サイト</h1></header>
<article>
<div id=”page-content” class=”sp-part-top”>
<p class=”large”>10月3日にジャストシステム社から発売された最新版 ホームページビルダー19の新機能 ホームページビルダーSPでのサイト作成(試作)です。サイトタイプ=通常で作成しています。</p>
<p style=”text-align : left;”>HTMLソースを直接編集できないのかな?</p>
<p style=”text-align : center;”>編集画面で改行してみた。これは段落&lt;p&gt;になるのか? 中央揃えしてみる。</p>
<p><b>強調は&lt;strong&gt;かな?</b> <i>斜体はどうなるかな?</i> <u>下線は?</u><br></p>
<p><span style=”font-size : 2.4rem;”>フォントサイズの指定</span></p>
<h3><a>新商品情報</a></h3><a style=”display: block”><img id=”sp-image-2″ src=”img/index-img01.jpg” alt=”商品イメージ” class=”sp-part-top”></a>
<h4>商品名○○○○○○</h4>
<h5>0,000円[税込]</h5>
<p>シンプルで使いやすいと大人気!今、注目の商品です。ここに紹介が入ります。ここに紹介が入ります。</p><a style=”display: block”><img id=”sp-image-3″ src=”img/index-img02.jpg” alt=”商品イメージ” class=”sp-part-top”></a>
<h4>商品名○○○○○○</h4>
<h5>0,000円[税込]</h5>
<p>シンプルで使いやすいと大人気!今、注目の商品です。ここに紹介が入ります。ここに紹介が入ります。</p>
<div id=”sp-block-container-2″ class=”sp-part-top”>
<h3>新着情報</h3>
<dl id=”sp-definition-list-1″ class=”sp-part-top”>
<dt>20**年*月*日
<dd>○○○○○○○○を更新しました。
<dt>20**年*月*日
<dd>○○新聞に「○○○○○○」が掲載されました。
<dt>20**年*月*日
<dd>サイトをオープンしました。</dl></div></div></article></div></div></div>
<div id=”sidebar2″ style=”min-height: 100px” class=”sp-part-top”></div></div>
<footer id=”colophon” class=”site-footer sp-part-top” role=”contentinfo”>
<div class=”inner-box”>
<nav id=”sp-site-navigation-2″ class=”navigation-main sp-part-top” role=”navigation”>
<h1 class=”menu-toggle”>メニュー</h1>
<div class=”screen-reader-text skip-link”><a title=”コンテンツへスキップ” href=”#content”>コンテンツへスキップ</a></div>
<ul id=”menu-mainnav”>
<li class=”menu-item”><a href=”privacy.html”>プライバシーポリシー</a></ul></nav>
<div id=”sp-block-container-3″ class=”sp-part-top”>
<p style=”text-align:center;color:#666666;” class=”hpb-copyright”>Copyright c ○○○, All rights reserved.</p></div></div></footer></div><script type=”text/javascript” src=”navigation.js”></script></body></html>

[/html]