2015-16シーズンの再来というか・・・
気が付けば2月も上旬終わりそうな勢いです。皆さん滑ってますか( ﾟДﾟ)？
年末年始は二泊三日の強行軍で秋田岩手をまたにかけーの帰省＆たざわ湖のワイドバーンでまったり楽しく滑り倒すぞーって思っていたのですが、タイトル通りの超暖冬でやきもき。いざ降雪で小躍りしていたら帰省直前で一晩中大雨ではげ山に・・・・・。
カテゴリー: 未分類
どうせやるならエッジまで(・∀・)
神保町、小川町まで30分圏内でわりと恵まれた環境の千葉県民からJターンで仙台へ戻ってきたのは良いですが、なかなか実店舗でものを見てーとかがなかなかできないことに今更気がついた自分です（笑）
他のエントリに書いたかもだけれどもこっちのプロショップはガチなので足が遠のいております（笑） 続きを読む どうせやるならエッジまで(・∀・)
さらばAS-200V、こんにちはFDR-X3000
数ヶ月遡り。書きたかったけど忙殺でとか言い訳してみる。
シーズン終わってやれるケアはやってちょいと保管。秋に帰省で使うからと引っ張り出し。
気が付けばシーズン手前・・。
どうも、管理人です。
気が付けば9月も後半。転職を機に千葉から宮城に引っ越したりと変化の年です(笑)
今シーズンからはバスツアーではなくカーシェア活用でゲレンデへゴーになるので下調べ中。早割チケットは数買わないと送料が1000円近くなので微妙だなとか色々悩ましいところです。
小一時間でいけるゲレンデが多いのは嬉しいなーと。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableView</title>
<link href="css/common.css" media="all" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="header vw100">ヘッダ</div>
<div class="main vw100 flex">
<!-- 大項目1 -->
<div class="tableView flex flex_wrap text_ct">
<div class="vw50 bg01 ft_col_wht"><p class="bd_right tablePd">〇〇〇・〇</p></div>
<div class="vw25"><p class="tablePd bd_left bd_bottom">〇〇〇</p></div>
<div class="vw25"><p class="tablePd bd_left bd_bottom bd_right">〇〇〇</p></div>
<div class="vw25"><p class="tablePd bd_left bd_bottom">〇〇〇〇〇</p></div>
<div class="vw25"><p class="tablePd bd_left bd_bottom bd_right">〇〇〇〇〇〇</p></div>
<div class="vw25"><p class="tablePd bd_left bd_bottom">〇〇〇〇〇〇</p></div>
</div>
<!-- 大項目2 -->
<div class="tableView flex flex_wrap text_ct">
<div class="vw50 bg01 tablePd ft_col_wht">〇〇〇〇〇</div>
<div class="vw25"><p class="tablePd bd_bottom">〇〇〇</p></div>
<div class="vw25"><p class="tablePd bd_left bd_bottom bd_right">〇〇〇〇〇〇〇〇</p></div>
<div class="vw25"><p class="tablePd bd_bottom textOverflow" title="〇〇〇〇〇〇（〇〇〇〇〇〇）">〇〇〇〇〇（〇〇〇〇〇〇〇）</p></div>
<div class="vw25"><p class="tablePd bd_left bd_bottom bd_right">〇〇〇（〇〇〇〇〇）</p></div>
</div>
</div>
<div class="footer">フッターのはず</div>
</div>
</body>
</html>
/*簡易的にリセット*/
*{
padding: 0;
margin: 0;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
簡易設定
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.main
{
width: 1080px;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
boxレイアウト制御
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*基本レイアウト制御*/
.flex{
display: flex;
align-content: flex-start;
}
.flex_wrap{
flex-wrap: wrap;
}
/*幅制御*/
.vw100{ width: 100vw; }
.vw50{ width: 50vw; }
.vw25{ width: 25vw; }
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
コンテンツの構造制御
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*疑似tableセルの基本padding設定*/
.tablePd{
padding: 1em 0;
}
/*コンテンツセンタリング*/
.cont_ct{
margin: 0 auto;
}
/*テキストセンタリング*/
.text_ct{
text-align: center;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
装飾周り
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*背景色*/
.bg01{
background: #00bcd4;
}
.ft_col_wht{
color: #FFF;
}
/*ボーダー*/
.bd_bottom {
border-bottom: solid 0.1em #999;
}
.bd_top {
border-top: solid 0.1em #999;
}
.bd_left {
border-left: solid 0.1em #999;
}
.bd_right {
border-right: solid 0.1em #999;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
メディアクエリ周り
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*スマホでは縦並び*/
@media only screen and (max-width: 767px) {
.main.flex{
flex-direction: column;
}
.vw50{ width: 100%; }
.vw25{ width: 50%; }
}
/*全体を見渡せていないので暫定処理*/
@media only screen and (min-width: 767px) and (max-width: 1080px) {
p.textOverflow{
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
<!-- 追記 220207 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hariu_test</title>
<style type="text/css">
/*簡易的にリセット*/
*{
padding: 0;
margin: 0;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
簡易設定
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.main
{
width: 900px;
padding: 4em;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
boxレイアウト制御
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*基本レイアウト制御*/
.flex{
display: flex;
align-content: flex-start;
}
.flex_wrap{
flex-wrap: wrap;
}
/*幅制御*/
.col1{ width: 26%; }
.col2{ width: 70%; }
/*どうしても正方形がいい場合はメディアクエリで直打ち対応が無難*/
/*-------------------------------------
汎用ボーダー横並び用（flexbox) 下部と右
左と上部は別設定
-------------------------------------*/
.bd_common{
border-bottom: solid 5px #ddd;
border-right: solid 5px #ddd;
}
.bd_top{
border-top: solid 5px #ddd;
}
.bd_left{
border-left: solid 5px #ddd;
}
/*-------------------------------------
フォント周り
-------------------------------------*/
.ft_size01{
font-size: 1.7em;
}
.ft_size02{
font-size: 1.5em;
}
.text_ct{
text-align: center;
}
.fw500{
font-weight: 500;
}
.fw800{
font-weight: 800;
}
/*-------------------------------------
ボックスの配置処理
-------------------------------------*/
/*スマホでは縦並び*/
@media only screen and (max-width: 767px) {
.main{
width: 100vw;
padding: 0;
margin: 0;
}
.main.flex{
flex-direction: column;
}
.col1{ width: 100%; }
.col2{ width: 100%; }
/*縦並びなのでボーダーも変更*/
.bd_common{
border-left: solid 1px #ddd;
border-bottom: solid 1px #ddd;
border-right: solid 1px #ddd;
}
.bd_top{
border-top: solid 1px #ddd;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main cont_ct flex">
<!-- 大項目1 -->
<div class="tableView flex flex_wrap">
<div class="col1 bd_common bd_top bd_left ft_size02 text_ct">テーマ１</div>
<div class="col2 bd_common bd_top ft_size01 fw800">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div class="col1 bd_common bd_left ft_size02 text_ct">テーマ2</div>
<div class="col2 bd_common ft_size01 fw800">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div class="col1 bd_common bd_left ft_size02 text_ct">テーマ3</div>
<div class="col2 bd_common ft_size01 fw800">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
</div>
</div>
</body>
</html>