20210105のCSSに関する記事は5件です。

【初心者でもわかる】親子関係を持つメニューの作り方

メニューの中でも、①②③と続く中で、①-1、①-2と子供を持つメニューを作る場面があると思います。
WEBサイトを利用するユーザーに伝わりやすいような親子関係が分かりやすいメニューを作ります。

sample.png

ソース

index.html
<ul class="menu">
  <li>
    <a href="#">①あの段</a>
    <ul class="child">
      <li><a href="#">①-1 あ</a></li>
      <li><a href="#">①-2 い</a></li>
      <li><a href="#">①-3 う</a></li>
      <li><a href="#">①-4 え</a></li>
      <li><a href="#">①-5 お</a></li>
    </ul>
  </li>
  <li>
    <a href="#">②かの段</a>
    <ul class="child">
      <li><a href="#">②-1 か</a></li>
      <li><a href="#">②-2 き</a></li>
      <li><a href="#">②-3 く</a></li>
      <li><a href="#">②-4 け</a></li>
      <li><a href="#">②-5 こ</a></li>
    </ul>
  </li>
</ul>
style.css
.menu {
  width: 150px;                /* 適当なサイズを指定 */
  border: 1px solid #666;      /* 枠線を作成 */
}

.menu li a {
  width: 100%;                 /* 幅を100%に指定 */
  border-top: 1px solid #666;  /* 上に線を引く */
  padding: 10px 20px;          /* 余白を指定 */
  display: inline-block;       /* 幅指定・余白を付けるために必要 */
  box-sizing: border-box;      /* 計算を簡単にするために必要 */
}

.menu > li:first-child > a {
  border-top: none;            /* 最初は上の線を無くす */
}

.menu li a:hover{
  background: #CCF;            /* カーソルを乗せた時の見た目 */
}

.menu li .child li a {
  padding-left: 40px;          /* 左の余白を大きめに上書き */
}

解説

まずは親子関係を持たせるためにhtmlのソース側で親子関係を作ります。
ulliの中に、またulliの組み合わせを用意して親子関係を持たせます。
CSSを当てやすいように親のulには「.menu」、子のulには「.child」のクラスを付けています。

基本的にはliのデザインテイストを合わせるために.menu li aにたいして主要なCSSを作っていきます。

その後、.menu li .child以下にたいしてのみ効かせるようなCSSを書くことで、差別化を測ります。
今回の例ではシンプルに少し右寄せにしてみました。
ほかにもこのようなデザインも作る事が可能です。

sampl2.png

style.css
/* .childのCSSを少し変更 */
.menu li .child li a {
  width: calc(100% - 30px);
  margin-left: 30px;
  padding-left: 10px;
  border-top: 1px solid #CCC;
}

まとめ

ヘッダーのハンバーガーメニューをクリックしたら、今回作成したメニューが出てくるように作成したり、
目次ボタンを押したらアコーディオンでメニューが出てくるなど使い方は様々あるかなと思います。

コーディング始めたての頃はタグの要素が2重になったりするとややこしくて上手くCSSがかけない事もありますが、
落ち着いて綺麗に作れば改良も修正も簡単になるので、様々なサイトを参考にしながら模写コーディングするなどでスキルを上げていくのがいいのかなと思います。

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

標準リストビューに表示するレコードがない場合でも、テキストを表示する

背景 Background

https://help.salesforce.com/articleView?id=rss_record_list_view.htm&type=5

標準リストビューまたはコンパクトリストビューに表示するレコードがない場合、コンポーネントは非表示になります。

NOTE If there aren’t records to display for either a standard or compact list view, the component is hidden.

ところが、標準リストビューをExperience Cloudなどで使いたいとき、これでは都合が悪いことがある。

However, this can be inconvenient for general users when the component is used in Experience Cloud.

対処法 How to manage

ヘッダーマークアップに以下のcssコードを入れると、標準リストビューの内容が空のときだけメッセージが出せる。
In header markup add following css to display a message when the record list is empty.

<style>
    div.forceCommunityRecordListStandard:empty::after {
    content: "表示するデータがありません No records available";
}
</style>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

3秒で画像をトリミングできます

今回は画像サイズがバラバラな状態から、たった一行CSSを付け加えるだけで画像をトリミングできる方法をお伝えします。
結論から言ってしまうと今回使用するプロパティーは「object-fit」になります。
おそらく聞いたことある人も多いかもしれません。
具体的な使用法ですが、本当に簡単です。
通常であれば
img {
width:100px;
height:100px;
}
としますよね。そうすると画像が縦や横に伸びて変な感じになりますが、先程紹介したプロパティーを追加してみてください。
img {
width:100px;
height:100px;
object-fit:cover;
}
これだけです!本当に簡単ですよね!
ただ、、、
自分が配置したい箇所が必ずしも中央にあるとは限りませんよね?
中央以外でトリミングしたい場合だってあります。
安心してください。こちらも簡単です。
今度は「object-position」プロパティーを設定しましょう。
object-position :縦の位置 横の位置;
このようにすれば簡単にお好みの部分にフォーカスしてトリミングすることができます。

今回は簡単にトリミングする方法を紹介しました。
今までpositionを使ってきた方からすれば早く紹介してよと言われそうな気がします...

では!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Flexプロパティが分からない!

皆なさん「Flexプロパティ」はご存知でしょうか?
私自身flex:1 1 auto;というコードをみて
「何それ?美味しいの?」と思い調べて理解したので共有させていただきます。
まず、このflex:1 1 auto;こちらは
flex-grow、lex-shrink、flex-basisの3つを一気に指定するものになります。では、一つずつ見ていきましょう。

・flex-grow

こちらはflexコンテナ全体の幅にflexアイテム合計幅が満たない場合の伸縮率になります。
もっと噛み砕いていうと、flex-grow:1;の場合 「一つの部屋を3人でシェアする時、みんな均等にスペースを分けようね」っていうことです。
参照.png

もしflex-grow:1 2 1;の場合
2の人が欲張りになっちゃいます。
参照2.png
続きまして。。。

・flex-shrink

こちらはflexコンテナ全体の幅よりflexアイテム合計幅が多い場合の縮む比率になります。
先程とほぼ一緒になりますが、噛み砕いていうと、flex-shrink:1 1 1;の場合 「一つの部屋を3人でシェアする時、俺だけ多めに撮ってしまってるからみんなで分け合おうぜ」っていうことです。
参照3.png
続きまして。。。

・flex-basic

flexアイテムの基準幅を設定するものになります。
px, em などの単位付きの数値や、親の Flex コンテナの main size に対するパーセンテージで指定します。
例えば親要素に今までのgrowやshrinkが設定されているとbasicで設定した値になるとは限らないので注意してください。

ここまできていうのもなんですが、一番王道な均等に全ての要素を配置したい場合はflex: 1 1 auto;としてしまえばOKかと思われます。

以上Flexプロパティでした!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

?「HTMLへBootstrapを組み込み後CSSが反映されない」エラー解消

今日の勉強時に発生したエラー記録です。

<内容>
htmlへBootstrapを組み込んでいた際に、<hr>,<h1>のcssが反映されないエラーが発生しました。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ご利用アンケート</title>

  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <header>
      <div class="row">
        <div class="col-sm-6">
          <h1>ご利用アンケート</h1>
        </div>
        <div class="col-sm-6 align-right">
          <a href="/">HOMEへ戻る</a>
        </div>
      </div>
    </header>
  </div>

    <hr>

    <hr>

  <div class="container">   
    <footer>
      <p>&copy; H20 space</p>
    </footer>
  </div>

</body>
</html>
style.css
header {
  margin-top: 30px;
  color: #2e99a9;
}

hr {
  border-width: 3px;
  border-color: #2e99a9;
}

h1 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.align-right {
  text-align: right;
}

<web上画面>
スクリーンショット 2021-01-04 23.28.53.png

<確認事項.1>デベロッパーツールの確認

スクリーンショット 2021-01-04 23.26.57.png
スクリーンショット 2021-01-04 23.28.21.png

<確認事項.2>コードのスペルミスの確認
問題なかったので、google検索を実施しました。
<検索結果>
Bootstrapとcssのファイルが喧嘩していたのが原因のようです。

<検証①>cssタグの前に直前のクラス名を入れてみる
.col-sm-6 h1
.conteiner hr
<結果①>全く効果無しのため次の検証②へ進みました。

<検証②>linkタグ順を入れ替えcssファイルの優先順位を上げる

index.html
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="../css/style.css">

<結果②>成功!!cssファイルが<hr>,<h1>へ反映されました!
スクリーンショット 2021-01-04 23.59.20.png

ファイルの優先順位に関する知識の復習不足が原因でした。復習、アウトプットを今後も続けていきます?

google検索時の参考記事↓↓
cssが効かない・反映されないときの対処法
https://saruwakakun.com/html-css/wordpress/cant
teratail Q&A
https://teratail.com/questions/86446

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む