マガジンのカバー画像

PATAPATA WORKS 2022 記事アーカイブ

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

#コーディング

【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>りすと

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

CSSは擬似クラスが追加されてから色々な条件でのCSSの設定ができるようになりました。 今回説…

【CSS】beforeとafterを上手に使おう【擬似クラス】

毎日更新ってけっこう大変なんですね!という訳で今日もCSSの使い方のちょっとしたコツを紹介…

【CSS】ON/OFFのスイッチをフォームで作ってみる

最近のホームページ制作ではフォームの使い道が色々増えたと思います。 例えば上の画像のよう…

【CSS】これからのメールフォームの為にテキスト入力をグラフィカルにしよう

ホームページを作る場合、一緒に作る事が多いメールフォーム 今でもお問い合わせフォームを作…

【HTML・CSS・javascript】ハンバーガーメニューを作る

線が3本のボタンをクリックしたら画面いっぱいにメニューがスクロールしてくるハンバーガーメ…

【HTML】HTML5でコーディングするときの基本

昔からWEBの制作をやっていますと、HTMLの書き方等がどんどん変わってきて行くのがよくわかり…

【CSS】imgの画像をピッタリ合わせるobject-fit

古くから、CSSで画像をフレキシブルに横いっぱいに広げたい場合 .image { width: 100%; height:auto;} このように横幅100%、縦幅autoにimgタグを指定することで再現していました。現在もこのような指定の仕方がメインです。 ただし、サムネイル一覧ページなどを作る場合、この方法で画像を並べた場合は画像のサイズが揃っていることが必須になります。 つまりサイズがバラバラの画像を並べる場合にはこのCSSの指定だと問題が発生することになりま