パタパタワークス｜福岡のWEBデザイナー
2022年に作成した記事のアーカイブです。
はじめまして、福岡でデザイナーをやっているパタパタワークスと申します。 パタパタワークスは福岡のフリーランスデザイナーのナカハタタカヒロが運営しているWEBデザイン制作事務所になります。 2000年よりWEBデザインの仕事を始め、2016年4月よりフリーランスとして独立いたしました。ホームページの企画・制作・運営及び各種デザインやイラストの制作を行っております。 バタバタしないように仕事をしていこうと言う意味を込めてこのような屋号にしております。 フリーランスのデザイナー
新年あけましておめでとうございます。 来年もよろしくお願いいたします。 去年は、手探りでざくざくとお試しで使ってみた感じだったのですが、今年は定期的に色々なことを描いていくようにしていきたいと思っています。 今年もよろしくお願いいたします。
WEBサイトを作る場合、ヘッダやフッタの要素を固定したりする事があると思います。完全に固定してしまう場合はposition:fixedを使って画面上に固定してしまうと思うのですが、流れでちょっとしたナビゲーションを固定したい、メニューだけ固定させて後はスクロールさせたいなど、特殊な固定要素を使いたい場合にはposition:stickyが便利です。 このposition:stickyの使い方などをさくっと解説します。 使い方サンプルとしてHTMLとCSSを用意しました。
WEBサイトはどんなものでも、何かボタンを押してもらうことで先に進むように作られていると思います。 これは、1ページしかないLPのようなサイトでも同様で、ボタンを押してもらう事を考えながらWEBデザインを行いたいです。 必要なボタンだけを置くメールフォームなど、目的が決まっているボタンだけあれば良いのであればそのボタンだけ用意するようにします。 目的が1つだけの場合は、キャンセルボタンなどを用意しない事で、押すべきボタンが分かりやすくなります。 記載内容を変更するフォーム
今回は、メールフォームについて最近ちょっと考えてることを色々出してみたいと思っております。お問い合わせのメールフォームは今でも作る上で、必ず用意するほどの重要度の高いページでもあります。 しかし、メールにお問い合わせをする方法ってそのうち急激に無くなりそうだなぁとも思っています。最近は下手をするとメールアドレスの代わりにLINEのQRコードとかSNSへのリンクで間に合ってしまうんじゃないだろうか？なんて事をちょっと位考えたりします。 メールフォームは難しいなぜそんな考えが
縦と横のサイズの指定は、レイアウトを作成する上でものすごく重要なことです。指定方法としては、％やpx、emやremでの指定方法以外にも、サイズを指定する単位としてvw、vhを学習していこうと思います。 あと、ついでにvminとvmaxも説明しておきます。 vwとvhは画面サイズに対しての単位になりますHTML <div class="box"> <p>サンプルテキスト</p></div> CSS .box { width:50vw; height:50vh;
最近は小さいアイコンなどをSVGで作るのが主流になってきました。良いことです、とてもいいことです。レスポンシブするからサイズ違いを3つほど作ったりしなくて済みます。ベクター様バンザイです。 SVGファイルの中身を見たことはありますか？ アレの中身はXMLを基本としたテキストファイルなのです。圧縮されたsvgzと言うファイルもありますが、今回はこのテキストファイルのSVGを使います。 SVGはHTML上に直接書ける見出しの通り、svgはその中身をHTMLに貼り付けてもそのま
今日のタイトルは特に夜の居酒屋で見かけるようなおじさん向けに作りました！パタパタワークスですよろしくお願いいたします。 CSSには、今までの努力は何だったの？となるような革命のような関数が導入されることが多々あります。 このcalcもその中の一つになります。こいつは強力ですので、コーディングをやるならぜひ覚えておいたほうが良いでしょう。 calcは計算してくれる関数何はともあれ、使ってみればどんな物か一発で分かりますので、まずは使ってみましょう。 HTML <div>
WEBデザインを作るにおいて、中身の記事を読んでもらえるのかどうかは気になる所です。ページを見てもらうためにどのように作ったら良いのだろうかと色々と考えてみました。 ページを見たらすぐにスクロールされると考えるまず自分がサイトを見た場合、一瞬だけページを確認したらすぐにスクロールを始めると思います。 デスクトップ以上にスマホではスクロールのしやすさと速度が違うので、さらにスクロールしていくことになります。一瞬で内容が把握できない場合は、見ている人のスクロールが止まらないと考
本日のお役立ちメモは、カラムを簡単に作成するcssのご紹介です。 その名も「columns」。そのまんまですね。 これを使うとどのようなことが出来るのか、これを使ってどのようなものを作るのかをご紹介いたします。 WEBデザインでのアイデアとして覚えておくと便利なcssですよ。 そのものずばりカラムを作るCSSまずはそのまま使ってみましょう。そうすれば一発でどのようなことが出来るのかがわかります。 HTML <div class="column"> <h1>見出し１<
WEBデザインでは、まずはじめのファーストビューが重要です。 作るページによって様々な見せ方やレイアウト、見てもらうための仕組みづくりが必要になります。 そんなファーストビューを作る上で考えておきたいポイントを簡単にまとめてみました。 トップページを見てもらう頻度とボリュームを合わせるトップページにおけるファーストビューはものすごく重要な部分ですが、気合を入れすぎてトップページに詰め込みすぎると逆に見てもらいたいものを素通りされてしまう事にもなります。 特に、何度も繰り返し
画像を表示するためのHTMLタグとして、<img><figure><picture>があります。それぞれ目的別に役割が分かれていますので、しっかりと使い分ける必要があります。今回はその使い分け方のメモになります。 <img>と<picture>はsrcsetで制御する<img>はHTMLにおける基本的な画像を表示するためのタグになります。 HTMLを学習すれば、学習初日に覚える位のメジャーなやつです。 imgは基本的に1種類の画像を表示するために使用するタグになります。 <
レスポンシブデザインを作成する時に、どのように画像を取り扱うのかによってその画像の準備の仕方が全く変わってきます。 レスポンシブしてレイアウトが変わる度に画像の大きさが変わっていく場合、どのようにしたら良いのかを予め考えておけばその後の準備が楽になります。 レスポンシブデザインの場合は画像を複数用意する。レスポンシブデザインを作る場合、画面サイズに合わせて複数サイズの画像を用意することが基本となります。 自動的に複数サイズの画像を出力する機能を持つソフトもありますが、機械的
リンクの上にカーソルを持っていくと、ロールオーバーする。これはデスクトップでのリンクやボタンでのお約束になっています。 ですが、このロールオーバーの動作はスマホのようにタッチする端末では使用できません。 逆にタッチした時にロールオーバーの動作を誤動作する事にも繋がります。 この部分をしっかりとしておきたいと思った時は、@mediaを使った振り分けを行うと良いです。 <div class="box"> <a href="#">押すとロールオーバーするボタン</a></di
WEBサイト、いわゆるホームページのWEBデザインを作る時には、大体パソコン版の画面デザイン、スマホ版の画面デザインと、媒体に合わせたデザインを複数作っていると思います。 今回はスマホ版、デスクトップ版、どちらを先に作る？と言う話から始めます。 モバイルファーストの考え方WEBデザインには、モバイルファーストと言う考え方があります。 モバイルファーストとは、「モバイルを先・もしくは同時に考える」と言う考え方です。 デスクトップとモバイルでは画面表示範囲や画面内で出来るこ
gridレイアウトの最大の特徴は、CSSの操作でレイアウトを操作できることにあります。htmlに手を入れずとも、css側が変化したらそれに合わせて見た目のレイアウトが変更していきます。 これは、ものすごくレスポンシブデザインと相性が良いと言うことになります。そこで、レスポンシブデザインを前提においたgridレイアウトを考えてみたいと思います。 横に並んでいるものを縦に並べ直すレスポンシブデザインで一番多いパターンとしては、スマホでは縦に並んでいる物をPCでは横に並べたいと言
