独学!Webサイト構築日誌

8日目:1週間経ったが、

9:00

「1週間経ったが、コイツをどう思う?」
『すごく・・・中途半端です・・・。』
と返ってきそうなぐらい中途半端。雑。
昨晩iframe/tableの使い方について別案を思いついたので、今日は早速それを試していこうと思う。メインPCのExcel認証がバグってるのでそれ解消してから。

これが今日の目標だよ。(昨日と同じ)
  1. ウィンドウ分割方法の変更。
  2. リンク先をiframeで読み込む。

10:30

分割は上手くいった。
昨日は4つに分けて真ん中だけ縦で区切るよう指示していたが、今日は横に三等分。真ん中だけcssで分割すると上手くいった。が、何故か今後はサイドバーの画像の大きさがいう事聞かない。駄々っ子か。

12:30

やっと分かった。ついでに説明用に画像準備した。

after
× 今までの認識 ×
iframe内にcssを反映させるには、タグ/id/classが引き継がれるので、ifamreの内外を含めたABC全部に対してcssが機能する。

◎ 正しい認識 ◎
iframe内にcssを反映させるには、タグ/id/classは完全に独立しているので、今まで通りだとCにしか機能しない。例えばBCに対して機能させるには、右図のようにiframeリンク先にも同様にBを書いてやる必要がある。

ただ、今回に関しては右図のようにする必要があったけども、わざと左図のようにしてcssを反映させないという手もあるのかな、と。





18:30

苦節2日。
ついにiframe/JavaScriptが言う事聞いてくれました…。
ネットの情報を見る限り、あと2段階ぐらい楽に出来そうだけど、現状の知識とスキルだとコレが最高かなと。
            

html(index.html)
<!DOCTYPE html><!--HTML使用宣言-->
<html>
<head>
<link rel="stylesheet" href="../other/style.css">
<meta charset="utf-8">
<title>独学!Webサイト構築日誌</title>
<meta name="description" content="htmlやcssなどの知識がほぼ無い素人が、独学でWebサイトを立ち上げるまでの日誌">

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-183998735-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-183998735-5');
</script>
</head>
<body>
<!-- 参照部分 header -->
<iframe src="../other/header.html" width=100% frameborder="0" scrolling="no" id="header">この部分はインラインフレームを使用しています。</iframe>

<table width=100% id="middle-body">
<tr>
    <td class="left-body">
        <div id="main">
            <h1>ようこそ。</h1>

        </div>
    </td>
    <td class="right-body">
        <!-- 参照部分 sidebar -->
        <iframe src="../other/sidebar.html" width=100% frameborder="0" scrolling="no" id="sidebar">この部分はインラインフレームを使用しています。</iframe>
    </td>
</tr>
</table>

<!-- 参照部分 footer -->
<iframe src="../other/footer.html" width=100% frameborder="0" scrolling="no" id="footer">この部分はインラインフレームを使用しています。</iframe>

<!-- ココからJavaScript読み込み -->
<script src="../js/resize.js"></script>      
</body>
</html>

html(header.html)※footer/sidebarは省略。
<!DOCTYPE html><!--HTML使用宣言-->
<html>
<head>
<link rel="stylesheet" href="../other/style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<div style="text-align: center"><a href="../" target="_top"><img src="/img/title.jpg" alt="独学!Webサイト構築日誌" title="独学!Webサイト構築日誌"></a></div>
<ul id="top-nav">
    <a href="../" target="_top"><li>HOME</li></a>
    <a href="../other/diary_index.html" target="_top"><li>日誌</li></a>
    <a href="https://zaitaku.ki-luck.info/" target=”_blank”><li>在宅魂</li></a>
    <a href="https://doinaka.ki-luck.info/" target=”_blank”><li>ど田舎魂</li></a>
</ul>
</header>
</body>
</html>


js ※header分だけ。※footer/sidebarは省略。
window.onload = function () {
let headerH = document.getElementById('header');
let iheight = headerH.contentWindow.document.body.scrollHeight;
headerH.style.height = iheight + 'px';
}


css
/*画像とtwitterの大きさ*/
#main img, nav img, .twitter-timeline{
width: 100%;    /* 横幅を割合で指定 */
height: auto;  /* 高さは自動指定 */
margin:0.1rem;
}
nav{/*sidebar画像用*/
width: 30%;
min-height:700px;
}
/*全体--------------*/
body{
background-color:	 #ffffff;
width:1000px;
margin: 0 auto;
}
.left-body{
background-color: #ffffff;
width: 65%;
padding: 10px;
margin: 0 10px;
min-height:700px;
}
.right-body{
width: 30%;
min-height:700px;
}
#middle-body{
margin:10px;
}
            
        





さて、ここ3日程日誌を書きなぐってきたので、明日は整理する日にしようと思います。別件も少しドタバタしているので、丁度良いかなと。
今日はぐっすり寝れそうですw


8日目の進捗。
見た目が変わってないと思うだろ?中身が変わってんだよ。人間、中身で勝負って言うだろ?()



Before: 7日目

Before: 7日目

After: 8日目

After: 8日目



作成日:2020/12/20 - 更新日:2021/01/26

≪ 7日目≪ 一覧に戻る ≫9日目 ≫

HOME > 日誌一覧 > 8日目:1週間経ったが、