角丸, 影, 線形グラデーションの利用例

CSS3で表現できるようになった「角丸(border-radius)」「影(box-shadow)」「線形グラデーション(linear-gradient)」の利用例です。

border-radius|カドマル

border-radius では、 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius をまとめて指定できます。

.boxA{
    width: 200px;
    height: 50px;
    border: solid 1px #ccc;
    text-align: center;
    border-radius: 5px;
}
.boxB{
    width: 200px;
    height: 200px;
    border: solid 1px #ccc;
    text-align: center;
    border-radius: 50%;
}

See the Pen border-radius by waku-waku (@raku-raku) on CodePen.

box-shadow|ボックスの影

.boxC{
    width:200px;
    height:50px;
    border:solid 1px #ccc;
    text-align: center;

    /* offset-x | offset-y | blur-radius | color */
    box-shadow:0px 3px 2px #ccc;
}
.boxD{
    width:200px;
    height:50px;
    border:solid 1px #ccc;
    text-align: center;

    /* offset-x | offset-y | blur-radius | color */
    box-shadow:3px 0px 2px #ccc;
}
.boxE{
    width:200px;
    height:50px;
    border:solid 1px #ccc;
    text-align: center;

    /* offset-x | offset-y | blur-radius | color */
    box-shadow:2px 2px 6px #ccc;
}
.boxF{
    width:200px;
    height:50px;
    border:solid 1px #ccc;
    text-align: center;

    /* 内側に影を描写 | offset-x | offset-y | blur-radius | color */
    box-shadow:inset 0px 1px 2px #ccc;
}

See the Pen box-shadow by waku-waku (@raku-raku) on CodePen.

項目 説明 補足
offset-x 水平方向の距離 負の値だと影は左方向に延びる
offset-y 垂直方向の距離 負の値だと影は上方向に延びる
blur-radius ぼかし

linear-gradient|線形グラデーション

linear-gradient は、2つ以上の色を指定して色の変化を表現できます。

.boxG{
    width:200px;
    height:50px;
    text-align: center;
    border:solid 1px #ccc;
    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
}
.boxH{
    width:200px;
    height:50px;
    text-align: center;
    border:solid 1px #ccc;
    background-color: #C9E8F1;
    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
}

See the Pen gradient by waku-waku (@raku-raku) on CodePen.

opacity|透明

.boxI{
    width:200px;
    height:50px;
    text-align: center;
    border:solid 1px #ccc;
    background-color: #C9E8F1;
}
 
.boxI:hover{
    opacity:0.7;
}

See the Pen opacity by waku-waku (@raku-raku) on CodePen.

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。