マガジンのカバー画像

PATAPATA WORKS 2022 記事アーカイブ

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

#HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

リンクの上にカーソルを持っていくと、ロールオーバーする。これはデスクトップでのリンクやボタンでのお約束になっています。 ですが、このロールオーバーの動作はスマホのようにタッチする端末では使用できません。 逆にタッチした時にロールオーバーの動作を誤動作する事にも繋がります。 この部分をしっかりとしておきたいと思った時は、@mediaを使った振り分けを行うと良いです。 <div class="box"> <a href="#">押すとロールオーバーするボタン</a></di

【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を使う…

【CSS】gridの使い所とFlexの使い所

display:gridとdisplay:flexの2つは最近のWEBデザインを構成するために必要な要素になっていま…

【CSS】counterを使ってリストやフローのデザイン力を上げる

CSSも種類が増え、色々なことが出来るようになりました。その中でもちょっと変わり種のものをご紹介します。 今回ご紹介する「counter-reset」「counter-increment」「counter()」の一連のCSSを使用することで新しい事が出来るようになります。 counterの基本的な使い方基本的な使い方としては、連番をカウントする方法が一般的な使い方になります。これは、<ol>と全く同じです。 HTML <ol class="list"> <li>りすと