マガジンのカバー画像

PATAPATA WORKS 2022 記事アーカイブ

44
2022年に作成した記事のアーカイブです。
運営しているクリエイター

記事一覧

position:stickyで画面に貼り付けよう!

WEBサイトを作る場合、ヘッダやフッタの要素を固定したりする事があると思います。完全に固定…

ボタンを押してもらうためにいろんなことを考えたい

WEBサイトはどんなものでも、何かボタンを押してもらうことで先に進むように作られていると思…

ホームページのメールフォームはこれからどうなるんだろうか

今回は、メールフォームについて最近ちょっと考えてることを色々出してみたいと思っております…

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

縦と横のサイズの指定は、レイアウトを作成する上でものすごく重要なことです。指定方法として…

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

最近は小さいアイコンなどをSVGで作るのが主流になってきました。良いことです、とてもいいこ…

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

今日のタイトルは特に夜の居酒屋で見かけるようなおじさん向けに作りました!パタパタワークス…

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

WEBデザインを作るにおいて、中身の記事を読んでもらえるのかどうかは気になる所です。ページを見てもらうためにどのように作ったら良いのだろうかと色々と考えてみました。 ページを見たらすぐにスクロールされると考えるまず自分がサイトを見た場合、一瞬だけページを確認したらすぐにスクロールを始めると思います。 デスクトップ以上にスマホではスクロールのしやすさと速度が違うので、さらにスクロールしていくことになります。一瞬で内容が把握できない場合は、見ている人のスクロールが止まらないと考

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

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

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

WEBデザインでは、まずはじめのファーストビューが重要です。 作るページによって様々な見せ方…

【HTML】img・picture・figureを使い分けよう

画像を表示するためのHTMLタグとして、<img><figure><picture>があります。それぞれ目的別に役…

レスポンシブデザインで使う画像の作り方

レスポンシブデザインを作成する時に、どのように画像を取り扱うのかによってその画像の準備の…

【小ネタ】ロールオーバー出来る時にロールオーバーをさせたい

リンクの上にカーソルを持っていくと、ロールオーバーする。これはデスクトップでのリンクやボ…

WEBデザインの話~デザインもモバイルファーストで作った方が良い?

WEBサイト、いわゆるホームページのWEBデザインを作る時には、大体パソコン版の画面デザイン、…

【css】gridレイアウトとレスポンシブデザイン【gird編その2】

gridレイアウトの最大の特徴は、CSSの操作でレイアウトを操作できることにあります。htmlに手を入れずとも、css側が変化したらそれに合わせて見た目のレイアウトが変更していきます。 これは、ものすごくレスポンシブデザインと相性が良いと言うことになります。そこで、レスポンシブデザインを前提においたgridレイアウトを考えてみたいと思います。 横に並んでいるものを縦に並べ直すレスポンシブデザインで一番多いパターンとしては、スマホでは縦に並んでいる物をPCでは横に並べたいと言