IMG_0013

flexboxの使い方

Posted on by takumi

flexboxを使ってコンテンツを横並びにする。
スマホ（640px以下）は縦にするときのコード。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript"></script>
<style type="text/css">
body{
　padding: 0px;
　margin: 0px;
}
.row{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction:column;
  margin: 0px;
  padding: 0px;
}
.row li {
  flex-basis: 15%;
  background-color: grey;
  margin: 0px;
  padding: 0px;
  list-style: none;
  padding: 10px;
}
@media (min-width: 640px) {
  .row{
    flex-direction:row;
  }
}
</style>
</head>
<body>
<ul class="row">
    <li>1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト1テキスト</li>
    <li>2テキスト2テキスト2テキスト2テキスト</li>
    <li>3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト3テキスト</li>
    <li>4テキスト4テキスト4テキスト4テキスト4テキスト4テキスト</li>
    <li>5テキスト5テキスト5テキスト</li>
 </ul>
</body>
</html>

サンプルではモバイルファーストの組み方にしているので、
flex-direction: row;で横並び、flex-direction:column;で縦並びにする。
ただandroid4くらいではflex-directionが効かない機種もあるようなので、
古いandroidでも正確に表示したい場合は、divで並べたほうが良い。

justify-content: space-between;で等間隔でならべる。

IMG_0013

DreamweaverからSublime Text3へ

Posted on by takumi

僕はWebディレクターもやってた時期が何年もあって、その間コーディングのやり方はずいぶん変わってしまった。
tableレイアウトが全盛期の時代にコーディングをやっていたので、
divだけでなく、flexboxを使ったコーディングには、ずいぶんと手を焼いている。

会社員時代は若手のコーダーがいたから助かっていたけど、
フリーランスになってからは一人でやらなくてはならない。
僕はデザインのみでコーディングはやりません、というスタンスでもいいかもしれないが、
それだと仕事が少なくなりそうなので、重い腰を上げてレスポンシブ対応のコーディングができるようになろうと思う。

僕がコーダー現役の頃はDreamweaverが全盛期だった。
今はBracketsやSublimeTextなど、軽いエディタを使ってる人が多く、
Dreamweaverのような重いソフトは敬遠されているようだ。

というか昔からなぜかDreamweaver（笑）という謎の勢力があり、
秀丸エディタやmimikakiエディットを使う人がかっこいいという風潮があった（と思う）。
なかにはWinやMacにデフォルトで入ってるメモ帳でコーディングする強者もいた。

たしかに僕もドリよりフリーのエディタでゴリゴリコーディングする人の方が、
なんだかかっこいい姿に見えた。
でもドリはドリで便利な機能が満載で（それゆえ重い）、開発スピードは今でも早いと思う。
おまけにAbobeのライセンスを持ってればPhotoshopなどと一緒に使い放題だし。
当時のエディタは補完機能などホントになくて、不便なところもあったけど、
余計な機能はいらねぇ、ちょっとストイックな所が、コーダーの心をくすぐるのだと思う。

一人で開発するにはドリでいいと思うけど、
複数人で開発するする機会ができたので、このタイミングでSublimeTextも使えるように頑張ろうと思う。

おすすめのプラグインはこちらを参考に入れていった。
https://liginc.co.jp/226222

IMG_0013

ul、liタグで横並びのメニューにする

Posted on by takumi

リストタグでヘッダーメニューにするのはもう何年も前から使われている手法だけど、
なんでもtableコーディングで済ませていた時代を過ごしていた僕には、すぐ忘れるテクニックだったので、
いい加減覚えるために記事にした。

HTML

<ul>
  <li>トップ</li>
  <li>プロフィール</li>
  <li>実績</li>
  <li>連絡先</li>
</ul>

CSS

body {
	padding: 0px;
	margin: 0px;
}
ul {
	background-color: #B1B1B1;
	font-size: 0px;
}
ul li {
	display: inline-block;
	width: 25%;
	text-align: center;
	font-size: 14px;
}

display: inline-block;で横並びになる。
例では横幅を25%にすると、4つめの項目が下にずれる。inline-blockだとliの間にスペースができるため。
そのため、ulで一度font-sizeを0pxにしてliでサイズを定義しなおす。

参考：http://delaymania.com/201404/web/list-inline-block/

IMG_0013

デザイナーとして起業した(い)君へ。

Posted on by takumi

久しぶりに良書に巡り会えた。
本書は著者Divid Aireyの体験だけでなく、
他のデザイナーのスキルの磨き方、営業活動、成功談、失敗談などが詰まっていて、
フリーランスの自分にはとても勉強になった。

クリエイターとしての切実な部分であるお金の事情についても書かれており、 仕事が無い場合の収入をどうするか、の部分は興味深かった。
著者はブログ運営に週10時間ほど費やしているようで、
ブログである程度収入を得るには、これくらいはやらないと駄目なんだろうなと思った。
ただ、ブログを書くことにより、問い合わせが増えたり、
執筆依頼が来ることもあったそうなので、
ブログじゃ儲からないよという理由だけでやらないのは、もったいない感じがした。
（当然こんな上手く話がトントン拍子で進むことはないだろうが）

また、プロモーション活動の必要性も勉強になった。
僕はスキルがあれば黙ってても仕事はもらえるという、
典型的な営業下手くそな日本人のパターンだったので、 しっかり自分のスキルに自信を持って営業活動していきたい。

非営利団体にジョインして、そこのデザインワークに無償で関わり、
それを実績にするプロボノ活動は、ちょっとどうかなと思ったけど。

デザインのいろはについては書かれておらず、
「クリエイターとしてどう生きていくか」の指南書である。
悩めるクリエイターに贈るエールに仕上がっている。

IMG_0013

デザインのためのコード

Posted on by takumi

2018年現在、Web業界に身をおいて15年になる。
僕の中ではやる気のみなぎる20代、30代前半を過ごし、この業界で続けられるか悩んだ30代後半を過ごしていたら、
結構長いことジョブチェンジをせずに40代に突入することになった。

若い人が中心の業界で、この先やっていけるか、今でも悩んではいるが、
じゃあ他にできることもやりたいことも無い。
でも何かを作ってたまにWeb上で発表したいという気は相変わらずあるので、
その気持ちが続く以上、この業界でもう少しがんばっていこうと思う。

20代の頃からコーディングでデザインを表現することに興味があったけど、
じゃあそもそもデザインって何ぞや？と思い、
デザインについてアウトプットできる場を持とうということで、新しくdesignというカテゴリを作って更新できればと思う。

15年もやってる割にはたいした実績もないけど、
たまに記事にして頭の整理ができれば、デザインについての知識が深まるのではないかと思う。