CSS Gridを使ったレスポンシブ対応の基本レイアウト
2022年4月27日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 2カラム まずは基本の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！ 可変幅 2カラム カラムを画面の幅に合わせて伸
WEBサイト制作で見かけるライセンス周りのお話（デザイナー・エンジニア編） | 株式会社PLAN-B
突然ですが皆さん、ライセンスのお話はお好きでしょうか? 何となく避けてしまいがちなライセンスのお話。私も含め多くのWeb制作に携わる方が「面倒くさい・多すぎて意味不明」などと思っていることでしょう。ぶっちゃけいいますと、特段詳しくなる必要はなく、正しい判断が欲しければ専門家に委ねればいいわけです。 ただ何も知らないというのは無知蒙昧。Web制作に携わる者であれば是非ともさわりぐらいは知っておきたい所です。というわけで、今回は特にデザイナー・エンジニアに関係してくるライセンス周りについてまとめてみました。 ライセンスって何?ざっくりと一言で説明するなら「利用者が守らなければならない決まりごと」です。色々難しい言葉で説明されていたりしますが、要するに「利用するならこのライセンスで定義された決まりごとを守ってくださいね。守らないと著作権法の下で罰則が適用されるので注意してね♪」ということです。
CSSのクラス名を決めるときに使うリストをつくりました
CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分
レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadate」 – bl6.jp
pickadateはレスポンシブに対応したモバイルフレンドリーなデートピッカー・タイムピッカーを実装できるjQueryプラグインです。軽量でサクサク動作するのでとても快適です。 pickadateの実際のデモは以下のページからチェックできます。 デモ デモでは「Try me…」と書かれたボックスが2つ設置されています。上にあるのが日付を指定するデートピッカー、下にあるのが時間を指定するタイムピッカーになっています。 デートピッカーでは大きめのカレンダーが表示されるのでとても見やすく選択もしやすい印象です。タイムピッカーでは縦長に30分単位で時間を選択できるようになっています。こちらはスクロールしながらシンプルに時間を選べるのでスマホやタブレットなどのモバイルでの操作性はとてもよさそうですね。 また、pickadateはタッチやキーボードによる操作も可能になっているほか、40以上の言語翻訳も
商用利用無料！動画やアニメのさまざまなエフェクト・モーショングラフィックがパーツとして利用できる素材
動画やアニメで使用されるさまざまなエフェクト・アニメーション・モーショングラフィックがパーツとして利用できる無料素材を紹介します。 オープニングや切り換え、強調する時に見かけるアニメーションが、これでもかというボリュームで揃っています。
いい感じに文字詰めをしてくれるCSSプロパティ「font-feature-settings」 | TechMemo
font-feature-settingsプロパティは、CSSを1行追加するだけで、いい感じに文字詰めを行ってくれるプロパティです。 文字詰めを調整するプロパティといえば、letter-spacingが思い浮かびますが、letter-spacingだとすべての文字が指定した値で均一に調整されます。 それに対してfont-feature-settingsは、文字の種類や記号などで詰める幅を自動で調整してくれます。そのため、自然な文字詰めを実現することが可能です。 font-feature-settingsの使い方は簡単で、文字詰めを行いたいセレクタに以下のCSSを追加するだけです。 p { font-feature-settings: "palt"; } ちょっとわかりにくいかもですが、左が文字詰めあり、右が文字詰めなしの場合です。以下の例では見出しも文字詰めしています。 カギ括弧などの記号
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
様々なデバイスのモニターに任意の画像を合成できる・「MockupPhotos」
The Blog | Welcome to Adobe Blog
