ホームページビルダー教室
ホームページ作成無料相談受付中（こちらをクリック!!）
TEL 045-567-8393 （平日11~20時 土11~17時 日祝休 留守電不可）
本日発売開始のホームページビルダー19、新機能のホームページビルダー19 SPを軽く使ってみました。（明日には、できるホームページビルダー19にそって勉強しようと思います。）
とりいそぎ簡単な作業のみ行い http://hpb19-sp-html.hpb18.org/ に公開してみました。これはサイトタイプはワードプレスではなくて通常（HTML）です。
ざっと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 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;”>編集画面で改行してみた。これは段落<p>になるのか？ 中央揃えしてみる。</p>
<p><b>強調は<strong>かな？</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]