[2003][2004][2005][2006][2007][2008][2009][2010][2011][2012][2013][2014][2015][2016][2017][2018][2019][2020][2021][2022][2023][2024][2025]
【yonetch Works XML化プロジェクト】
更新履歴だけだと意味のないコンテンツになるんで、更新を含むサイト運営のアレコレ、またその他のカテゴリ分けのできない話題を、例によって日記形式で綴っていくコトにしました。
[2003][2004][2005][2006][2007][2008][2009][2010][2011][2012][2013][2014][2015][2016][2017][2018][2019][2020][2021][2022][2023][2024][2025]
【yonetch Works XML化プロジェクト】
サイトレイアウト新年あけましておめでとうございますさて挨拶もそこそこに早速本題です。開設以来基本レイアウトは一切変えずにきた本サイト。何が問題って、PCの解像度で閲覧すると、横幅いっぱいに広がったテキストが読みづらいことこの上ありません。仕方なくブラウザの幅を適当に調整することになりメンドウ...
レスポンシブデザイン初心者も分かる！レスポンシブ・デザインの作り方です。こちらの記事から、HTMLおよびCSSに以下を追記しました（ついでに、これまで<frameset>タグを使っていたのを<iframe>タグに変更）。
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div class="wrapper">
<div class="side">
<iframe name="menu" src="navi01.htm" width="148" height="100%" frameborder="0"></iframe>
</div>
<div class="main">
<iframe name="contents" src="top01.htm" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
</body>
</html>【HTML】
body
{
margin: 0 ;
padding: 0 ;
font-size: 15px ;
line-height: 1.618 ;
}
.wrapper
{
width: 948px ;
margin: 0 auto ;
padding: 0 ;
}
.main
{
width: 770px ;
padding: 10px ;
border: 1px solid rgba(0,0,0,.1) ;
float: right;
}
.side
{
width: 148px ;
float: left;
}【CSS】
やっと...