タグ

2023年6月27日のブックマーク (6件)

  • コピペで使える!CSSグラデーションジェネレーター20個まとめ | Web Design Trends

    グラデーションはWebデザインに魅力的な雰囲気を生み出してくれる重要な要素の1つです。慣れてくると自分で思い通りに作れるようになりますが、最初はグラデーションの色使いに苦戦する人も多いのではないでしょうか。 今回は、CSSグラデーションがコピペで使える便利なジェネレーターサービスをご紹介したいと思います。 【2024】おしゃれな配色パターンが見つかる!カラーパレット人気ツール30個まとめ 配色はデザインにおいて重要な要素の1つですが、慣れている人でないとバランスの取れた配色を決めていくのは簡単ではありません。 そこで、今回は初心者の方でもおしゃれな配色ができるカラーパレットツール・配色... Web Design Trends コピペで作れる!おすすめのCSSジェネレーター・ツールまとめ CSSがコピペで実装できるおすすめのジェネレーターやツール、サンプルコードなどをまとめました。 CSS

    コピペで使える!CSSグラデーションジェネレーター20個まとめ | Web Design Trends
  • グラデーションが流れる | 動くWebデザインアイディア帳

    See the Pen 7-1-29 グラデーションが流れる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内のボタンにカーソルをあわせて動きを確かめてね! 動きを実現する仕組み CSS でグラデーションのサイズを大きく描画し、hover をしたら背景の位置を移動させてグラデーションを流す。 HTMLの書き方 head終了タグ直前に自作のCSSを読み込みます。

    グラデーションが流れる | 動くWebデザインアイディア帳
  • CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説!

    なぜCSSでボタンを作るのか?その前に、なぜCSSでボタンを作るのか?について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い!拡張性がある!解像度の心配がない!簡単!と言った理由ではないでしょうか? 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで

    CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説!
  • 一貫1・2年:「すべてはつながっている」の講演会|2023年度|トピックス|明星中学校・高等学校

    2023.06.22 学校生活 一貫1・2年:「すべてはつながっている」の講演会 6月21日(水)2時間目に、一貫中学1・2年生は「探究学習」の一環として、府中市の米穀店社長・小澤量さんを講師にお招きし「すべてはつながっている」をテーマに講演会を実施しました。 生徒にも身近な「お米」をキーワードに、 すべての事柄をバラバラに理解するのではなく、つながりを意識して知識や視点を広げていくことが大切であることを説明してくださりました。 今回の講演は生徒たちにとって、学校の教科と実際の社会との関連性を結びつけて考え、学びをより深めていく機会となりました。 小澤量さん大変貴重なお話をありがとうございました。

    一貫1・2年:「すべてはつながっている」の講演会|2023年度|トピックス|明星中学校・高等学校
  • Webサイトやスマホアプリに使用されているさまざまなアイデアを実現する小さなディテールのまとめ -CallToInspiration

    Webサイトやスマホアプリに使用されている、UIのさまざまなアイデアを実現するための小さなディテールをコレクションしているサイトを紹介します。 49種類のカテゴリにUIのディテールがコレクションされており、見ているだけでインスピレーションが刺激されます。 CallToInspiration CallToInspirationは、WebサイトやスマホアプリのUIで見かけた新鮮なアイデアを実現するための小さなディテールをコレクションしているサイトです。ログインからセクションやコンテンツに至るまで、優れたデザインのアイデアはインスピレーションが刺激されると思います。

    Webサイトやスマホアプリに使用されているさまざまなアイデアを実現する小さなディテールのまとめ -CallToInspiration
  • フレックスボックス - ウェブ開発を学ぶ | MDN

    完全な初心者はこちらから!ウェブ入門ウェブ入門基的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基CSS の基JavaScript の基ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH

    フレックスボックス - ウェブ開発を学ぶ | MDN
    tenchikometen
    tenchikometen 2023/06/27
    flexbox