Pano|webエンジニア

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

Pano|webエンジニア

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

最近の記事

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

寒くなってきましたね。いや本当寒いですね。あったかい飲み物入れますけど、手を温めるために入れているようなもんです。 話を戻しまして、今回は知っておきたい・身につけておきたい技術を3つ紹介します。 この記事は、 ・WEB制作を独学で学んでHTMLとCSSとかでWEBページ1枚作ったことがある方 ・HTML、CSSでコーディングしているけどもっとコーディング・運用の効率あげたい方 ・独学で勉強していて、いずれはWeb制作会社に入りたい方 に合うんじゃないかと思います。 1.

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

      昨日、今日でコーディングしていて改めて再認識したり、学んだり、もう少し調べてみたりしたものを列挙してみました。 1. source要素、picture要素の活用とIE11 PCとSPでの画像の出しわけは、例えば、2つの画像を置いてクラスで出しわけ・切り替えをする方法があります。一方で、picture要素を置いて、子要素でsource要素を置く方法があります。(※ここでは、img要素を用いる方が読み込みが軽いとか、SEO的にはこうだとか、sizes属性使って、、、などといっ

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

        自分は新しい技術(自分が知らない技術)の勉強をしようとして、いろいろ調べて実装していました。でも「新しいこと(プログラミング言語含むweb周辺)を学びたい」に対するアウトプットっていまいち出てこなかったりしてよく立ち止まります。(つまり学んだものをアウトプットしたい。) 何か新しい技術で作ってみたいけど、何もないところから作ることが結構難しい。なんならルールや要件定義があってくれたほうが実装しやすい、と考えまして。 それでいうと、React.jsやRiot.jsはチュート

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

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

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