隙間感覚とレスポンシブ　

商品説明とかになると、文字と写真の貼り付けがおおくなるけど

横いっぱいに文字が広がっていて見にくかった…

 

❶max-width:900px;
❷margin-right:auto;
❸margin-left:auto;

 

を追加で解決。（widthのみだとレスポンシブ未対応）

www.aiship.jp

あとで試したいCSS

liginc.co.jp

 

このサイトで紹介されていたレスポンシブ対応のCSSとjQuery

tympanus.net

 

モバイルデバイスも対応検討しなきゃいけないよなー。

tympanus.net

このcodropsさんは素晴らしいですな。

3 YEARS OF CODROPSもあとでチェックしておこう。

 

 

CSSでJSのhide（要素の表示・非表示）の動き

沿革部分を作成したいなーと思って作成

 

JSのhideを利用してる人が多いけど、JS恐怖症のためCSSで動作する事例を探す。

saruwakakun.com

 

ここで、ボタンプッシュによる要素表示非表示を設定

.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

ボタン要素は不要だったので削除。文字のみに変更

 

年代・詳細を<dt><dl><dd>で横並びで列挙

html-coding.co.jp

ちゃんと<dd>複数時に<dd>のはじめがそろってるー！やった。

でも左寄せできてない。

ddのCSSに　text-align: left;   を追加。解決。