最近よく聞くズルい線とは?【ズルいテクニック】の紹介

どうも!リリース間近で、あまり記事を更新できていないtomicciです。

昨日までは40℃近い熱を出していました!(笑)

最近、エンジニア同士の会話で、フォームエリアの境目はズルい線でコーディングしといて!と言って通じることが多くなった気がします。

・・・ズルい線??

初めて聞くと何のことかさっぱりですよね。

こういう線を指すらしいのです。

えっ!?どれだか分からない??

これです!白い枠に囲まれている区切り線のことです↓

ズルい線というのは1pxの線の下に、1pxの影が付いたように見える線のことを指していて、これを使うと区切り線のクオリティが途端に増します

合計2pxになっただけなのに、一気に立体的に見えるようになってしまう。人間の目、残念。

こういう小細工的なテクニックを、デザイナーは幾つも体得しているのでどんどん使ってきます。HTMLコーディングする際に、一々画像で切り出していくのは大変ですよね。

これ、透明度を設定したりすることで、CSSで簡単に実現できるんです。
知ってるだけで、すぐに実装できてしまう、まさに「ズルい線

いかに効率よく、少ない手間で綺麗に見せられるかって、重要だと思うんですが、「ズルい線」の他にも、「ズルい文字」や「ズルい背景」など、幾つか知っておくと非常に便利なテクニックがあります!

これらを総称してズルいデザインテクニックと呼ばれており、出所は下記になります。じっくり読んで、是非活用してください!

少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

WordPressの勉強につまづいたら、マンツーマンでプロから習うのがオススメ

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!

WordPressコース

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

初心者の方はもちろん更なるスキルアップを目指す方も、現場のクリエイターと実務経験を積むことで、WEB業界への就職や自宅でSOHOとして活躍する近道となります。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

数年前までバンド活動してました。ブログ、サイト運営で食べてます。フリーランス歴7年のWebクリエイター。飄々と生きています。これでも育児頑張ってます。長野市出身。埼玉県川越市在住。

【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒
※自然の音からデスメタルまで聴きます。

@tomicci
詳しいプロフィール

【運営サイト】
ザ サイベース
おと風景