はてなブログがどんどん改悪されて行く
はてなブログが開始されたころはサクサク動いて心地よかったのに
最近はクソ重くて立ち上げる気にもならなくなってしまった
残念だ
はてなはどこへ行くのだろう
しかも今日立ち上げたら
前よりめちゃくちゃ広告が多くなっている
はてなも生活が苦しいのかな？
でもこれじゃ逆にユーザがどんどん減って行くのではないか？
まあそれより腹が立つのはやはり
Visual Studio 2017のオートフォーマット機能だ
部分的に解除できる機能もあるのだが
どうあがいても完全に解除することは不可能なようだ
特に頭に来るのは貼り付けしたときのオートフォーマットだ
Ctrl+Zを押すとオートフォーマット前の状態に戻るのだが
Ctrl+Vのあとに必ずCtrl+Zを幼ければならないのは
苦痛以外の何物でもない
いくらただだからと言ってこれじゃあんまりだ！
ﾌﾟﾝ(#`3´#)ﾌﾟﾝ
Visual Studio 2017 の自動書式フォーマットはなんとかならんか？
本当に迷惑なj自動書式フォーマット機能
一発で手動に変えられれば良いのに
しかもどのチェックがどの機能か分かりづらい
きょうは自動で入力されるダブルクォートの
機能を外すのに苦労したのでメモしておこう！
ダブルクォートなのに「自動かっこ挿入」に割り当てられていたため
気付くまであっちこっちチェックを外して
見つけるのに時間かかった
本当に何とかして欲しいわ
マイクロソフト特有の余計な機能は！
(*'д`*)
Visual Studio 2017 用のマクロ機能拡張の種類、間違ってたわ
こっちが正解だった。
間違ってこっちをインスコしてた。
検索操作が記録されないから変だなと思った。
検索操作が使えないと、
キーボードマクロのありがたみが、
半減以下になっちゃうよね？
気が付いて良かった！！
ヨロッ(●^＿^●)♪
Test-2019/03/13
Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13Test-2019/03/13
フレームを使わずに画面分割するHTMLページ作成方法
最近HTMLでサイトを構築しているが
フレームで画面分割すると
目的のページのURLに
直接リンクしたときに
問題が発生する
フレームが表示されないのだ
そこで
フレームを使わずに
画面を分割する方法を調査した
CSS3のflexというプロパティによって
実現可能だと分かった
フレックスボックスとか
呼ばれているらしい
試しに作ってみたら
うまく行った
書かなければならないが
それほど複雑ではない
とりあえず
ソースコードを見てくれ
まずはスタイルシートから
body {
margin: 0;
padding: 0;
}
.flex_container {
height: 100vh;
display: flex;
flex-direction: row;
}
.flex_row {
flex-grow: 1;
display: flex;
flex-direction: row;
}
.flex_column {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.flex_main {
flex-grow: 1;
background-color: #ffffe0;
overflow: auto;
}
.flex_left {
background-color: #e0e0ff;
width: 200px;
overflow: auto;
}
.flex_right {
background-color: #e0f0c0;
width: 150px;
overflow: auto;
}
.flex_top {
background-color: #ffe0f0;
min-width: 100%;
height: 86px;
text-align:center;
}
.flex_bottom {
color: #e0e0e0;
background-color: #808080;
height: 24px;
font-size: small;
text-align:right;
}
.flex_inner {
padding: 3px 5px 0;
max-width: 100rem;
}
bodyのマージンがあると
ボックスの周りに
隙間が出来てしまうので
ゼロにしてある
念のためパディングもゼロにしたが
これは無くても良い
.flex_containerクラスはdivタグと組み合わせて使用する
ほかのクラス設定プロパティもそう
.flex_containerクラスは
すべてのフレックスボックスの
一番外側のボックスつまりコンテナだ
.flex_rowクラスは行方向の分割のためのコンテナだ
この中にdivタグでボックスを並べると
各ボックスは行方向に分割される
同様に.flex_columnクラスは桁方向の分割用コンテナで
各ボックスは桁方向に分割される
つまり縦に分割する
この２つのコンテナクラスは
いくつでも入れ子にできるので
かなり複雑な画面分割も可能となる
私はこのように分割した
縦横に合計5個のボックスに分割している
フレックスボックスの使用方法を
ネット検索した結果
見つかったサイトの使用例では
すべてのサイトで
ヘッダー部分とフッター部分を
横幅いっぱいにしてあったのだが
ヘッダー部とフッター部は
そもそも表示情報量が少ないので
横幅が大きすぎるのは無駄である
そのため
私は縦横に入れ子で
分割する方法を
考案したのである
再びスタイルシートの説明に戻るが
flex-grow: 1;というプロパティは
このボックスは伸び縮みするという意味らしい
display: flex;というのは
これはコンテナであるという意味
.flex_mainクラスは
このページのメインコンテンツとなる
divタグボックス用のクラスである
.flex_leftクラスは固定幅の左側サイドバー用
.flex_rightクラスは固定幅の右側サイドバー用である
同様に.flex_topクラスは固定高さのヘッダー用
.flex_bottomクラスはフッター用である
最後に.flex_innerクラスは
ボックスの中身を書くためのボックスで
見やすいようにパディングを設定してある
max-width: 100rem;というプロパティは
ボックス内のテキストの幅が
ボックスの幅を超えてしまったときの
対処用のプロパティである
これがないと
画面がぐちゃぐちゃに
なってしまうのだ
次にHTML側の
ソースコードを見てくれ
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>サイトのタイトル</title> <meta charset="utf-8" /> <meta name="copyright" content="Copyright 所有者 All right reserved." /> <meta name="robots" content="INDEX,FOLLOW" /> <meta name="google-site-verification" content="Google検索対応用の暗号" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="所有者" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta property="og:url" content="サイトのURL" /> <meta property="og:title" content="ページのタイトル" /> <meta property="og:description" content="ページの説明" /> <meta property="og:image" content="アイコンのURL" /> <link rel="shortcut icon" href="アイコンのサイト内パス" /> <link rel="stylesheet" type="text/css" href="スタイルシートのサイト内パス"> <script src="/js/スクリプトのサイト内パス"></script> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8" ></script> </head> <body> <div class=flex_container> <div class=flex_left><script>WriteHtml("/contents/flex_left.html");</script></div> <div class=flex_column> <div class=flex_top><script>WriteHtml("/contents/flex_top.html");</script></div> <div class=flex_row> <div class=flex_column> <div class=flex_main> <!-- 本文 --------------------------------------------------------------------> <div class=flex_inner id="head"> ～～～ ここにページの本文を書く ～～～ > <a href="#head">このページの先頭へ戻る</a> <br /> <br /> <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false" >Tweet</a> </div> <!-- 終了 --------------------------------------------------------------------> </div> <div class=flex_bottom><script>WriteHtml("/contents/flex_bottom.html");</script></div> </div> <div class=flex_right><script>WriteHtml("/contents/flex_right.html");</script></div> </div> </div> </div> </body> </html>
<head>部分は普通なので飛ばして
<body>について説明する
基本構造は以下の通りで
これはどのページのHTMLも
同じである
<body>
<div class=flex_container>
<div class=flex_left><script>WriteHtml("/contents/flex_left.html");</script></div>
<div class=flex_column>
<div class=flex_top><script>WriteHtml("/contents/flex_top.html");</script></div>
<div class=flex_row>
<div class=flex_column>
<div class=flex_main>
<div class=flex_inner id="head">
～～～ ページ本文 ～～～
</div>
</div>
<div class=flex_bottom><script>WriteHtml("/contents/flex_bottom.html");</script></div>
</div>
<div class=flex_right><script>WriteHtml("/contents/flex_right.html");</script></div>
</div>
</div>
</div>
</body>
divタグでコンテナとボックスを
入れ子で定義している
分割方向が縦と横で変化する部分は
それぞれの分割用コンテナで入れ子にする
そして本文以外の各ボックスは
常に同じ内容が表示されるため
内容をスクリプトで表示している
今回の例では
ヘッダー、フッター、左側サイドバー、
右側サイドバーがそれにあたる
WriteHtml()という関数は
サイト内のHTML文書のパスを
引数として受け取り
それをその場所に表示する
<script> WriteHtml("サイト内HTMLパス"); </script>
とすることで
このページ以外の
他のHTML文書を表示するのだ
それでは
ソースコードを見てくれ
function WriteHtml(path) {
var url = "http://" + document.domain + path;
var data = "読み込み失敗！";
var http = new XMLHttpRequest();
http.open("GET", url, false);
http.onreadystatechange = function () {
data = http.responseText;
}
http.send(null);
document.write(data);
}
たったこれだけだ
ネット検索して
やり方を調べただけなので
詳しいことは良く分からないが
XMLHttpRequestというオブジェクトが
面倒臭いことを
全部やってくれるようだ
以上です。
