Pano|webエンジニア

こんにちは、東京でwebエンジニアをしているPanoです。 自宅では、Macで開発して…

Pano|webエンジニア

こんにちは、東京でwebエンジニアをしているPanoです。 自宅では、Macで開発しています。

記事一覧

WEB制作で身につけているとお得だな、便利だな、格段にコーディング・運用効率が上がるなと思う技術3つ

寒くなってきましたね。いや本当寒いですね。あったかい飲み物入れますけど、手を温めるために入れているようなもんです。 話を戻しまして、今回は知っておきたい・身につ…

Webサイトコーディングからの振り返り

昨日、今日でコーディングしていて改めて再認識したり、学んだり、もう少し調べてみたりしたものを列挙してみました。 1. source要素、picture要素の活用とIE11 PCとSPで…

web周りの新しい技術を学びたい時

自分は新しい技術(自分が知らない技術)の勉強をしようとして、いろいろ調べて実装していました。でも「新しいこと(プログラミング言語含むweb周辺)を学びたい」に対す…

Vivus.jsで手書きアニメーション作成

今回紹介するのはVivus.jsです。Vivus.jsは、svgファイルの描画アニメーションのライブラリです。このVivus.jsを用いて、文字を手書きで書いているように見せるアニメーシ…

WEB制作で身につけているとお得だな、便利だな、格段にコーディング・運用効率が上がるなと思う技術3つ

寒くなってきましたね。いや本当寒いですね。あったかい飲み物入れますけど、手を温めるために入れているようなもんです。

話を戻しまして、今回は知っておきたい・身につけておきたい技術を3つ紹介します。
この記事は、
・WEB制作を独学で学んでHTMLとCSSとかでWEBページ1枚作ったことがある方
・HTML、CSSでコーディングしているけどもっとコーディング・運用の効率あげたい方
・独学で勉強してい

もっとみる
Webサイトコーディングからの振り返り

Webサイトコーディングからの振り返り

昨日、今日でコーディングしていて改めて再認識したり、学んだり、もう少し調べてみたりしたものを列挙してみました。

1. source要素、picture要素の活用とIE11

PCとSPでの画像の出しわけは、例えば、2つの画像を置いてクラスで出しわけ・切り替えをする方法があります。一方で、picture要素を置いて、子要素でsource要素を置く方法があります。(※ここでは、img要素を用いる方が

もっとみる
web周りの新しい技術を学びたい時

web周りの新しい技術を学びたい時

自分は新しい技術(自分が知らない技術)の勉強をしようとして、いろいろ調べて実装していました。でも「新しいこと(プログラミング言語含むweb周辺)を学びたい」に対するアウトプットっていまいち出てこなかったりしてよく立ち止まります。(つまり学んだものをアウトプットしたい。)

何か新しい技術で作ってみたいけど、何もないところから作ることが結構難しい。なんならルールや要件定義があってくれたほうが実装しや

もっとみる
Vivus.jsで手書きアニメーション作成

Vivus.jsで手書きアニメーション作成

今回紹介するのはVivus.jsです。Vivus.jsは、svgファイルの描画アニメーションのライブラリです。このVivus.jsを用いて、文字を手書きで書いているように見せるアニメーションを作成します。自身はwebエンジニアなので、デザイナーではなく、webエンジニア目線からHow toを7ステップでお話していきます!

Vivus.jsの導入の前に、Adobe Illustrator(AI)で

もっとみる