パタパタワークス|福岡のWEBデザイナー

福岡で独立して個人でWEBデザイナーやディレクターをしています。その他イラスト制作とか動画制作もしています。フリーになって今年で6年目、日本イラストレーション協会(JILLA)会員。 WEB:https://patapataworks.com

パタパタワークス|福岡のWEBデザイナー

福岡で独立して個人でWEBデザイナーやディレクターをしています。その他イラスト制作とか動画制作もしています。フリーになって今年で6年目、日本イラストレーション協会(JILLA)会員。 WEB:https://patapataworks.com

    マガジン

    • ホームページ制作お役立ちメモ

      ホームページ制作で困った時に役に立ちそうな情報をざっくばらんにまとめています。

    • パタパタワークスのWEBデザインアウトプット

      パタパタワークスが長年WEBデザインをやってきた上で、こうしたら良かったとか、こういうふうにするとやりやすいなど、色々な事を書いています。 雑記程度に軽く考えていただけたら幸いです。

    記事一覧

    横はvw縦はvh~ついでにvminとvmaxをまとめて覚える

    縦と横のサイズの指定は、レイアウトを作成する上でものすごく重要なことです。指定方法としては、%やpx、emやremでの指定方法以外にも、サイズを指定する単位としてvw、v…

    簡単なSVGのアイコンをHTMLに埋め込んで使ってみよう!

    最近は小さいアイコンなどをSVGで作るのが主流になってきました。良いことです、とてもいいことです。レスポンシブするからサイズ違いを3つほど作ったりしなくて済みます。…

    【CSS】計算演算子calc()をかる~く使ってみる

    今日のタイトルは特に夜の居酒屋で見かけるようなおじさん向けに作りました!パタパタワークスですよろしくお願いいたします。 CSSには、今までの努力は何だったの?となる…

    ページの中身を見てもらうためにWEBデザインが出来ること

    WEBデザインを作るにおいて、中身の記事を読んでもらえるのかどうかは気になる所です。ページを見てもらうためにどのように作ったら良いのだろうかと色々と考えてみました…

    【css】columnsで簡単カラム分割

    本日のお役立ちメモは、カラムを簡単に作成するcssのご紹介です。 その名も「columns」。そのまんまですね。 これを使うとどのようなことが出来るのか、これを使ってどの…

    ファーストビューを考える時に注意したいポイント

    WEBデザインでは、まずはじめのファーストビューが重要です。 作るページによって様々な見せ方やレイアウト、見てもらうための仕組みづくりが必要になります。 そんなファ…

    横はvw縦はvh~ついでにvminとvmaxをまとめて覚える

    横はvw縦はvh~ついでにvminとvmaxをまとめて覚える

    縦と横のサイズの指定は、レイアウトを作成する上でものすごく重要なことです。指定方法としては、%やpx、emやremでの指定方法以外にも、サイズを指定する単位としてvw、vhを学習していこうと思います。
    あと、ついでにvminとvmaxも説明しておきます。

    vwとvhは画面サイズに対しての単位になりますHTML

    <div class="box"> <p>サンプルテキスト</p></div>

    もっとみる
    簡単なSVGのアイコンをHTMLに埋め込んで使ってみよう!

    簡単なSVGのアイコンをHTMLに埋め込んで使ってみよう!

    最近は小さいアイコンなどをSVGで作るのが主流になってきました。良いことです、とてもいいことです。レスポンシブするからサイズ違いを3つほど作ったりしなくて済みます。ベクター様バンザイです。

    SVGファイルの中身を見たことはありますか?
    アレの中身はXMLを基本としたテキストファイルなのです。圧縮されたsvgzと言うファイルもありますが、今回はこのテキストファイルのSVGを使います。

    SVGはH

    もっとみる
    【CSS】計算演算子calc()をかる~く使ってみる

    【CSS】計算演算子calc()をかる~く使ってみる

    今日のタイトルは特に夜の居酒屋で見かけるようなおじさん向けに作りました!パタパタワークスですよろしくお願いいたします。
    CSSには、今までの努力は何だったの?となるような革命のような関数が導入されることが多々あります。
    このcalcもその中の一つになります。こいつは強力ですので、コーディングをやるならぜひ覚えておいたほうが良いでしょう。

    calcは計算してくれる関数何はともあれ、使ってみればどん

    もっとみる
    ページの中身を見てもらうためにWEBデザインが出来ること

    ページの中身を見てもらうためにWEBデザインが出来ること

    WEBデザインを作るにおいて、中身の記事を読んでもらえるのかどうかは気になる所です。ページを見てもらうためにどのように作ったら良いのだろうかと色々と考えてみました。

    ページを見たらすぐにスクロールされると考えるまず自分がサイトを見た場合、一瞬だけページを確認したらすぐにスクロールを始めると思います。
    デスクトップ以上にスマホではスクロールのしやすさと速度が違うので、さらにスクロールしていくことに

    もっとみる
    【css】columnsで簡単カラム分割

    【css】columnsで簡単カラム分割

    本日のお役立ちメモは、カラムを簡単に作成するcssのご紹介です。
    その名も「columns」。そのまんまですね。

    これを使うとどのようなことが出来るのか、これを使ってどのようなものを作るのかをご紹介いたします。
    WEBデザインでのアイデアとして覚えておくと便利なcssですよ。

    そのものずばりカラムを作るCSSまずはそのまま使ってみましょう。そうすれば一発でどのようなことが出来るのかがわかります

    もっとみる
    ファーストビューを考える時に注意したいポイント

    ファーストビューを考える時に注意したいポイント

    WEBデザインでは、まずはじめのファーストビューが重要です。
    作るページによって様々な見せ方やレイアウト、見てもらうための仕組みづくりが必要になります。
    そんなファーストビューを作る上で考えておきたいポイントを簡単にまとめてみました。

    トップページを見てもらう頻度とボリュームを合わせるトップページにおけるファーストビューはものすごく重要な部分ですが、気合を入れすぎてトップページに詰め込みすぎると

    もっとみる