伝えたいことがあるから

ウエブかねたけ丸

2018年12月公開ページの雛型

このページは、2018年12月公開かねたけ丸ホームページの雛型です。下の方に制作メモが書いてあること以外は、ほぼホームページと同じ内容です。
※ホームに戻る場合はここをクリック


試作ページ


運営サイト


協力サイト・ブログ

アクセスマップ

当社は架空会社ですので社屋等は存在しません。現在のところ、当社社員が所有している田んぼを仮の所在地としております。

近隣地図

ストリートビュー

背景画像の設置をレスポンシブに

今回はheaderについて
box-sizing: border-box;
width: 100%;
height: 100%;
background-image: url(../images/bg.jpg);
background-size: cover;
background-position: center;

background-size: cover;で縦横の比率そのままに領域全体をカバーする。

background-position: center;で、写真を上下とも中央に。そのほかにbackground-position: 25% 75%;とかright 35% bottom 45%;などの指定も可。

headerに下からスクロールしてくる#div1について

ただz-index: 10;にしてもだめだった。

position: relative; z-index: 10;にすると無事にロゴ等より上にかぶさってきた。

なお、その後headerからfooterまで全体をdiv id="wrapper"で包み、#wrapperについてposition: relative; z-index: 10;を指定した。

リンクボタン全体がリンクになるようにする

最初にaについてdisplay: block;にしないと文字の分だけしかクリックできない。(インライン要素だから)

nav liについて、height: 45px; line-height: 45px; font-size: 16px;を指定するとボタン全体がクリックできるようになる。heightとline-heightが同じになっていることが大事。paddingは0にしておく。

各サイト画像の整列(display: flex;で)

#div2の中に3つの.div2-inについて
width: 100%;
display: flex;
flex-flow: row(横に並ぶ) wrap(行変えあり);
を指定。しかしそれだけでは全体が左寄りになる。

imgをfigureタグで囲んでそのfigureに
text-align: center;
width: 100%;(メディアクエリで50%、33%と指定)
margin: 1em 0;
画像が大きくなりすぎたので↓
画像#div2 img.pageについて、width: 80%; height: auto;を指定。これでOKと思われる。

モーダルウインドウColorbox設置

(※最終的にこのページではColorboxは使用していません。)

Colorboxで指定のURLをオーバーレイ表示するサンプル2参照して設置

head内に、ColorboxのCSSを読み込む記述一行、jQueryとColorboxのスクリプトを読み込む記述三行、Colorboxの適用対象の指定とオプションの記述一行の計5行を記述。

htmlの当該箇所に、display:noneとinline_contentを記述。

→しかしdiv style="display:none"でなく、div id="display-none"にして、display:noneはこのhtmlのcssに記述するように変更した。

重要:モーダルウインドウにcss効かせたいときは、要素名として#colorboxを使う。デベロッパーツールで発見!!

重要:モーダルウインドウの幅や高さについては上の5行のうち一番下のスクリプトで指定できた!