<dl>
<dt>ある日のスケジュール</dt>
<dd>
<ol>
<li><dl>
<dt>9:00</dt>
<dd><dl>
<dt>出社・メールチェック</dt>
<dd>フレックスタイムを導入しているので、10時までに出社すればいいのですが、私のモットーは早く来て早く帰る！今日やる作業などをまとめる時間として使っています。</dd>
</dl></dd>
</dl></li>
<li><dl>
<dt>10:00</dt>
<dd><dl>
<dt>朝会</dt>
<dd>プロジェクト内で本日行う作業について打ち合わせ。お客様から優先されている依頼に応えるにはどう動けばよいか検討したり、メンバーの進捗を確認するのもこの時間です。</dd>
</dl></dd>
</dl></li>
<li><dl>
<dt>10:30</dt>
<dd><dl>
<dt>レビュー業務</dt>
<dd>昨日中に自分に割り当てられたプロジェクトの改修資材レビューを行います。私も発展途上なので、他のスタッフの改修から非常に勉強させられることが多いです。</dd>
</dl></dd>
</dl></li>
<li><dl>
<dt>12:00</dt>
<dd><dl>
<dt>お昼休み</dt>
<dd>昼ごはんを食べたら空いた時間を使って社内メンバーと持参してきたボードゲームで遊ぶことが多いです。自然と会話が生まれていい息抜きになっています。</dd>
</dl></dd>
</dl></li>
<li><dl>
<dt>13:00</dt>
<dd><dl>
<dt>実装作業</dt>
<dd>午後からは朝会時に確認した優先順に、実装・検証作業を行います。</dd>
</dl></dd>
</dl></li>
<li><dl>
<dt>18:00</dt>
<dd><dl>
<dt>退社</dt>
<dd>よほど急ぎの作業がない場合は定時退社を心がけてます。</dd>
</dl></dd>
</dl></li>
</ol>
</dd>
</dl>*{
margin:0;
padding:0;
}
body{
font-size:13px;
background:#44a0ae;
&>dl{
margin:1em auto;
padding:1em;
width:90%;
background:linear-gradient(-45deg,white 50%, #eee 50%,white);
background-size:8px 8px;
box-shadow:0 0 8px #fff;
&>dt{
margin:0;
padding:.6em 0;
font-size:20px;
font-weight:bold;
text-align:center;
position:relative;
background:#fff;
border:1px solid #333;
&::after{
content:"";
width:1px;
height:50px;
background:#333;
position:absolute;
top:100%;
left:50%;
}
}
&>dd{
padding:48px 0 0;
ol{
list-style:none;
position:relative;
li{
width:50%;
position:relative;
left:50%;
&::before{
content:"";
width:1px;
height:100%;
position:absolute;
top:0;
left:0;
background:#333;
}
&>dl{
&>dt{
font-size:40px;
font-weight:100;
font-family:'Lato';
font-style:italic;
line-height:44px;
position:absolute;
right:calc(100% + .6em);
}
&>dd dt{
margin:0 0 1em 20px;
padding:.4em .6em;
font-size:18px;
font-weight:700;
position:relative;
background:#fff;
border:1px solid #333;
&::before{
content:"";
width:20px;
height:1px;
position:absolute;
top:20px;
right:100%;
background:#333;
}
&::after{
content:"";
width:13px;
height:13px;
position:absolute;
top:13px;
left:-28px;
border:1px solid #333;
background:#fff;
border-radius:50%;
z-index:2;
}
}
&>dd dd{
padding:0 0 2em 20px;
}
}
&:nth-child(2n){
left:0;
&::before{
left:100%;
}
&>dl{
&>dt{
right:auto;
left:calc(100% + .6em);
}
&>dd dt{
margin:0 20px 1em 0;
text-align:right;
&::before{
right:auto;
left:calc(100% + 1px);
}
&::after{
left:auto;
right:-29px;
}
}
&>dd dd{
padding:0 20px 2em 0;
text-align:right;
}
}
}
&:last-child::before{
height:22px;
}
}
}
}
}
}
@media screen and (max-width: 640px){
body{
font-size:12px;
&>dl{
padding:1em;
width:90%;
&>dt{
margin:0;
padding:.5em 0;
font-size:15px;
&::after{
content:"";
height:26px;
left:59px;
}
}
&>dd{
padding:24px 0 0;
ol{
li{
width:calc(100% - 60px);
left:60px;
&::before{
content:"";
}
&>dl{
&>dt{
font-size:20px;
line-height:30px;
}
&>dd dt{
padding:.6em;
font-size:13px;
font-weight:400;
line-height:1.333;
&::before{
top:15px;
}
&::after{
content:"";
width:9px;
height:9px;
top:10px;
left:-26px;
}
}
}
&:nth-child(2n){
left:60px;
&::before{
left:0;
}
&>dl{
&>dt{
right:calc(100% + .6em);
left:auto;
}
&>dd dt{
margin:0 0 1em 20px;
text-align:left;
&::before{
right:calc(100% + 1px);
left:auto;
}
&::after{
left:-26px;
right:auto;
}
}
&>dd dd{
padding:0 0 2em 20px;
text-align:left;
}
}
}
}
}
}
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.