xhml・html

レスポンシブWebデザイン 1カラムトップメニュー有り 現在位置

2019年03月20日
ネットビジネス便利ツール】のモバイル対応、1カラムでトップにメニューバーがあるケースです。
とは言っても、2カラムで左メニューがある場合とさほど変わりません。

マニュアル画面がこのタイプです。
このタイプは今までも1カラムで、上部にメニュー(ナビ)を表示していました。マニュアルなので説明部分の画面を広く取っていました。

引き続き全ての端末で1カラム表示にします。ただしPCととタブレットは幅768x、スマートフォンは画面一杯に表示にします。
左がPCとタブレット、右がスマートフォンです。
写真 写真

実際の画面です。
写真

2カラムページと同様に、スクロールしてもトップメニューを常に上部に表示します。
写真
レスポンシブWebデザイン 2カラム左メニュー有り 固定


時々自分が読んでいる箇所が文章内でどこに位置しているのかわかりにくい事があるので、現在位置がわかる一覧の表示を加えてみます。
写真
トップメニューの右側に【⇒項目】(矢印の向きが反対ですが)と表示して、クリックすると開いているページのhタグの一覧を表示し、現在位置を背景色を変えて表示します。スクロールに応じて背景色も移動させます。
hタグの一覧はリンクになっていて、idが設定されているhタグへはクリックで遷移します。

メニューの書き方や固定方法は2カラムと同じです。

現在ページのhタグはPHPから取得してリンク付きの一覧にしています。

スクロールに応じて該当するhタグ一覧の背景を変えるには、jQueryを使ってスクロールのたびに現在位置を取得します。

【jQuery】シングルページでナビゲーションに現在地を表示するを思いっきり参考して作りました。本当にありがとうございます。

ほとんどそのまま【jQuery】シングルページでナビゲーションに現在地を表示するのソースを利用させていただいています。

ネットビジネス便利ツール】ではトップメニューを常に上部に表示するので、それを考慮した位置にしないとトップメニュー分ずれてしまいます。

トップメニューの高さは変化するかもしれないので、その時の値を取得します。
jQueryでプラグインを使わずにそれなりにちゃんとしたスムーススクロールを実装するを参考にしました。
var down = $('#top_bar').outerHeight();
で取得できます。

参考ばかりです。はい、JavaScriptは苦手です。

メニューの高さ分の調整を【jQuery】シングルページでナビゲーションに現在地を表示するに加えたソースです。
idなどもサイトに合わせて変更しています。

jQueryを使っているので、下のJavaScriptを読み込む前に、jQueryを読み込んでおきます。

JavaScript --------------------------------------------
$(function() {
// hタグ一覧のaタグ(一覧はright-content内にあります)
var navLink = $('#right-content a');

// 各項目のページ上部からの開始位置と終了位置を配列に格納
var contentsArr = new Array();
for (var i = 0; i < navLink.length; i++) {
// 項目のIDを取得
var targetContents = navLink.eq(i).attr('href');
// ページ内リンクだけ位置を特定
if(targetContents.charAt(0) == '#') {
// ページ上部からコンテンツの開始位置までの距離を取得
var targetContentsTop = $(targetContents).offset().top;

// ページ上部からコンテンツの終了位置までの距離を取得
var targetContentsBottom = targetContentsTop + $(targetContents).outerHeight(true) - 1;

// 配列に格納
contentsArr[i] = [targetContentsTop, targetContentsBottom]
}
};

// 現在地をチェックする
function currentCheck() {
// 現在のスクロール位置を取得
var windowScrolltop = $(window).scrollTop();
for (var i = 0; i < contentsArr.length; i++) {
// 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる
if(contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop) {
// 開始位置と終了位置の間にある場合、ナビゲーションにclass="current"をつける
navLink.removeClass('current');
navLink.eq(i).addClass('current');
i == contentsArr.length;
}
};
}

// ページ読み込み時とスクロール時に、現在地をチェックする
$(window).on('load scroll', function() {
currentCheck();
});

// ナビゲーションをクリックした時のスムーズスクロール
navLink.click(function() {
//トップバーの高さを取得
var down = $('#top_bar').outerHeight();
$('html,body').animate({scrollTop: $($(this).attr('href')).offset().top-down}, 300);
return false;
})
});
------------------------------------------------------

スクロールのたびにaタグにcurrentクラスを設定してくれているので、後はcssで現在位置を示すcurrentのプロパティを設定すればOKです。

css ---------------------------------------------------
#right-content a.current {
background-color: #b0e0e6;

}
------------------------------------------------------

【jQuery】シングルページでナビゲーションに現在地を表示する、感謝いたします!!

xhml・html

レスポンシブWebデザイン 2カラム左メニュー有り 固定

2019年03月19日
ネットビジネス便利ツール】のモバイル対応の続きです。
レスポンシブWebデザイン 2カラム左メニューあり その2で作ったメニューバー(ナビ)を、スクロールしても画面上部に常に表示されるようにします。

写真 写真

実際の画面です。スクロールしても、常に左メニュー、Home、Topが表示されています。
写真

スクロール前の画面です。
写真


ヘッダー・ナビゲーションを固定表示させるアイデア5つの途中から固定表示を参考にしました。ありがとうございます!

レスポンシブWebデザイン 2カラム左メニューあり その2のcss
/* スマートフォンだけ画面最上部までスクロール後固定 */
/* トップメニュー固定の項目で説明します */
#left_menu.fixed{
position: fixed;
top: 0;
}
が関係してきます。

$(function(){
var _window = $(window),
_header = $('#left_menu'),
heroBottom;

_window.on('scroll',function(){
heroBottom = $('#header').height();
if(_window.scrollTop() > heroBottom){
_header.addClass('fixed');
}
else{
_header.removeClass('fixed');
}
});

_window.trigger('scroll');
});

jQueryを使っているので、まずjQueryを読み込む必要があります。
レスポンシブWebデザイン チェック・プルダウン表示非表示のプルダウンと同じです。

これで2カラムは終わりです。
次は1カラムでトップメニューがある場合です。と言っても左メニューと見た目はそんなに変わりません。

xhml・html

レスポンシブWebデザイン 2カラム左メニュー有り メニュー

2019年03月18日
ネットビジネス便利ツール】のモバイル対応の続きです。いよいよ肝のメニュー部分です。
レスポンシブWebデザイン チェック・プルダウン表示非表示のチェックボックで表示非表示を切り替える方法を使います。


PCとタブレットは今までの様に2カラムで表示します。
写真

実際の画面です。
写真


スマートフォンでは左メニューの内容は隠しておき、必要に応じて表示されるようにします。横長のバーに左メニューの内容を表示するリンクを表示、クリックすると左メニューの内容が表示されます。
写真

実際の画面です。左メニューの【⇒メニュー】をクリックすると、メインコンテンツの上にメニューが表示されます。よくハンバーガーメニュー(三のように横線が3本あるアイコン)で表現されています。もっとはっきりメニューと表示してみました。
写真 写真
メニューの横についでにHomeとTopも表示しました。

CSSだけで簡単!ハンバーガーメニューの作り方(スマホ対応)を参考にしました。ありがとうございます。
ハンバーガーメニューの代わりに【⇒メニュー】を表示、
HomeとTopのリンクを表示、
Closeをクリックしてもメニューを閉じるように、
iOSでスクロールがツイーット(慣性スクロールと言うらしい)いかないので、そのためのプロパティも加えています。

メニューの表示非表示の切り替えは、レスポンシブWebデザイン チェック・プルダウン表示非表示のチェックボックスの方法を使います。

下のhtmlにあるid:menu-inputのチェックボックスへのチェックの有り無しで表示非表示を切り替えます。
チェックボックスに関連付けられたラベルが3つあります。
id:menu-open
id:menu-closs
id:menu-close-x
の3つです。
チェックボックスはcssで非表示に設定しているので、実際の操作はこれら3つのラベルで行います。

id:menu-open ⇒ 【⇒メニュー】をクリックすると画面に半透明なグレーカバーを表示、その上にid:menu-contentのdiv内を表示します。
id:menu-closs ⇒ メニュー表示時に右のグレー部分をクリックするとid:menu-contentのdiv内を非表示にします。
id:menu-close-x ⇒ メニュー内の【Close】をクリックするとid:menu-contentのdiv内を非表示にします。
これらは全てcssでコーディングされています。

html -------------------------------------------------
<nav id="menu">
<div id="menu-drawer">
<!-- チェックボックスを非表示 -->
<input type="checkbox" id="menu-input" class="menu-unshown">
<!-- forでチェックボックスに関連付ける -->
<label id="menu-open" for="menu-input">メニュー</label>
<span class="nav"><a href="https://benri-tools.net/">Home</a></span>
<span class="nav"><a href="#pagetop">Top↑</a></span>
<!-- forでチェックボックスに関連付ける -->
<label id="menu-close" for="menu-input" class="menu-unshown"></label>
<div id="menu-content">
<!-- forでチェックボックスに関連付ける -->
<label id="menu-close-x" for="menu-input" class="menu-unshown">Close</label>
メニューの内容
</div>
</div>
</nav>
------------------------------------------------------

左メニューはcssの初期化が簡単になるように、モバイルファーストとPCファーストが混在しています。
css ---------------------------------------------------
/* ↓ +++++ PCファースト +++++ */
#menu {
z-index: 99; /* モバイル時フッタが上に来るのを防ぐため */
float: left;
width: 210px;
}

@media (max-width: 767px) {
/* スマートフォンだけ画面上部へ表示 */
#menu {
width: 100%;
height: 30px;
position: absolute;
top: 120px;
}

/* スマートフォンだけ画面最上部までスクロール後固定 */
/* トップメニュー固定の項目で説明します */
#left_menu.fixed{
position: fixed;
top: 0;
}
}
/* ↑ +++++ PCファースト +++++ */

/* ↓ +++++ モバイルファースト +++++ */
@media (min-width: 768px) {
/* PC・タブレットの時は非表示 */
.nav {
display: none;
}
}
/* ↑ +++++ モバイルファースト +++++ */


/* ↓ +++++ PCファースト +++++ */
.menu-unshown {
display:none;
}

/* ⇒メニューのプロパティ */
#menu-open {
display:none;
}

/* メニューの中身 */
#menu-content {
padding-bottom: 20px;
}

/* Closeのプロパティ */
#menu-close-x {
display: none;
}

@media (max-width: 767px) {
#menu-drawer {
position: relative;
}

/* ⇒メニューのプロパティ */
#menu-open {
display: inline-block;
height: 22px;
vertical-align: middle;
cursor: pointer;
background: url(⇒の画像へのパス);
background-repeat: no-repeat;
background-position: left center;
}

/* メニュー後ろのグレーカバーのプロパティ */
#menu-close {
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}

/* Closeのプロパティ */
#menu-close-x {
display: block;
}

/* メニュー中身のプロパティ */
#menu-content {
/* ↓ iOSでの慣性スクロールにするため */
overflow: scroll;
-webkit-overflow-scrolling: touch;
/* ↑ */

position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 90%;
max-width: 330px;
height: 100%;
background: #FFFFFF;
transition: .3s ease-in-out; /*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%); /*左に隠しておく*/
}

/* id=menu-inputにチェックが入ったらid=left-closeに適用するプロパティ */
#menu-input:checked ~ #left-close {
display: block; /*カバーを表示*/
opacity: .5;
}

/* id=menu-inputにチェックが入ったらid=left-contentに適用するプロパティ */
#menu-input:checked ~ #left-content {
-webkit-transform: translateX(0%);
transform: translateX(0%); /*中身を表示*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/* id=menu-inputにチェックが入ったらid=left-close-xに適用するプロパティ */
#menu-input:checked ~ #left-close-x {
display: block;
opacity: .5;
}
}
/* ↑ +++++ PCファースト +++++ */
------------------------------------------------------

PCとタブレットでは常にメニューを表示、スマートフォンでは状況に応じて切り替えをcssで書くのに時間がかかりました。
CSSだけで簡単!ハンバーガーメニューの作り方(スマホ対応)ではWordpressでの書き方が紹介されています。やっぱりWordpressだと簡単にできるようですね。
Wordpressをお使いの方はスッと適用してください。私は勉強、勉強。

時間がかかってしまいましたが、サイトのコンテンツの内容を大幅書き換え予定なので、もしかしたら、その時また形式を変えるかもしれません。左右の空いている箇所にメニューを置いて本文の幅を広げることも考えています。
内容を書き換えてみて、より読みやすいレイアウトにする予定です。

xhml・html

レスポンシブWebデザイン チェック・プルダウン表示非表示

2019年03月17日
ネットビジネス便利ツール】のモバイル対応の続きです。
今日は本命のメニューを書く予定だったのですが、先にチェックボックスを使って表示非表示を切り替える方法を書いた方がわかりやすいと思うので、順番を入れ替えます。

チェックボックスにチェックを入れると文字や画像が表示され、
チェックを外すと文字や画像が非表示になる、
こういう動きをご覧になったことがあると思います。
ネットビジネス便利ツール お問い合わせの【ユーザーです】をチェックしてみてください(問い合わせは送らないでくださいね)。
チェックが入ると入力項目が追加され、チェックを外すと入力項目が消えます。
cssだけで書くことができます。

html -------------------------------------------------
<input type="checkbox" value="chk" name="inputchk" id="inputchk"> チェック

<!-- ↓表示非表示を切り替える部分は、チェックボックスより下に配置 -->
<!-- 上では切り替えられない -->
<div id="inputk">
<input type="text" value="" name="data" id="data">
</div>
------------------------------------------------------

css ---------------------------------------------------
/* 初めは非表示 */
#inputk {
display: none;
}

/* チェックボックスinputchkにチェックが入ったらinputkを表示 */
#inputchk:checked ~ #inputk {
display: block;
}
------------------------------------------------------

上は【チェック】をただの文字として表示していますが、ラベルとして表示してチェックボックスと関連付けることもできます。
こうすると【チェック】という文字のクリックでもチェックボックスを操作できます。

html -------------------------------------------------
<input type="checkbox" value="chk" name="inputchk" id="inputchk">
<label id="inputopen" for="inputchk">チェック</label>
<div id="inputk">
<input type="text" value="" name="data" id="data">
</div>
------------------------------------------------------

cssは同じです。


更にチェックボックスを非表示にして、【チェック】のクリックで表示非表示を切り替えることもできます。

htmlは1つ上と同じです。

css ---------------------------------------------------
/* 初めは非表示 */
#inputk {
display: none;
}

/* チェックボックスinputchkを非表示 */
#inputchk {
display: none;
}

/* チェックボックスinputchkにチェックが入ったらinputkを表示 */
#inputchk:checked ~ #inputk {
display: block;
}
------------------------------------------------------


JavaScriptは使わずcssだけで書けるし便利です。【ネットビジネス便利ツール】でも色々な所で使っています。



プルダウンで同じような事ができないかと思ったのですが、こちらはJavaScriptを書かないとだめなようです。
jQueryを使う方法です。下のJavaScriptを読み込む前にjQueryを先に読み込んでおかないと動きません。
JavaScriptはhtmlの最後に読み込むのがいいらしいですが、色々な所で読み込んでいるとわけがわからなくなり非効率なので、私はいつも外部ファイルに保存してhtmlのヘッダ部分でまとめて読み込んでいます。
jQueryファイルをjquery.js、
下のJavaScriptをjavascript.jsに保存したとすると、htmlのヘッダにパスを追加します。
jQueryはCDNサーバーへのリンクでも大丈夫です。私はいつの間にかバージョンアップしていてある日突然動かなくなったら焦るので、借りているレンタルサーバーへファイルを置いています。

htmlヘッダ部分 ---------------------------------------
<head>
 ・・・
<meta http-equiv="content-script-type" content="text/javascript">
<!-- パスは環境に合わせて変更してください -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
------------------------------------------------------


html -------------------------------------------------
<select name="sort" id="sort">
<option value=""></option>
<option value="val1">値1</option>
<option value="val2">値2</option>
<option value="val3">値3</option>
</select>
<div id="val1">値1</div>
<div id="val2">値2</div>
------------------------------------------------------

css ---------------------------------------------------
#val1 {
display: none;
}

#val2 {
display: none;
}
------------------------------------------------------

JavaScript --------------------------------------------
$(function(){
$('#sort').on('change', function(){
if($(this).val() === 'val1'){
$('#val1').show();
$('#val2').hide();
}
else{
if($(this).val() === 'val2'){
$('#val1').hide();
$('#val2').show();
}
else{
$('#val1').hide();
$('#val2').hide();
}
}
});
});
------------------------------------------------------

値1を選択すると値1と表示され、
値2を選択すると値2と表示され、
値3を選択すると何も表示されません。


次回こそ肝の部分、メニューをまとめます。
今回のチェックボックスによる表示非表示切り替えを使います。

xhml・html

レスポンシブWebデザイン 2カラムメニュー有り Top Home

2019年03月16日
ネットビジネス便利ツール】のモバイル対応、二番目に簡単そうな2カラムページに移ります。
メインコンテンツの左側にメニュー一覧が表示されるページです。

トップページ、各コンテンツページ、更新履歴、お問い合わせ入力画面などがこのタイプです。

PCとタブレットは今までの様に2カラムにします。
写真

スマートフォンでは左メニューの内容は隠しておき、必要に応じて表示されるようにします。横長のバーに左メニューの内容を表示するリンクを表示、クリックすると左メニューの内容が表示されます。
写真


メニューの前に、今まではTopへのリンクをページの一番下に表示していましたが、これを機に右下に円で表示するように変更してみました。

実際の画面です。
写真

これはPCとタブレットの時にだけ表示します。

円はcssで書いています。CSSで円を描く方法:文字を中央配置するには?枠線のつけ方は?を参考にしました。
サルワカには参考になる有益なコンテンツが沢山あります!

html -------------------------------------------------
<body>
<!-- ページの一番上に目印になるタグを配置 -->
<div name="pagetop" id="pagetop"></div>
ページの中身

<div class="page_top">
<a href="#pagetop">Top↑</a>
</div>
------------------------------------------------------

css ---------------------------------------------------
.page_top {
z-index: 2; /* フッタが上に来るのを防ぐため */
display: none;
}

@media (min-width: 768px) {
.page_top {
position: fixed;
bottom: 20px;
right: 10px;
/* 円を描画 */
width: 70px;
height: 70px;
border-radius: 50px;
/* 中央に文字を表示 */
line-height: 70px;
text-align: center;
vertical-align: middle;
display: block;
background-color: #808080;
opacity: 0.5; /* 透明度 */
margin: 0px;
padding: 0px;
}

.page_top a {
color: white;
text-decoration: none;
}

.page_top a:hover {
color: white;
text-decoration: underline;
}
}

/* フッター */
#footer {
z-index: 1; /* モバイル時フッタが上に来るのを防ぐため */
}
------------------------------------------------------

ページを一番下までスクロールするとリンクがフッタに隠れてしまうので、.page_topと#footerにz-indexを設定しました。数字が大きいほど上に表示されます。


同じ要領で左側にHomeリンクも表示してみました。
写真


次はメニューについてまとめます。

xhml・html

レスポンシブWebデザイン 1カラムメニュー無し

2019年03月15日
ネットビジネス便利ツール】のモバイル対応、一番単純な1カラムメニューなしページです。
PayPalオートメール
PayPal毎度ありがとうメール
銀行振込サンクスメール
Webページコントローラー
の4ページが該当します。

左がPCとタブレット、右がスマートフォンを想定した画面です。
写真 写真

全体枠はスマートフォンの時は画面いっぱいに表示させるけど、タブレットとPCでは(横幅768px以上)の時は左右に余白を作ります。
元々のページが横幅800px固定で作っていたので、それを少し狭くしてタブレット以上では余白を表示するように引き継ぎました。
ページの内容全てを青枠の中に入れて、枠の幅をブラウザの幅に応じて変えています。青枠のidがcontainerだとすると、htmlとcssは次のようになります。

html -------------------------------------------------
<div id="container">
ヘッダ
本文
フッタ
etc.
</div>
------------------------------------------------------

css -------------------------------------------------
#container {
width: 100%;
}

@media (min-width: 768px) {
#container {
width: 768px;
}
}
------------------------------------------------------

#container ・・・
は全ての場合に適用されます。

@media (min-width: 768px) ・・・
はブラウザの横幅が768px以上の場合に適用され、全ての場合に適用する幅100%(width: 100%)の設定を上書きしています。


4つのページのヘッダは画像がヘッダ全体にあるのではなく、小さな画像を右下に配しています。
背景全体に画像を表示している場合は、表示幅に応じて画像の大きさを変えることができますが、小さな画像ではその設定は見つけられなかったのでブレイクポイントで大きさを切り替えました。

ブラウザの大きさに応じて、画像の大きさを%で指定しています。
他にもpaddingや文字の大きさも変えています。

html -------------------------------------------------
<div id="head1">
ヘッダの内容
</div>
------------------------------------------------------

css -------------------------------------------------
#head1 {
background: url(画像へのパス) no-repeat #f5f5f5;
background-size: 20%;
background-position: right bottom;
}

@media (min-width: 600px) {
#head1 {
font-size: 25px;
}
}

@media (min-width: 1025px) {
#head1 {
font-size: 29px;
padding: 20px;
background: url(画像へのパス) no-repeat #f5f5f5;
background-position: right bottom;
}
}
------------------------------------------------------

#head1 ・・・
は全ての場合に適用されます。

@media (min-width: 600px) ・・・
はブラウザの横幅が600px~1024pxの場合に適用され、全ての場合に適用するスタイルと被っていたら上書きされます。

@media (min-width: 1025px) ・・・
はブラウザの横幅が1025px以上の場合に適用され、全ての場合とブラウザの横幅が600px~1024pxの場合に適用するスタイルと被っていたら上書きされます。

つまり、
ブラウザの横幅が1024px以下の場合、画像は20%の大きさでヘッダ領域の右下に表示され、
ブラウザの横幅が1025px以上の場合、画像はそのままの大きさでヘッダ領域の右下に表示されます。

文字の大きさや、paddingは
ブラウザの横幅が600px~1024pxの場合、文字の大きさ25px、
ブラウザの横幅が1025px以上の場合、文字の大きさ29px、paddingは20px
になります。

細かな調整はいっぱいありますが、大きくはこれだけです。

xhml・html

モバイル対応が終わりました

2019年03月13日
3月3日に【ネットビジネス便利ツール】をモバイル対応にしますと書きましたが、対応し始めてから約10日、やっと完成しました。
html5に対応させている期間も入れると約2週間でした。JavaScriptのソースも整理整頓していました。

何をしているのか自分の備忘録も兼ねて、ブログにアップするつもりでしたが、作業し始めたら途中で手を止める気になれず、黙々と作業を続けてしまいました。

また途中でまとめる気が失せるかもしれませんが、忘れないうちに少しずつでもまとめる予定です(あくまで予定)。
引き続き販売しているツールもモバイル対応にしたいし、本当にやりたいのはサイトの内容の大幅書き換えなので、本当に途中やめになる予感大です。


ネットビジネス便利ツール】は大きく
・トップページ、コンテンツページなど(2カラム)
・ツールのマニュアルページ(1カラム)
・ツールの紹介ページ(1カラム)
に分けられます。
背景画像、表、入力フォームなどの装飾や配置などcssの視点で見るともっと細かく分けられるのですが、構造の視点では上の3パターンです。


ブレイクポイントについて。
やっとサイトをモバイル対応にしていますでモバイルファースト、ブレイクポイントは600pxにすると書きました。

あれから1025pxをブレイクポイントにして、モバイル端末とPCに分ける想定でコーディングしていました。
ざっとできた時点で、父母の家にあるタブレット端末で確認してみました。
タブレットの大きさはPCに入れた方が操作しやすいと判断、ブレイクポイントを768pxにすることにしました。
1025pxがブレイクポイントだと、Google Crome のデベロッパーツールでも右側が随分空いていて勿体なかったのですが、実機でもやはり勿体なく、2カラムでも十分操作できることを確認しました。家族の中で一番指の太い父でも操作は十分できることも確認しました。

ブレイクポイントは画面構成によってどこに設定するのが使いやすいか変わってくると思いますが、【ネットビジネス便利ツール】の構造は単純なので、スマートフォンとその他に分けるのが操作性が良くなると判断しました。

ブレイクポイントについては、
ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選

モバイルファーストでデザインするCSSの書き方

レスポンシブCSSで使うブレイクポイントの決め方
を参考にしました。


cssについて。
ほとんどのページで使うcssと、それぞれのページで使うcssを分けることにしました。
今までは1つのファイルに記述していたのですが、モバイル対応に伴ってコーディングが増えるので、わかりやすくするために分離させます。
cssの種類は
・トップ
・コンテンツ
・ツール紹介
・マニュアル
・更新情報
・お問い合わせ
・その他幾つか
に分けました。

例えば、
コンテンツページでは、共通のcssとコンテンツ用のcssを、
マニュアルページでは、共通のcssとマニュアル用のcssを
読み込みます。

不要なcssを読み込まない、万一被っているコーディングがあっても切り離すことができるので思わぬ動作を避けることができます。


同じ要領でJavaScriptファイルも分けて読み込みます。


明日はやっとサイトをモバイル対応にしていますで既にできたと書いた、一番単純な1カラム、メニューなしページのまとめです。
2012年02月
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29
先月
来月
カテゴリ
検索
関連サイト
プロフィール
【ネットネーム】
みゅー

キャラクター by ツカエルサイト


【趣味】
・プログラミング
・写真
・楽器演奏
・手芸
・日曜大工
・家の中の不便を便利に
・考える
・自然科学
・猫と戯れる
・ジグソーパズル

【仕事】
・派遣社員でSE・PGやっていました。次の良い仕事がみつからないので、ビジネスへ注力しようと思っています。
・経験言語:VB6、VB.NET、PHP、Perl、JAVA、Oracle、SQLServer、PostgreSQL



【名前】
アン(足)

2014年4月22日生まれ 女の子
あだ名は くノ一
普段は普通にしゃべりますが、興奮すると『ニャ』を連発します

【趣味】
・狩
・ご飯を食べる
・ママのお手伝い

【仕事】
ママのビジネスの看板招き猫
ママの代わりにPC入力
仕事中のママの右腕を温める
ママに心配をかける
いろんな事をしでかしてママを退屈させない

RSSフィード
コメント
浴室ドアパッキンの交換
2019-03-19 23:36:47
浴室ドアパッキンの交換
2019-03-19 15:25:58
Tweet