マガジンのカバー画像

PATAPATA WORKS 2022 記事アーカイブ

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

2022年6月の記事一覧

簡単な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を使ってレイアウトを作ろう【grid編その1】

ホームページ制作に本格的にgridレイアウトが導入されてから、格段にページのレイアウトを作り…

【CSS】色々なサイズの画像を揃えるための画像の配置方法【小ネタ】

ちょっとした小ネタも不定期に紹介していきます。 例えばこのような画像を3つとも同じサイズ…

【CSS】flexをレイアウトで使ってみよう【flex編その2】

flexを並べる方法を学習したので、次はflexを使ったレイアウトを考えてみましょう。近年レイア…

【CSS】flexを使う場面での使い方一覧【flex編その1】

flexはdisplay:flexで作ったものを整列させます。基本的に要素を横に並べたいときはflexを使うことが基本になります。 今日は、その使用する場面の例をちょっとだけ紹介します。 1. フッタなどでアイコンボタンを並べる用途スマホアプリのようなデザインで、フッタなどにアイコンのようなものを並べる用途等にはflexでの整列が役に立ちます。 <div class="footer"> <a href="#"><img src="./img/thumbs-up@3x.p