勉強したことのメモ

webプログラマが勉強したことのメモ。

レスポンシブ対応で右カラムのコンテンツを上に表示させたい

   

レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTMLを上から書いていくと最初に左カラム部分の作成し、次に右カラム部分を書くことになる。ただ、スマホで閲覧した際に右カラム部分を上部に、左カラム部分を下部に表示させたかった。以下に方法をメモ。

 

HTML部分

 

CSS

HTMLソースを見た限りだと.rightが左にきそうだが、CSSのorderを指定することで順序を決められる。ディスプレイ横幅が700px以下になるとそれが解除され、HTMLソースどおり.rightが上に来る。

 - CSS

  関連記事

cssのcontent

テキストが書かれているけど、firebugで要素を見ても 書かれていない。かとい ...

上部に固定されたヘッダーメニューの作成

■やりたい事 ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...

firebugでCSSパスをコピー

要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...

CSSでセンターリング

<center></center>でセンターリングが出来 ...

jQueryのCSS変更

jQueryでCSSを触る際、 $("#aaa").css('height',' ...

CSSでfloatの解除

CSSでfloatがかかっているところを解除したかったけど、 やり方が分からなか ...

CSSでマウスカーソルの変更

マウスカーソルはCSSで任意に決められるみたい。 リンク時に一律させた方がよいと ...

LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...

Bootstrapを使用したデザインテンプレート

Bootstrapを使用してもデザインのセンス無いし、 と思っていいものはないか ...

CSSでスタイルの優先

1つのファイルに対して複数スタイルが指定されている、 ということがたまにある。 ...