@media print { .img-responsive { width:auto; max-width:100%; } .merit .img-responsive { max-width:300px; } .voice .panel img { margin-bottom: 10px; } .voice .img-responsive { width:100%; max-width:232px; } .voice .row :after{ clear:both; } .merit top-contents { overflow:hidden; } .col-lg-8.col-md-8.col-sm-8.t-left{ width: 66.66666667%; float:left; } .row.top-line.site-width { overflow:hidden; } .col-lg-4 { width: 33.33333333%; float:left; } .col-lg-3 { width:25%; float:left; } .col-lg-9 { width:75%; float:left; } .panel-body:after { clear:both; } .panel-body { padding: 15px; } .col-lg-12 { width: 100%; } .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } }
アーカイブ
CSS改造事例覚書@ホームページビルダー21教室
linear-gradient() 線形グラデーションの使い方@ホームページビルダー21 教室
CSS font-family の使い方@ホームページビルダー21教室
画像パーツ配置 プレビューと編集画面で異なる結果 ホームページビルダー21SPテンプレートの使い方
ホームページビルダー21SPテンプレート HTMLソースパーツのスタイルの使い方
ホームページビルダー21SP HTMLソースパーツでYouTubeのテスト。
<div id=”sp-html-src-6″ class=”sp-part-top sp-html-src”><iframe width=”280″ height=”155″ src=”https://www.youtube.com/embed/rWB7LFV_JlM?rel=0″ frameborder=”0″ allowfullscreen=””></iframe></div>
サイトの公開前にブラウザーで確認すると、スタイルは以下の通り
@media not screen, screen and (min-width: 569px)
#sp-html-src-6 {
width: 49%;
float: left;
position: relative;
}
.sp-part-top {
display: block;
position: relative;
box-sizing: border-box;
}
サイトの公開をすると、
.sp-part-top {
display: block;
position: relative;
box-sizing: border-box;
}
と、一部欠如してしまう??