更新日: 2019年01月17日
公開日: 2019年01月16日

Web開発&Webデザイン初心者必見の線を引く方法

人類の文明発達と共に文字や絵、図が進化しているように、Webの中でも「線」や「図」を引く方法が進化中。
今回は、Web開発＆Webデザイン初心者を対象とした「線」を引く方法をお知らせさせて頂きます。
もう「ただの線」では満足いかなくなるかもしれませんよ。

Web開発&Webデザイン初心者必見の線を引く方法
Webにおける線
線を引く方法の特徴とサンプル
参考になる線デザイン
自分も線を書いてみる
まとめ

Web開発&Webデザイン初心者必見の線を引く方法

Webにおける線

紙ベースで考えると点●と点● を結ぶ行為が線● となりますが、 Webの場合はニュアンスが違ってきます。まずは主だった Webの線の引き方を以下にご紹介させて頂きます。

HTMLタグ <hr> で
CSS の border で
JavaScript（canvas）で
SVG で
Flash で

「線」といっても色々な引き方（表示方法）があり、紙ベースのような点●と点● を結ぶ感覚の方法は JavaScript や SVG 、そうではなく単に線を表示・非表示という方法は HTML や CSS となるんですね。実際の例を元に、それぞれの特徴を確認していきましょう。

線を引く方法の特徴とサンプル

HTMLタグ <hr> で

まず HTMLタグ <hr> で線を引く方法は、定番でしょう。こちらはブログサービスのエディタ画面でも「水平線」としてよく搭載されていますね。コンテンツを「区切り」たい時に使用し、ブラウザやクローリングボットも「区切り」として理解する「線」手法です。

【 <hr> のサンプル】

↓

<hr>

デモ

CSS の border で

Webの世界の文字や画像は、リアル社会とチョット違って、『枠』で区切られています。

例えば

という文字も

のようにいくつかの空間要素で構成中。この構成要素の border値を編集することで、線を表示できます。CSSを使う線の引き方は様々な場面で登場してきますので、匠に線を扱いたいなら外せない要素でしょう。

【CSS のサンプル】

↓

<p style="border-bottom:2px solid"></p>

デモ

JavaScript（canvas）で

Webページに動きを加える時によく使う JavaScript で線を引くことができます。 CSSに比べて不規則な動きにも対応できるので、「手書き文字の入力」や「作図」、「ゲーム」など動的な線引きにむいているでしょう。

【JavaScript のサンプル】

<canvas id="myCanvas" width="300" height="5"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#000";
        ctx.fillRect(0,3,200,3);
</script>

デモ

SVG で

SVG というとイラストやロゴ制作など「デザイナー」を連想しますが、 SVGは HTML との親和性も高く、 SVG で線を引いたり、絵を書いたり、アニメーションを表現したり色々できます。 CSS や JavaScript に比べて滑らかな動きと比較的小さなファイルサイズに納まることが特徴的。また SVG 特有の「画質の耐劣化性」から、レスポンシブデザインにも馴染みやすい線になり、Webデザインでいうと究極的な存在ともいえるでしょう。

【SVG のサンプル】

↓

<svg height="5" width="300">
    <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>

デモ

Flash で

迷路ゲームの Webサイトや手書きアプリサイトなどで時々見かける Flash を用いた「線」の表現方法。 CSS や JavaScript、 SVG に比べて自由に描きやすい特徴があるものの、セキュリティー上 2020年にブラウザが Flash サポートを中止する予定。このため今後、Webデザインを考える上で Flash は低優先順位と判断し、サンプルの作成等は控えさせて頂きました。尚、Flash の作成には Adobe's Flash Professional CC が必要に。

参考になる線デザイン

ここまでは基本的な線引きをご紹介させて頂きました。お次は、これらの「線」を応用した Webデザインや Webアプリを確認していきたいと思います。

半端ないSVGの線デザイン

画像出典：linemotion

こちらはセルビアに事務所を構える Webデザイン会社のホームページ。まずトップに登場する SVGで描かれた観覧車。このゴンドラ、動いています。。。またテキストリンクの枠や各コンテンツを仕切りを CSS の border で囲ったりと基本的な技術ながらもオシャレに見えるサイト。スマホでもほぼシームレスに動くので、スゴイと思います。

UI・UX として参考になる線使い

画像出典：Airnauts

こちらはフランス・パリにオフィスを構える IT企業のホームページ。データサイエンスや Webデザインなど幅広いジャンルを扱っているだけあって、ホームページにもそれらを連想させるデザインが盛り込まれていますね。トップのグルッと回る線のデザインは解析不能ですが、リストの自動切り替えタイマーの線表現やアコーディオンの縦線など（上図参照）は、ユーザーの操作・動きを補完する働きがあって複雑な情報系統にも関わらず、殆どをストレスを感じることなく閲覧することが可能。すごく参考になりますね。

人工知能開発のデータセットに

画像出典：QUICK,DRAW（Google）

2016年 11月に Googleがリリースした Webアプリの QUICK,DRAW。こちらはタイトルに沿ったイラストをユーザーが書いて、人工知能が画像判定＆データ収集するというもの。JavaScript ベースの <canvas> が活用されていますね。公開から 2年で 10億枚以上の画像を収拾し、そのうち 5千万枚を GitHub* で公開。先日は API も公開し、これからますます「書く」と「書かれたものの判別」が自動化していくでしょう。

これらの最先端の線デザインを見ると、「線デザイン」って奥が深いんだな、と思いますね。

自分も線を書いてみる

簡単な <hr> から応用した線引きまで、サンプルを 4点ご用意しました。

<hr> を試す

<hr> をそのまま使ってもいいのですが、いくつかスタイル要素を加えて遊んでみたいと思います。

【サンプルの結果】

標準
<hr>

2重線
<hr style="border-top: 3px double ">

点線
<hr style="border-top: 3px dotted ">

うっすら消えている線
<style>
hr.ussura {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
</style>
<hr class="ussura">

波線
<style>
hr.wave {
    height: 6px;
    background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
    border: 0;
}
</style>
<hr class="wave">

線の色を変えてみる
<hr style="border-top:3px solid blue">

デモ

コンテンツの区切りとしての線なら、上記のようなスタイルと色を変えるだけでも随分印象は変わるでしょう。また <hr> を応用するとこんなこともできるんだ、という例として「読み込み中のアニメーション」をご紹介。

デモ

hr の縦幅と横幅を均等にして、角を切り取り、 hr を丸で表現。そして CSS でアニメーションを加えたという例。おもしろいですね。

文字の左右に横線

見出しなどを見やすくするために、文字の左右に線を引きたい時もあるでしょう。以下のコードを参考にしてみて下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
<style>
    .line {
        display: flex;
        align-items: center;
    }
    .line:before,
    .line:after {
        border-top: 1px solid;
        content: "";
        flex-grow: 1;
        margin:1rem;
    }
</style>
</head>
<body>
    <h2 class="line">タイトル</h2>
</body>
</html>

デモ　

CSS クラス line の前後に border-top で線を表現。

お絵かきアプリ

ゼロからコードを考えて JavaScript のお絵かきアプリを作成するのは難しいですが、 Web上ではいくつかのサンプルが公開されています。こちらはコードが長くなりますので、ご興味ある方は、デモページから HTMLコードを確認してみて下さい。ただし、PCのみで動く JavaScriptコードです。

デモ

チャートを書く

Web上でエクセルのようなチャートが書けたらカッコいいですよね。 Chart.js という JavaScriptライブラリを使うと上記のようなグラフも比較的簡単に書くことができます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<div style="width:300px">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["1月", "3月", "5月", "7月", "9月", "11月"],
        datasets: [{
            label: 'モチベーション',
            data: [4, 7, 12, 5, 12, 19],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

デモ

この他にも SVG アニメーションなど紹介したいですが、分量的に今回はやめておきますね。

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら

まとめ

HTMLで線・というと水平線を思いつく方が多いかもしれませんが、 CSS や JavaScript など他の要素をミックスさせると、随分表現に幅が広がることを確認できました。

「CSS や JavaScript 、興味はあるけどちょっと難しそうだな」「参考書を見ても、さっぱりわからないな」、そんな時は『オンライン × マンツーマン』でプログラミング学習をサポートする CodeCamp を頼ってみてはいかがでしょうか？申し込み前の無料相談や無料体験も行っていますので、慎重に検討を進めることができますよ。