2017-01-01から1年間の記事一覧
Pocketの「デジタル積ん読」を消化する日々。状況によってスマホだったりPCだったり。 で、スマホ読書に慣れてくると、だんだんPC表示の一行が長く感じて辛みがある。。 そうだ、CSSのcolumns（段組）でPCとスマホの一行あたりの文字数を統一してみよう！と…
JavaScript Advent Calendar 2017 - Qiitaの第5日目です。 「こいつ、動くぞ！*1」自分の作ったものが動く！この喜びをいち早く体験させてくれたjQuery。 だが、HTML→CSS→jQueryという道を辿った方が「次」のステップに進むときに感じる「壁」があります。そ…
Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書…
Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書…
Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書…
Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書…
Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書…
ある日、リストに数字を表示したい時があった。 OKOK、そんな時はリストをul要素ではなくol要素にすればいいのよね。打ち替えてみたが、あれ？表示ない。試行錯誤の結果、6年前のYahoo知恵袋のとある回答によってようやく表示することができた！という話。
リンクや更新一覧などでタイトルの右側に「＞」アイコンをつけることがよくあると思う。 imgファイルを配置してもいいのだけど、修正のたびに画像編集ソフトを立ち上げる必要がある。 テキストの「＞」を配置してもいいけど見た目はイマイチ…。あとシステム…
ブログ名をこっそり変えました。イイダリョウです。 「イイダリョウが書くブログ（仮）」→「クモのようにコツコツと」 Codepen Settingの旅、第3回です。 第1回は「HTMLテンプレートエンジン」、第2回は「AltCSS」でした。 今回はこれまたアルトいいねの「Al…
先日、久々にプールで潜ったけど中耳炎にならなかったのが嬉しい。イイダリョウです。 CodePen Settingの旅。 前回はHTMLの記述量を減らす「テンプレートエンジン」を体験しました。 今回はCSSの記述量を減らす「AltCSS」を体験していきたいと思います。 ア…
HTMLをより少ない記述量で書くことができる「テンプレートエンジン」。Haml, Slim, Pagなどをよく見聞きしますね。 これらの形式をブラウザで表示するためにはHTMLにコンパイル（変換）する必要があります。その環境構築が第一難関です。 が！CodePenを使え…
突然ですががブログを引っ越しました。 今後はこちらで更新いたします。 よろしくお願いいたします。 http://idr-zz.hatenablog.com Tumblerはこのまま残して、もし他の用途があったら復活するかもしれません。
はてなブログで外部サイトやSNSが埋め込められるか検証してみたい。 ※ Qiitaで検証した記事と同じ内容になります。
Codepen埋め込むとどうなるか。
以前インスタにアップした家紋研究をまとめてみました。家紋というかシンメトリー図案の仕組み検証です。
デザトレ015 ランダムシームレスパターン 前回の方法では四隅に余白ラインができてしまう。シームレスにするにはどうするか。 予め決めた四角の中に要素を入れる際、線をはみ出した時点で反対側に複製する（四角の距離分）。角にかかる場合は四隅。 四角でト…
デザトレ014 自作パターン1 家紋研究の鳥再登場。 4つに複製して1つ分の四角をセンタリングしてトリミングするとシームレスなパターンになる。 パターン #pattern
デザトレ013 家紋研究その5 今回は72度5分割に絞って実験。 はじめガイドラインを作る。ガイド範囲内ならどんなに複雑な形でも成立する。しかしそれでは限定的…。 ためにし三日月を拡大してガイドからはみ出してみる。左は上側、右は下側にはみ出るが重なら…
<p>デザトレ012<br> 家紋研究その4 先ほどの鈍角であれば、曲線でも重ならないのでは、という実験。重ならなかった！ 7本だけないなぁ、とか菊十六紋の16本がない！という理由から整数じゃない角度も追加。 また、本数が多すぎるとかけた労力に対して印象があまり変</p>…
デザトレ011 家紋研究その3 角度が鋭角だと重なるのではないか？という仮説を元に、90度未満の鈍角にしてみた。 線の太さの関係でくっ付いて見えるが、最後まで重ならなかった！ デザイン #家紋 #シンメトリー #design #kamon #famlycrest #symmetry
デザトレ010 家紋研究その2 1本線であればどんな角度を付けても重なることはないのではないか？という仮説をもとにいくつか頂点を加えてみたところ、72度の時点で重なり発生。 あと、だんだん本数が増えると結局みんな円になってしまうのかも知れない。 デザ…
デザトレ009 家紋研究その1。 家紋は上下左右シンメトリーなど、回転させた形が多い。 自作するに当たり、どういう角度を入力すべきか。 360度を整数で割り切れる数を調べたところ24種類あった。 まずは直線に対してその角度を入力してみた。 最後の方は直線…
デザトレ008 自宅は非Adobe環境につき、そこでグランジ風テクスチャを再現できるかテスト。 デザイン #タイポグラフィ #テクスチャー #グランジ #design #typography #texture #grunge
デザトレ007 インバウンド向けリーフレットより 被写体や配色がとても和風でいい感じ。 また、被写体の形がそれぞれ違うので文字の配置もそれに合わせて変わっている。 文字のジャンプ率は低く、上品。 フォントはゴシック体だが、読みやすさ重視か。 デザイ…
デザトレ006 アートブックフェアのチラシより。 写真をモノクロにすることで赤い文字一色が際立つ。 右の人物とかぶらないように大きな文字が配置されていて、顔と作業する手元がその文字へ視線を誘導させる。アンダーラインが文字をさらに強調している。4文…
Instaの画像をTumblrにシェアして、さらにそれをTwitterやFacebookにシェアしたい時、いつもやり方を忘れていてエラーになるので、忘れないようにメモをする。 PCのダッシュボード上でシェアするとなぜかエラーになる。 アプリのシェアだと画像がうまく表示…
デザトレ005 バナー広告より。個人的なミニマムなものを好むのでこのような楽しいデザインも身につけたい。 文字の傾きが動きを出していてサイズのメリハリもすごくハッキリしているデザインですね。 後ろの花火のような装飾も祭り感を出していて賑やかです…
デザトレ04 バナー広告より。 緑色の配色を研究したくていろいろ見たが、緑系統だけで差し色がないケースが多かった。 差し色がある例では補色の赤（クリスマスぽい）よりもオレンジを差し色にしている物が多い気がする。 大きい文字には黄色を使ったり。 デ…
デザトレ03 某ファッション雑誌のフリーペーパーより。 雑誌名が頭の後ろのにあったり、下のコピーが女性に合わせて曲線上に配置されている。 背景の色は女性の大きなスカートで、口紅も同色。タイトルの金色がアクセントになっている。 デザイン #配色 #レ…
