AGN Web!

どもっ。Kazです。
この時期から忘年会や新年会などで人と会う機会がいっそう増えてきますよね。
人が集まるとスマホやデジカメで写真を撮ってデータを渡す機会も多いかと思います。

撮影した写真を後になってチェックしてみると
暗かったり、悪くはないけど今ひとつだったりする写真が多くないですか？

そんな写真を約レイヤー2枚で「いい感じ」に仕上げる方法を紹介します。
この方法なら多くの写真を割と早く仕上げる事も可能です!!

では、いってみましょう!!

【修正前画像】

開いた直後です。ちょっと暗めですよねー
※今回の方法では、RGBのデータで行ってください。

【レイヤー1　スクリーン!!】

背景レイヤーをコピー＆ペーストなどで背景のコピーを作って描画モードを「スクリーン」にします。
だいぶ前に書いた事がありますが、写真を明るくします。
まだ暗いと感じる場合は、明るく感じるまでレイヤーをスクリーンで重ねていきましょう。
ただ、この「スクリーン」で重ねていくと明るくなる反面、色が薄くなっていきます。
暗い写真を明るくした場合も彩度が低い状態になります。
そこで、もう一枚背景レイヤーを使います。

【レイヤー2　オーバーレイ】

先程「もう一枚」追加したレイヤーの描画モードを「オーバーレイ」にします。
すると、黒くなるほど一気に色が濃くなり明るい所は「まっ白」く飛ぶと思います。
なので、不透明度を一旦「０%」にして徐々に上げていきます。
そうすると、薄くなっていた色がシッカリとした色になってきます。
もし、この時点で明るい部分が飛び過ぎている場合は「スクリーン」レイヤを不透明度で薄くするか
複数枚「スクリーン」レイヤーがある場合は削除するか非表示にして加減してください。

この方法で調整を行うと、トーンカーブでの調整やレベルの調整・色相彩度の調整なんかもテクニックや知識不要でできちゃいますので
アクションで各描画モードのレイヤーを作ってしまえば悩むことなく調整ができます。
最近のデジカメは色のバランスは取れていますので、色のバランス調整は必要ないことが多かと思いますが
必要な場合は、今回の調整を行って画像を統合してから「自動カラー補正」を行っても良いかと思います。

早速、手持ちの写真で試してみてください!!

teamblog_title161214

先日制作した案件で、タイムライン（過去→未来）があったんですね。
こういうのです。

timeline161214

デザインがイラレで来ていて、さてどうしましょうか、と。
もちろん画像でもOKなんですが、横長をタイムラインをスマホで見たら小さくて見えない。
かといって縦長の画像は作りたくない。※それなりに数があったので。
それじゃCSSだけで実装しましょ、とういうことになりました。

【DEMO】

やってみよう

条件

広い画面では横型、狭くなったら縦型にする
項目数は変動する
ポイントごとに目印をつける

もちろん、まず一直線を引いて、その上に絶対配置でポイントを打つのもアリだと思います。
今回は基本形を元にちょっといろいろしてみました。
けどあんまりうまくいかなかった。。。
ついでにCSSがいろいろ汚染しまくって悪い見本みたいになってます。
お目汚しですが、よかったらどうぞ。。。

基本形

HTML

<div class="timeline">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">10年後</p>
        <p class="timeline-content">Webはまだ大丈夫。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">20年後</p>
        <p class="timeline-content">スナフキンになりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>

SASS

.timeline{
    padding: 3rem 5rem;
    background-color: #f0f0f0;
    &-item{
        position: relative;
        border-left: 1px solid #000;
        padding: 0 0 30px 30px;
        &:before{
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 100%;
            background-color: #000;
            transform: translateX(-50%) translateY(-50%);
        }
        &:last-of-type{
            padding-bottom: 0;
            &:before{
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 10px 5px 0 5px;
                border-color: #000000 transparent transparent transparent;
                border-radius: 0;
                background-color: transparent;
                top: auto;
                bottom: 0;
                transform: translateX(-50%) translateY(0);
            }
        }
    }
    @media(min-width : 768px){
        display: table;
        table-layout: fixed;
        width: 100%;
        &-item{
            display: table-cell;
            vertical-align: top;
            padding: 0;
            border:{
                top: 1px solid #000;
                bottom: 0;
                left: 0;
            }
            &:last-of-type{
                padding-bottom: 0;
                text-align: right;
                &:before{
                    border-width: 5px 0 5px 10px;
                    border-color: transparent transparent transparent #000000;
                    top: 0;
                    right: 0;
                    bottom: auto;
                    left: auto;
                    transform: translateX(0) translateY(-50%);
                }

                p{
                    text-align: left;
                }
            }
        }
        &-label,
        &-content{
            transform: translateX(-50%);
            text-align: left;
            display: block;
            max-width: 70%;
        }
        &-label{
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            transform: translateX(-50%) translateY(-120%);
        }
        &-content{
            margin-top: 10px;
        }
        &-item:last-of-type &-label,
        &-item:last-of-type &-content{
            transform: translateX(50%);
            text-align: left;
            display: inline-block;
            max-width: 70%;
        }
        &-item:last-of-type &-label{
            left: auto;
            right: 0;
            transform: translateX(50%) translateY(-120%);
        }
    }
}
/* 現在地 */
.timeline-item.now:before{
    background-color: #f00;
}

やってること

そんなに難しいことはしてません。
displayを切り替えて、ボーダー引く場所を変えているだけです。
狭い画面では縦型なのでdisplay: block;でいいですね。ボーダーは左に引きました。
横型の場合は、親要素をtableに、子要素をtable-cellにしてみました。(※flexでもうまくいくかもしれません。)
それから親要素にtablelayout: fixed;を指定して均等に割ります。
文字や時間の長さに長短がある場合は子要素のwidthをパーセントで指定してあげればOKです。

目印は子要素の擬似要素で。
基本的には左上に絶対配置して、自分の大きさ分だけ移動(transform: translateX(-50%) translateY(-50%);)します。
最後の子要素だけは矢印っぽくしたいので、三角にしました。これは縦横で向きを変えてあげてくださいね。
現在地は専用のクラスを振って文字色を変えました。

【DEMO】にのっけた他のやつのコードも一応載せときますね。
本当は背景を矢印っぽくするところまで行きたかったんですけど、パッと思いつかなかったので、とりあえず今回はここまで。
年末進行でお忙しいと思いますが、みなさんお体に気をつけて頑張っていきましょう！

HTML

<h2>基本形</h2>
<div class="timeline">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">10年後</p>
        <p class="timeline-content">Webはまだ大丈夫。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">20年後</p>
        <p class="timeline-content">スナフキンになりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>

<h2>数が減っても大丈夫</h2>
<div class="timeline">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">30年後</p>
        <p class="timeline-content">煙になりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>

<h2>数が増えても大丈夫</h2>
<div class="timeline">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">10年後</p>
        <p class="timeline-content">Webはまだ大丈夫。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">20年後</p>
        <p class="timeline-content">スナフキンになりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">30年後</p>
        <p class="timeline-content">煙になりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>


<h2>ボーダー有り</h2>
<div class="timeline border-dashed">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">10年後</p>
        <p class="timeline-content">Webはまだ大丈夫。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">20年後</p>
        <p class="timeline-content">スナフキンになりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>


<h2>ストライプ背景</h2>
<div class="timeline bg-stripe">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">10年後</p>
        <p class="timeline-content">Webはまだ大丈夫。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">20年後</p>
        <p class="timeline-content">スナフキンになりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>


<h2>ストライプ背景</h2>
<div class="timeline-wrapper">
    <div class="timeline bg-arrow">
        <div class="timeline-item">
            <p class="timeline-label">10年前</p>
            <p class="timeline-content">じつはまだ学生でした。</p>
        </div>
        <div class="timeline-item now">
            <p class="timeline-label">現在</p>
            <p class="timeline-content">結構いい年です。</p>
        </div>
        <div class="timeline-item">
            <p class="timeline-label">10年後</p>
            <p class="timeline-content">Webはまだ大丈夫。</p>
        </div>
        <div class="timeline-item">
            <p class="timeline-label">20年後</p>
            <p class="timeline-content">スナフキンになりたい。</p>
        </div>
        <div class="timeline-item">
            <p class="timeline-label">その後</p>
            <p class="timeline-content">仙人。</p>
        </div>
    </div>
</div>

SASS

.timeline{
    padding: 3rem 5rem;
    background-color: #f0f0f0;
    &-item{
        position: relative;
        border-left: 1px solid #000;
        padding: 0 0 30px 30px;
        &:before{
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 100%;
            background-color: #000;
            transform: translateX(-50%) translateY(-50%);
        }
        &:last-of-type{
            padding-bottom: 0;
            &:before{
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 10px 5px 0 5px;
                border-color: #000000 transparent transparent transparent;
                border-radius: 0;
                background-color: transparent;
                top: auto;
                bottom: 0;
                transform: translateX(-50%) translateY(0);
            }
        }
    }
    @media(min-width : 768px){
        display: table;
        table-layout: fixed;
        width: 100%;
        &-item{
            display: table-cell;
            vertical-align: top;
            padding: 0;
            border:{
                top: 1px solid #000;
                bottom: 0;
                left: 0;
            }
            &:last-of-type{
                padding-bottom: 0;
                text-align: right;
                &:before{
                    border-width: 5px 0 5px 10px;
                    border-color: transparent transparent transparent #000000;
                    top: 0;
                    right: 0;
                    bottom: auto;
                    left: auto;
                    transform: translateX(0) translateY(-50%);
                }

                p{
                    text-align: left;
                }
            }
        }
        &-label,
        &-content{
            transform: translateX(-50%);
            text-align: left;
            display: block;
            max-width: 70%;
        }
        &-label{
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            transform: translateX(-50%) translateY(-120%);
        }
        &-content{
            margin-top: 10px;
        }
        &-item:last-of-type &-label,
        &-item:last-of-type &-content{
            transform: translateX(50%);
            text-align: left;
            display: inline-block;
            max-width: 70%;
        }
        &-item:last-of-type &-label{
            left: auto;
            right: 0;
            transform: translateX(50%) translateY(-120%);
        }
    }




    /* ボーダー有り */
    &.border-dashed &-item{
        border-top: 1px dashed #ccc;
        padding: 10px;
        &:last-of-type{
            border: {
                top: none;
                bottom: 1px dashed #ccc;
            }
        }


        @media(min-width : 768px){
            padding: 0;
            border:{
                top: 1px solid #000;
                left: 1px dashed #ccc;
            }
            &:last-of-type{
                border: {
                    top: 1px solid #000;
                    right: 1px dashed #ccc;
                    bottom: 0;
                }
            }
        }
    }

    /* ストライプ背景 */
    &.bg-stripe &-item{
        &:nth-of-type(odd){
            background-color: #e8e8e8;
        }
        &:nth-of-type(even){
            background-color: #fff;
        }
    }
    @media(min-width : 768px){
        &.bg-stripe &-label,
        &.bg-stripe &-content{
            transform: translateX(0);
            text-align: left;
            display: block;
            max-width: 70%;
        }
        &.bg-stripe &-label{
            transform: translateX(0) translateY(-120%);
        }
        &.bg-stripe &-content{
            display: inline-block;
        }
    }

    /* PCの時は矢印っぽく */
    &-wrapper{
        padding: 3rem 5rem;
        background-color: #f0f0f0;
    }
    &.bg-arrow{
        padding: 0;
    }
    &.bg-arrow &-item{
        position: relative;
        border: {
            top: none;   
        }

       
    }
    @media(min-width : 768px){        
        &.bg-arrow{
            padding: 20px 0 0;
            overflow: hidden;
        }
        &.bg-arrow &-item{
            &:before{
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border:{
                    color: transparent;
                    radius: 0;
                }
                box-shadow: 1px -1px 2px rgba(125, 125, 125, 0.8);
                transform: skew(-45deg);
                transform-origin:0 0;
                background: -moz-linear-gradient(45deg,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            }        
        }
        
        &.bg-arrow &-label,
        &.bg-arrow &-content{
            transform: translateX(0);
            text-align: left;
            display: block;
            max-width: 70%;
        }
        &.bg-arrow &-label{
            transform: translateX(0) translateY(-120%);
        }
        &.bg-arrow &-content{
            display: inline-block;
        }
        &.bg-arrow &-item:last-of-type{
            padding-bottom: 0;
            text-align: right;
            &:before{
                border: none;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                transform: translateX(0) translateY(0) skew(-45deg);
            }
            p{
                text-align: left;
                display: block;
            }
        }
    }
}

/* 現在地 */
.timeline-item.now:before{
    background-color: #f00;
}

テクニック不要!! レイヤー2枚で写真を仕上げる!!

CPIサーバーでマルチドメインの設定

CSSだけでレスポンシブなタイムラインを作る

やってみよう

条件

基本形

HTML

SASS

やってること

HTML

SASS

SNSのトップを知る!!