卍

ちょっとややこしいdisplayプロパティ

自分の中でdisplayを使うことが少ないため、イマイチそれぞれのプロパティが意味するところがしっくりこなかったので、まとめた。

■display:block
横幅いっぱいになる。そのためblockの前後の要素は縦に並ぶ。
■display:inline
前後の要素が横に並ぶ。幅と高さは指定できない。
■display:inline-block
blockとinlineの両方で、要素を横並びにしつつ、幅と高さを指定できる。
■display:none
要素が非表示になる。

float:leftを入れると親要素のdivの高さがなくなる。そのためにclearfixを適用する

See the Pen display:block by takumi (@uchu-jin) on CodePen.

参考
【CSS】displayの使い方を総まとめ!inlineやblockの違いは?
[CSS]floatの指定が有る要素の親要素に高さを持たせる方法

卍

flexboxの使い方

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;で等間隔でならべる。

卍

DreamweaverからSublime Text3へ

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

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

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

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

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

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

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

卍

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

リストタグでヘッダーメニューにするのはもう何年も前から使われている手法だけど、
なんでも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/

built_with_processing

punktiertを使ったアニメーション

punktiertは、2D/3D空間上に有機的なアニメーションを搭載できるライブラリです。

http://www.lab-eds.org/punktiert

比較的短いスクリプトで様々な物理エンジンが利用できます。
exampleを見るとパーティクル系が多いです。
また、ドラッグでカメラ視点を変えられるpeasycamも今回使用しました。
こちらも3D作品の際には役に立つライブラリです。

http://mrfeinberg.com/peasycam/#about

p5.pde

import peasy.PeasyCam;
import punktiert.math.Vec;
import punktiert.physics.*;

VPhysics physics;

PeasyCam cam;

public void setup() {
  size(800, 600, P3D);
  smooth();

  cam = new PeasyCam(this, 800);

  physics = new VPhysics();

  for (int i = 0; i < 1000; i++) {

    Vec pos = new Vec(0, 0, 0).jitter(1);
    Vec vel = new Vec(random(-1, 1), random(-1, 1), random(-1, 1));
    VBoid p = new VBoid(pos, vel);
    p.setRadius(20);

    p.swarm.setCohesionRadius(80);
    p.trail.setInPast(3);
    p.trail.setreductionFactor(2);
    physics.addParticle(p);

    p.addBehavior(new BCollision());

    physics.addSpring(new VSpringRange(p, new VParticle(), 300, 400, 0.0005f));
  }
}

public void draw() {
  background(240);

  physics.update();
  for (int i = 0; i < physics.particles.size(); i++) {
    VBoid boid = (VBoid) physics.particles.get(i);

    strokeWeight(5);
    stroke(0);
    point(boid.x, boid.y, boid.z);

    if (frameCount > 400) {
      boid.trail.setInPast(100);
    }
    strokeWeight(1);
    stroke(200, 0, 0);
    noFill();
    beginShape();
    for (int j = 0; j < boid.trail.particles.size(); j++) {
      VParticle t = boid.trail.particles.get(j);
      vertex(t.x, t.y, t.z);
    }
    endShape();
  }
}