マガジンのカバー画像

PATAPATA WORKS 2022 記事アーカイブ

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

#css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【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も種類が増え、色々なことが出来るようになりました。その中でもちょっと変わり種のものを…

【CSS】○番目の要素を選択する疑似クラス色々

CSSは擬似クラスが追加されてから色々な条件でのCSSの設定ができるようになりました。 今回説明する擬似クラスもいろいろな用途で必ず必要となる使用頻度の高いものになっています。 1番最初と1番最後を指定したい!「:first-child」「:last-child」 リストなどを作成した場合、先頭にあるもの、最後にあるもの、もしくは最初と最後に何かしら変更したい事があると思います。 その場合に必要になる擬似クラスが「:first-child」「:last-child」になり