投稿者: wpyum-1110

枠線の表示手段まとめ

枠線を表現するのに、いくつか方法がありますのでまとめます。

  1. borderで指定する
  2. box-shadowで指定する
  3. 擬似要素(::after)を使って、borderを指定したboxを重ねる
  4. 親要素に背景色を指定して、線幅分の余白を指定して、子要素に白(背景と同じ色)を指定する。

See the Pen 枠線の表示方法 外枠 by yuming (@yuuuming) on CodePen.

1. borderで指定する

一番スタンダードな指定方法ですね。問題なければ、普通にこの方法をとりたいです。

注意すべき点

複数カラムでレイアウトしたい場合、要素の幅設定（box-sizing=”border-box”）を指定しておかないと、%指定がうまくいきません。

例）
3つ箱を横に並べる場合は、幅33.33%にしますが、box-sizing=”contents-box”では、borderで指定した幅分が含まれないので、カラム落ちします。

2. box-shadowで指定する

本来は影のスタイルを指定するプロパティですが、ぼかし無しで指定することで枠線に見せます。borderに近い感覚で指定できます。重ねて指定することで、多重の枠が表現できます。

なお、box-shadowは要素の幅指定には関係しません。ウィンドウ幅に影響されて線幅が小数点になることはないため、ウィンドウ幅変更による表示の欠けの問題はクリアできます。

注意すべき点

外側指定の場合、四隅が微妙に角丸になります。

また、親要素にoverflow:hidden;が設定されていると、枠線が見切れるため、親要素との余白の調整が必要となります。もしくは内側（inset）に設定して、枠が内容に被る分は調整必要です。

3. 擬似要素(::after)を使って、borderを指定したboxを重ねる

１または２で解決できない場合はこの方法が良いかと思います。

注意すべき点

擬似要素は子要素として、要素の内側に表示されるので、重なり順や他子要素との兼ね合いに注意してください。

4. 親要素に背景色を指定して、線幅分の余白を指定して、子要素に白(背景と同じ色)を指定する。

子要素が透過度０の場合はこの方法も使用できますね。枠線にパターンやテクスチャをつけたい場合はこの方法で実現できます。

注意すべき点

子要素の背景を透過したい場合は使えません。

間に垂線を表示して格子状にする場合

親要素（ulなど）の中に複数の子要素(ilなど)を横に並べるような場合、間に垂線を表示して格子状にする方法も色々です。

  1. li（もしくはliの子要素）にborderをつける
  2. ulにborderをつけて、間の線は、liにborderをつける
  3. ulにborderをつけて、間の線は、擬似要素（li::after）で表示する

See the Pen 枠線の表示方法　格子 by yuming (@yuuuming) on CodePen.

1. li（もしくはliの子要素）にborderをつける

間の枠線が重複するため、枠を重ねるようにネガティブマージンを設定します。もしくは間の枠線の片方を無くします。

2. ulにborderをつけて、間の線は、liにborderをつける

外枠は親要素(ul)にborderを指定し、間の線は、liにborderを指定します。

3. ulにborderをつけて、間の線は、擬似要素（li::after）で表示する

外枠は親要素(ul)にborderを指定し、間の線は、擬似要素の背景色で表現します。

 

1pxの垂直線が上手いこと表示されない

以下のように、３カラムの画像のまわりに枠線に表示するのに、一苦労しましたので、解決策をまとめておきたいと思います。

画像まわりに枠線の例

初めは画像に直接枠線を入れていたのですが、ウィンドウサイズによって、表示幅に小数点がつくため見た目が変わってくるという問題につまづきました。ウィンドウサイズを変更すると、垂線が消えたり太くなったりしていました。

最終たどり着いた方法

汎用性も考えて、cssで枠線を表示することにし、色々試しました。枠線の表示方法についてはこちら（枠線の表示手段まとめ）を参照してください。

今回、一番ズレる心配がなく、スマートだと思われる方法で、以下の方法をとりました。

  • 外枠：ulにborder
  • 間の枠：li::after（最後のliを除く）で1pxの線幅のboxを表示

カラム落ちを防ぐためにbox-sizing=”border-box”を設定するため、liにborderを設定すると、borderなしのliだけ、borderの幅分、box中身のサイズが変わってしまいます。

今回、枠の中に画像を表示する必要があった（box中身のサイズを３カラムとも同じにしたい）ため、上記の方法をとりました。

See the Pen 1pxの垂直線が上手いこと表示されない by yuming (@yuuuming) on CodePen.

仕事として、できるようになりたいことを考えてみる

フリーランスとして、どういうことを仕事にしていきたいか

ゆくゆくは、という話で、将来の夢みたいなものですね。こういう事を考えると、何をしないといけないかが明確になるので、まずはきちんと文字にして整理してみようと思います。

なお、記事中でそれっぽい横文字を使ってるのは、自分のテンションを上げるためです(笑)。(個人的に、目標設定とかでは大事なことかと思います)

目指すところ

一言で言うと、小規模事業のプロデュース、デザインコンサルタント。

プロデュースやコンサルなんて言ってしまうとたいそうな感じになってしまいますが、自分ができること(範囲問わず、なんでも)で、小規模事業主さんのお役に立てればなぁ、という思いです。

対象

想定したいクライアントは以下のような小規模事業主、団体の方々です。

  • 個人事業主
  • 農家
  • 個人でやってる教室の先生
  • クラフト作家
  • 地域の非営利団体など

結婚前、企業デザイナーとして働いていた時は、こんなこと考えもしていませんでした。独立志向の主人(現、普通のサラリーマン)に影響されて、身近な人に、自分ができること(=デザイン)で助けになれるような仕事がしたい！という気持ちが湧いてきました。

主人関連でしたいこともいろいろあるので、またそれは別途書きたいと思います。

具体的に何をしたいか

SNS、ブログなどを使った低費用の広告媒体の導入、レクチャーだったり、ホームページ、チラシ、ポスター、グッズなどなど、デザインまわりで解決できることを提案していきたいと考えています。

小規模事業主のデザイン・ウェブ担当者になるようなイメージです。

例えば、手芸教室の先生だったら、生徒さん募集のためにHPがあった方がいいし、作品発表の場がオンライン上にもあったら良いと思います。意欲がある生徒さんがいれば、作ったものを販売する場があってもおもしろいと思います。

オンライン上での情報発信は、商売をしていたら必須になっていてると思います。では、どこで発信するのか？facebookやTwitter、Instagramといった無料のSNSで済ますのか、レンタルブログを使うのか、サーバを借りて本格的にサイト運営するのか…

考えることがいっぱい出てきて、もういいやってなる前に、「この場合はこうしたらいいですよ！」って導ける人になりたいです。

 

目指すことが明確になったら、「では、何をしないといけないか？何ができないといけないか」ということが見えてきます。

ここからは次回の投稿で考えて行きたいと思います。

とにかく、ブログをはじめてみよう

初めまして、yuming.です。この度、ブログを始めることにしました。

プロフィール的なこと

前職では企業内デザイナーでしたが、結婚を機に退職し、現在主婦をやっております。仕事を辞めてからも、「デザインの仕事を続けたいなぁ」という思いはありまして、働く気満々で転職活動していたのですが、子供ができたので一旦断念しました。

でも、育児中の仕事のブランクがとんでもなく怖くなってきまして…。ただ、子供が小さいうちは共働きでフルタイムで外に出て働くのはできれば避けたいし、なんとか在宅で仕事したいなぁ、と考えていました。

前職でも少しはウェブサイトを作成していたので、フリーでウェブ制作なんてすぐできるわ！なんて、甘っちょろい考えでした。（ほんとにお恥ずかしい…）勉強すればするほど、「自分、なんもできないじゃないか」ということに気づかされました。

フリーランスでやっていけるようにスキルの幅を伸ばさなければと思い、日々独学で勉強中です。

当ブログの目的

お仕事で基本的なウェブサイト制作について勉強させていただきつつ、流行りのCMS（本格的にウェブ関係を仕事にしていた訳ではないので、Wordpressってなあに？レベルでした）やら、サーバーについてやら、色々なサイトを見ながら「ふーん、ふーん」と、なんとなく勉強してきましたが、実際にサイト運営してみないと、いまいちピンとこないし、やる気があんまり出ません。なんか一人でもくもくと内にこもってやってると、テンション上がることもないな…。

ということで、とにかく、ブログを開設してみました。投稿を優先したいので、サイトの見た目はほぼテンプレのままです。(サイトのデザイン改修についても、おいおい手をつけながら、記事にできたらなぁという目論見もあります。)

ブログを開設するだけでも、わからない事が芋ずる式に出てきて、正直、勉強することだらけです。

「ウェブ制作で独立して、在宅で育児しながら仕事したいんだ！」という方、結構いらっしゃると思いますが、ほぼ０からウェブについて勉強しないといけないレベルでではないでしょうか？その上、仕事や家事などが忙しすぎて、いつまでも手についていない方がほとんどだと思います。０からだと、何から手をつけて良いかもわからないと思います。

そんな方の道しるべ的なものになれば良いなと思い、少しずつ実践して、考えて、身に付けていったことを、ブログにまとめていきたいと思います。

ブログで書いていきたい内容

ブログで書いていきたい内容＝私がフリーランスになるために勉強したい事です。以下のようなことをまとめていけたらなぁ、と思います。（多分どんどん増えていきます　笑）

  • WEBデザインについて
    • 基礎知識と、最新情報など
    • 参考にした書籍
  • HTML5、CSS3まわりで知っておいた方が良いこと
    • 基礎知識と、最新情報など
    • クロスブラウザ
  • jQuery（Javascript）について
    • 良さそうなjQueryまとめなど
  • WordPressについて
    • サイトを作る
    • ECサイトを作る
  • その他、サイト運営に必要な知識について
    • サーバー、ドメイン
    • アフィリエイトについて
    • その他CMSなど
  • iOSアプリ開発について
  • フリーランスにまつわるお金や法律の話

 

同じような境遇の方の参考になれば幸いです。