タグ

divに関するtoshiharuonishi152のブックマーク (3)

  • カードデザインのポイントと実装方法

    2018年5月18日 CSS, Webデザイン Pinterestがカードスタイルのデザインを取り入れてから、TwitterやFacebookをはじめ、多くのWebサイトで採用されているカードスタイルのデザイン。今回はそんなカードデザインの特徴やデザインのポイント、実装方法などをまとめてみます! ↑私が10年以上利用している会計ソフト! カードデザインとは 名前のとおり、カードのような四角形を並べたスタイルのデザインです。多くの場合、ひとつの項目に対して画像やテキスト、ボタン等、様々な要素が含まれています。ECサイトやコンテンツの多いWebサイトでよく見かけるスタイルですね。 Etsyは手作りの商品を販売できるECサイト。商品の画像を大きく打ち出し、その商品に関する情報が掲載されています。ログインしていれば、詳細サイトにいかなくてもお気に入り登録などが可能。ページ移動をしなくてもなにかしら

    カードデザインのポイントと実装方法
  • HTML 背景色のチュートリアル – div の背景色の変更方法をコード例付きで解説

    原文: HTML Background Color Tutorial – How to Change a Div Background Color, Explained with Code Examples ウェブ開発を行う上で、HTML 要素の背景色の変更はよくある作業です。しかし、CSS の background-color プロパティの使い方を理解していないとややこしく感じるかもしれません。 この記事では以下の内容を扱います。 HTML 要素のデフォルトの背景色よく使われる要素である div の背景色を変更する方法background-color プロパティは CSS ボックスモデルのどの部分に影響するかbackground-color プロパティに指定できるさまざまな値要素のデフォルトの背景色div のデフォルトの背景色は transparent (透明) です。そのため、div

    HTML 背景色のチュートリアル – div の背景色の変更方法をコード例付きで解説
  • HTMLだけでボックスデザイン(囲み枠)を作ってみよう!

    ボックスデザイン(囲み枠)とは? ボックスデザインは、ブログやWebサイトを作る際に便利です。 例えば・・・ POINTをおきたい場所 目立たせたい部分 目次・まとめ etc…. に使うと締まりのあるページが作れます。 ボックスデザインを作るには、スタイル要素を使います。 HTMLCSSを組み合わせて作るのが一般的ですが、 HTMLだけで作成することも可能です。 HTMLとかCSSとかよくわからないという方や、 WordPressでブログを書いているけど、追加CSSがよくわからない、 テーマエディターを触るのはちょっと心配という方に特にオススメなのが HTMLだけでボックスデザインを作る方法です。 ボックスデザイン(囲み枠)の作り方 コピペで使える、ボックスデザインの作り方をご紹介します。 WordPressでコピペする場合は、テキストエディター(HTMLとして編集)に切り替えてください

  • 1