2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま

PHPサイトなどの動作確認の為、 XAMPPを使ってLocalhostで作ったサイトを確認しています。 Windows10にアップグレードしたあとで、 XAMPPがうまく動かなくなってしまいました。 厳密にはApacheのStartを押してもスタートしてくれないんです。 その時に僕がやった対処法を備忘録として書いておきます。 ポートの確認 まず、XAMPP右上の[Config]を押下します。 Configuration of Control Panelという画面が開くので、 [Service and Port Settings]を押下。 Service Settingsという画面が開きます。 そこにApacheが使用しているポート番号が書いてあります。 おそらく80って書いてますね。 次にXAMPPがインストールされているディレクトリを見ます。 僕の場合はC:XAMPPです。 その中にIn

ドロップレットを編集して書き出し先のパスを書き換える 現在の最新は xtools2.1 。DropletDecompiler.jsx しか試さなかったけど、windows7 32-bit Photoshop CC では動かなかった。mac OSX 10.9 Photoshop CC では動いたんだけどな… テスト内容は Cドライブ直下に test/A、B フォルダを作成、Aフォルダ内に jpg画像を書き出すドロップレットの書き出し先を Bフォルダに変更するというもの。exeファイルから書き出し先のパスを編集して再度ドロップレットを作成するまでの手順。 01. ps-scripts(xtools) v2.0 をダウンロード リンク先 から xtools-2_0.zip をダウンロード。 リンク xtools ps-scripts / Download xtools-2_1.zip（最新版）

Javascriptを使わず、CSSだけでimgやdivやiframeのアスペクト比を固定したままコンテナに合わせてリサイズする方法です。 レスポンシブなデザインの場合は端末の画面サイズに合わせて要素の幅を変える必要があるので、こういうテクニックを使ってアスペクト比を固定してやります。 imgの場合 HTML

CSSのobject-fitとobject-positionプロパティって知ってますか？ 画像だけでなく、動画のサイズ調整（特にレスポンシブ！）にも使える便利なプロパティ、今後のWeb制作の現場で活躍しそうですよ。 Webサイトのレイアウトをするとき、動画や画像は潜在的な問題を抱えています。 たとえば、CSSで画像の幅を明示的に指定したとしましょう。もしその幅がパーセントまたはビューポート単位で指定され、高さがautoに設定されていると、ブラウザーのウインドウサイズを変更しても画像のアスペクト比は保たれますよね。 ただ、これだと画像が縦長の場合にスペースを取ってしまうので、画像の高さを制限したいときもあります。ところが、単に高さをCSSで制限すると、今度はアスペクト比が崩れてしまうのです。 こうした、画像とアスペクト比に関連する多くの問題は、CSSのobject-fitとobject-po

今回は上下中央に配置したいものの高さと幅が決まっていますが、この方法であれば文章などの不規則な高さのものも上下中央に配置可能です。 HTML <div class="box> <img src="dummy.png alt="" width="24" height="24" class="img" > </div> .box { position:relative; height:300px; } .img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

2016年04月05日更新2016年04月23日 CSSで要素の順序が変更できるFlexboxのorderでレスポンシブデザインの幅を広げよう Flexbox前々から気にはなっていましたが、対応ブラウザ的に厳しいかなぁと思って使ったことが無かったのですが最近は結構頻繁に使っています。Flexboxを使った方がレイアウトを組むのも速いですし、orderプロパティで要素の順番を操作できるので、スマホでもデスクトップでも無理なくレスポンシブ�デザインを再現できます。 まぁ最悪無理にデスクトップにFlexbox使わなくても、スマホ使うだけで従来のコーディングよりザインの幅が広がります。 Flexboxはレスポンシブのスマホにだけでも利用価値はある レスポンシブデザインでスマホのときだけこのパーツ入れ替えたい、ってことがよくあります。特に一覧系ページです。僕的には一覧系ページってスマホとデスクトップ

はてダが終わるというので正式に引っ越し https://shi3z.hateblo.jp