What's New Qiita

20200223のHTMLに関する記事は7件です。

  • 投稿日：2020-02-23T20:08:28+09:00

HTMLとCSS

【HTMLについて】

【タグ】
➡「見出し」「リンク」の意味を持つ
⇒で囲む。<ｈ１></ｈ１>が一番大きな見出し。

【段落】
⇒＜p＞＜/p＞で囲む。

【コメント】
➡ブラウザには表示さえず、メモとして使う
⇒<!-- -->で囲む。

【リンク】
⇒＜a＞＜/a＞で囲む。
⇒＜a href="URL"＞＜/a＞で囲むとURL部分にリンク先のURLを指定し、そのページへのリンクができる。

【画像の表示】
➡終了タグは必要ない。
⇒＜img src="URL"＞のURLの部分に画像のリンクを指定する。

【リスト】
⇒＜li＞＜/li＞で囲むとリストができる

囲む要素で以下のように種類が変わる！
⇒＜ul＞＜/ul＞で囲むと黒店が先頭につく
⇒＜ol＞＜/ol＞で囲むと数字が連番でつく

例）入れ子状態ではインシデント（字下げする）
　　行の最初にtabキーでできる。
＜ul＞
　＜li＞HTML＜/li＞
　＜li＞PHP＜/li＞
　＜li＞Ruby＜/li＞
＜/ul＞

【CSSについて】
➡色、大きさ、配置を指定。デザインする
➡HTMLと別のファイルに記述する。

【色の指定】
例）色は１６進数のカラーコード（#ff0000のように）で色指定する
h1{ 　　　　　　　　　　　　　 　//どこの
　color:red;　　　　　　　　　 　　//何を（色）：どうする（redにする）；
　font-size:　10px;　 　　　　　　　//文字を：10pxのサイズにする
　font-family: "Avenir Next"; 　　　　 //フォントを："フォント名"にする；
　background-color:　#ffd800；　　 //背景フォントを：色にする；
　width:500px;　　　　　　　　　　 //横幅：500pxにする；
　height:80px; 　　　　　　　　　　//縦幅：80pxにする；
}

【CSSのコメント】
⇒/＊　＊/で囲む。

【クラスをつける】
HTML側
＜ul＞
　　＜li class="selected"＞HTML＜/li＞　　//class="クラス名"
　　＜li＞PHP＜/li＞
＜/ul＞

CSS側
.selected ｛　　　　//class名には.をつける
　　color:red;
　　border:5px solid red;　　　//線：太さ　種類　色；で線で囲まれる。（border-bottomで文字の
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　下のみに線がつく）
　　padding:20px;　　//上下左右に２０pxの余白を追加する(padding-top(上部のみ、他-bottom、
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-left、-right):20px;)
　　　　　　　　　　　（borderの下に書くことで、枠の中に余白追加）
　　margin:20px;　　　　//borderの下に書くことで、枠の外側に余白がつく
｝
li{
　list-style:none;　　　　//リストのマークをなくす
　float:left;　　　//要素が左に横並びになる
}

【HTMLのバージョン宣言】
<!DOCTYPE html>
＜html＞
＜head＞　　　　　　　　　　　　　//ページに関する情報。WEBページには表示されない
　＜meta charset="utf-8"＞　　　 　　//文字コード＝”文字コード”
　＜title＞Progate＜/title＞　　 　　　//ページタイトル。ブラウザのタブ上に現れる
　＜link rel="stylesheet"href="stylesheet.css"＞　　//CSSの読み込み”CSSのファイル名”
＜/head＞
　　　　　　
＜body＞　　　　　　　　　　//実際に表示したい内容
　＜div class="header"＞　　　//ヘッダーの＜div＞要素
　　　＜div class="header-logo"＞Progate　　//ロゴの＜div＞要素
　　　＜div class="header-list"＞　//ヘッダーのリストの＜div＞要素
　　　　　＜ul＞
　　　　　＜ul＞
　　　＜/div＞
　＜/div＞

　＜div class="main"＞　　　　//メインの＜div＞要素
　＜/div＞

　＜div class="footer"＞　　　　//フッターの＜div＞要素
　　　＜div class="footer-logo"＞Progate　　//ロゴの＜div＞要素
　　　＜div class="footer-list"＞　//フッターのリストの＜div＞要素
　　　　　＜ul＞
　　　　　　　＜li＞＜/li＞
　　　　　＜ul＞
　　　＜/div＞
　＜/div＞

＜/body＞　　　　　　　　　
＜/html＞

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-23T17:41:39+09:00

::selectionで選択された文字を装飾

::selectionとは何ぞや

テキストなどが選択(テキストをマウスでクリックやドラッグ) された際の装飾をするためのcssです。
デモページをご覧ください。

デモページ　https://hojihoji.net/selection/

黒字に黄色背景がおしゃれで見やすくて良いですね。
白字に黒背景もかっこいいです。
５つ目は見づらいので良くないですね。

使い方

::selectionの後に記述をするだけです。
Firefox対策のためにmozのプレフィックスを記載します。

css
::selection{
    color: #000;
    background: #ffff00;
}

::-moz-selection{
    color: #000;
    background: #ffff00;
}

使用可能なプロパティは以下です。
color
background-color
cursor
caret-color
outline およびその個別指定プロパティ
text-decoration および関連プロパティ
text-emphasis-color
text-shadow

参考サイト：　https://developer.mozilla.org/ja/docs/Web/CSS/::selection

色の組み合わせには注意が必要

MDNにも記載がありますが、色の組み合わせによっては、
見づらくなるケースもあるので使用の際には注意です。
デモページの５つ目などは見づらいですね。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-23T17:32:37+09:00

【第 1 歩】CSSのFlexboxを使ってみました。

はじめに

はじめまして。
なびげーとです。

今日は初めての投稿をします。

CSSのFlexboxについて勉強しているときに、いろいろ迷ったので、
備忘録としても活用できるように記事を書いてみようと思いました。

至らない点も多々あると思いますが、誰かのお役に立てるような記事になれば幸いです。

目的

以下のようなタイル調のデザインを作成する。
1-1.png

前提条件

各タイルは画像とし、画像にはリンクが設定されているものとする。

考え方

縦のFlexboxと横のFlexboxを組み合わせる。

準備

今回は四角の図形ばかりなので、わかりにくくならないためにそれぞれに名前と色をつけました。
1-2.png

開発環境：
VisualStudioCode

実践

1. 縦のFlexbox

まずは縦のFlexboxを作ります。
1-3.png

HTML

index.html
<body>
    <header></header>
    <section main>
      <div class="container">
        <div class="content-column">
          <a href="#"><img src="../images/small_01.png"/></a>
          <a href="#"><img src="../images/small_02.png"/></a>
        </div>
      </div>
    </section>
    <footer></footer>
  </body>

CSS

style.css
.content-column {
  display: flex;
  flex-flow: column;
}

.content-column a {
  margin: 5px;
}

まず、htmlに2つの画像を用意し、その2つの画像を囲むdiv（content-column）を設定する。

2つの画像を囲ったdiv（content-column）に display: flexを設定し、
縦に並べたいので、flex-folwはcolumnを指定。

画像コンテンツの間に少し余白が欲しいので、ひとまずmarginも設定してます。

2. 横のFlexbox

このとき、横にFlexboxで並べるのは以下の3つです。
・large_01
・content-column（small_01, small_02）
・large_02
1-4.png

HTML

index.html
<body>
    <header></header>
    <section main>
      <div class="container">
        <div class="content-row">
          <a href="#"><img src="../images/large_01.png"/></a>
          <div class="content-column">
            <a href="#"><img src="../images/small_01.png"/></a>
            <a href="#"><img src="../images/small_02.png"/></a>
          </div>
          <a href="#"><img src="../images/large_02.png"/></a>
        </div>
      </div>
    </section>
    <footer></footer>
  </body>

CSS

style.css
.content-column {
  display: flex;
  flex-flow: column;
}

.content-column a {
  margin: 5px;
}

.content-row {
  display: flex;
  flex-flow: row;
}

おや...？
1-5.png

実は今回は画像サイズをsmall画像*2 = large画像にはしておらず、上記のような状況になっております。
今回は高さをpx指定で調整します。

3. 画像サイズがバラバラなので、調整する

CSSだけ書き変えます。

CSS

style.css
@charset "utf-8";

img {
  max-height: 100%;
  max-width: 100%;
}

.content-row {
  display: flex;
  flex-flow: row;
}

/* imgの親がaなので、aに対してheight指定しておかないと、imgのmax-heightが適用されない */
.content-row a {
  margin: 5px;
  height: 150px;
}

.content-column {
  display: flex;
  flex-flow: column;
}

/* imgの親がaなので、aに対してheight指定しておかないと、imgのmax-heightが適用されない */
.content-column a {
  margin: 5px;
  height: 70px;
}

1-6.png

自分がハマったポイントはどのタグ・要素に高さを指定するかでした。
最初<div class=container>に対して高さを指定しましたが、その場合<div content-column>内のimgのmax-height: 100%が<div class=container>に対しての高さに対して有効になってしまったため、samll画像の調整ができませんでした。
また、large画像の高さを調整するときも<div class=content-row>に150pxを指定してもうまくいきませんでした。
コメントにしてますが、imgの親であるaタグに対して高さを指定することでimgのmax-height: 100%が有効（自分がイメージしていた指定）になりました。

まとめ

Flexboxの実装はとても簡単でした。
ただし、いくつか組み合わせようとしたとき、高さの指定や画像が想定の範囲に収まらないことがありました。
一見複雑な見た目でも全体像を「パズル」、作るのは「パズルのピース」とイメージをすることで、簡単に実装できました。

そして、この記事を書いているときに気づいたのが....
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout
グリットレイアウトの方がよかったのでは....？
グリットレイアウトでも作成して比較できたらいいなと思います。

今回は以上です！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-23T15:29:23+09:00

謎解きが好きすぎて未経験でも2週間で謎解きサイトが作れた話

自己紹介

こんにちは、おこめなんと言う者です。
普段はFree Templateという団体で謎解きやボードゲームをつくっています。

2019年のクリスマスに謎解きサイトをつくったので、その時の経験を共有して
WEB謎制作のハードルを下げられたらと思って記事を書いています。

お時間ある方は『クリスマスとイタズラ好きの悪魔ちゃん』を解いてみてくれたらうれしいです。

ちなみにWEB謎制作でプログラミングの楽しさにめざめて
今は謎解きスマホアプリを制作中です！
作りおわったらまた記事を書くと思うのでよろしくお願いします。

対象の読者

web謎作ってみたいけどやり方わからない謎クラスタ
謎解きに興味あるエンジニア

謎解きに興味もってくれて、「作りたい！」って思った人はTwitterでDMくれたら全力で手伝わせていただきます。

環境/言語

環境:wordpress（Cocoon）
言語:html,css,javascript,jQuery

もともと謎解きのブログとして運用していたwordpressのサイト上で作っています。
Cocoonというテーマを使うと、編集画面からjavascriptを書けるので簡単にできます。

基本的に画面の見た目はhtml,cssというものを使って
「クリックしたら〇〇する」みたいな条件はjavascriptを使うとできます。
jQueryはjavascriptみたいなものだと思ってます。（間違っていたらごめんなさい）
書き方が違うだけであまりやってることは変わらないと思います。

具体的な例

ここからはネタバレになってしまうので、まだ解いていない人で解きたい方はこちらが終わってから読んでください。
難しいと思ったところだけピックアップして説明しています。

アドベントカレンダー

calenderDoor.gif

CSSでアドベントカレンダー作ったよー

の記事を参考にしました。
コピペでこんなにかっこいいカレンダーがつくれるのすごいですよね。

あまり難しいことはわからないので、雪を降らすのはあきらめました。
重要なのはカレンダーの扉が開くなので！

下記のコードは扉の一部です。
ざっくり説明すると
クリックしたときだけ特殊なCSSが効き扉が開いたように見える仕組みです。
疑似セレクタ？というらしいですが詳しくはわかりません。

カレンダーの扉
      <td class="cale">
        <div class="advent-calendar__item">
          <input class="box" type="checkbox" name="1" value="1" id="1">
          <label for="1">
            <div class="contents">
              <img src="画像のURL">
            </div>
            <div class="contents2">
              <span class="contentsText">き</span>
            </div>
            <div class="door"><span>1</span></div>
          </label>
        </div>
      </td>

クリックで画像切り替え

boushi.gif

HAPPY　HALLOWEENがMERRY　CHRISTMASに切り替わる部分です。
こちらも難しいことはやってなくて、クリックするとCSSが切り替わります。
魔女の帽子を隠す→サンタ帽を出す
みたいなことをやっています。

帽子の切り替え
      <td class="cale">
        <div class="hidden_box">
            <label for="label1" class="boushi1">
            </label>
            <input type="checkbox" id="label1"/>
          <div class="hidden_show">
            H
          </div>
          <div class="hidden_show2">
             M
          </div>
        </div>
      </td>
帽子の切り替え
/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: auto;
    opacity: 1;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show2 {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show2 {
    height: auto;
    opacity: 1;
}

ただし、謎の答えを入力するまではクリックしても反応しないようにしたかったので
既に謎の答えを入力して正解していたら、クラスを切り替えるみたいなことを下記でやっています。

帽子をクリックしたときの処理
//魔女のぼうし
$(".boushi1").click(function () {
    if (questionFlg2) {

        $(this).removeClass("boushi1");
        $(this).addClass("boushi2");

        $(this).next(".hidden_show").css('display', 'none');
        $(this).next(".hidden_show").removeClass("hidden_show");

        $(this).next().next().addClass("hidden_show3");
        $(this).next().next().removeClass("hidden_show2");
    }

});

questionFlg2が正解済みであることをチェックしている部分です。

蜘蛛の巣を動かす

kumo.gif

こちらが参考サイトです。

・ドラッグアンドドロップする
JavaScriptを使って要素をドラッグ＆ドロップで移動

・枠に吸い込まれるような見た目をつくる
こちら

↑の二つのサイトをコピペして組み合わせると蜘蛛の巣をドラッグアンドドロップして赤枠にはめると雪の結晶になる演出ができます。

スマホ全機種に対応するのが難しくて枠にはめる判定値（どれくらい近くにきたらはまった判定にするか）を大きくとらざるを得なかったので、クリックしただけで蜘蛛の巣が枠にはまった機種もあると思います。ごめんなさい。

あとはスマホだとドラッグしにくかったと思います。PC用にサイトをつくってしまったのが今回の反省点の一つです。

反省点

レスポンシブ対応
PC用の見た目を先につくってしまったので、スマホの見た目に修正するのがつらかったです。 次回つくるときは、スマホの見た目からつくることにします。
以前の作業を忘れる
1日3~4時間ずつ作っていたのですが前日やった作業を思い出すのに時間がかかっていた気がします。 まとまった時間をとって一気に作った方がいいと思いました！
名前を適当につけすぎた
よくわからないフラグやクラス名が沢山あって過去の自分をぶんなぐりたくなりました
よくわからないけど使ってみ過ぎた
コピペを多用しすぎて、何やってるか分からないまま進めたので細かい修正が全くできなくて困りました。 少しは理解しつつ進めないとだめですね・・・
表示遅すぎ
勉強不足でいいプログラミングができていないのに加えて画像を多用しているのでサイトがめちゃくちゃ重くなってしまいました。 いらない処理を消したり、画像を軽くするともっと早くなると思います。

まとめ

プログラミング未経験でしたが、ググりまくってコピペしまくれば低クオリティだけどなんとか動かせるものは作れるということがわかりました。

謎クラの皆さんぜひWEB謎いっぱいつくって解かせてください！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-23T13:15:45+09:00

製薬企業研究者が最低限知っておきたいHTMLとCSS

はじめに

HTML (hypertext markup language) とCSS (cascading style sheets) は、製薬企業研究者にとってはウェブスクレイピングを行う時に必要になってきます。
Webページの構造を把握するためにHTML・CSSの知識が必要になるわけです。
そこでこの記事では、製薬企業研究者が最低限知っておきたいHTMLとCSSの知識についてまとめてみます。
なお、HTMLやCSSを記述するためのエディタのインストール方法については、以下の記事で解説しています。
製薬企業研究者のためのVisual Studio Codeインストール方法

HTML

HTMLはWebページの骨格を作るためのマークアップ言語です。
基本的に、以下に示す「タグ」を使って記述します。

<タグ名 属性名=属性値></タグ名>

よく使われる代表的なタグを挙げると以下のようになります。

<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>
<p>段落</p>
<a href=URL>リンク<a>
<img src=画像パス alt=画像の説明>

<ul>
    <li>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ul>

<ol>
    <li>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
</ol>

<table>
    <thead>
        <tr><th>タイトル</th><th>タイトル</th></tr>
    </thead>
    <tbody>
        <tr><th>項目１</th><td>内容</td></tr>
        <tr><th>項目２</th><td>内容</td></tr>
        <tr><th>項目３</th><td>内容</td></tr>
    </tbody>
</table>

ここから、実際のWebページがどのように構成されているか見ていきます。

overview.html
<!DOCTYPE html> <!-- HYML5で記載された文書であることを宣言 -->

<html>

    <head>
        <!-- ページタイトルや文字コードなどを記載する。Webページには表示されない。-->
    </head>

    <body>        
        <!-- Webページの本体部分。商品情報やブログ記事など -->     
    </body>

</html>

ドックタイプ宣言部分<!DOCTYPE HTML>でHTML5で書かれたWebページであることを示して、headおよびbody部分が続きます。

head部分

headには、ウェブページのメタ情報を記述します。
ここに書かれた情報はウェブページ上では表示されません。
（titleはブラウザのタブの部分に表示されます。）

head.html
<head>

    <meta charset="utf-8">
    <title>サンプルページ</title>
    <link rel="stylesheet" href="style.css">

</head>

body部分

bodyは、ウェブページのメインコンテンツにあたる部分です。
bodyは、header、main、footerの3つから構成されます。

main.html
<body>

    <header>
        <!-- ヘッダー画像やメニューバーなど -->
    </header>

    <main>
        <!-- 商品情報やブログ記事など -->
    </main>

    <footer>
        <!-- フッターメニューなど -->
    </footer>

</body>

header部分

headerは、ウェブページのタイトルやヘッダー画像、トップメニューなどを表示する場所です。

header.html
<header>

    <h1>
        <a href="overview.html">
            <img src="image.png" alt="ヘッダー画像">
        </a>
    </h1>
    <nav>
        <ul>
            <li>ホーム</li>
            <li>会社情報</li>
            <li>お問い合わせ</li>
        </ul>
    </nav>
</header>

main部分

mainは、ページごとに内容が異なる、個別ページのメインコンテンツです。
単に文章だけでなく、箇条書きや表のデータが使われる場合もあります。

main.html
<main>

    <section>
        <h2>タイトル</h2>
        <p>本文</p>
        <h2>タイトル</h2>
        <p>本文</p>
        <h2>タイトル</h2>
        <p>本文</p>
    </section>

    <section>
        <h2>タイトル</h2>
        <ul>
            <li>項目１</li>
            <li>項目２</li>
            <li>項目３</li>
        </ul>
    </section>

    <section>
        <table>
            <thead>
                <tr><th>タイトル</th><th>タイトル</th></tr>
            </thead>
            <tbody>
                <tr><th>項目１</th><td>内容</td></tr>
                <tr><th>項目２</th><td>内容</td></tr>
                <tr><th>項目３</th><td>内容</td></tr>
            </tbody>
        </table>
    </section>

</main>

footer部分

footerは、ウェブページの最下部にある部分です。
プライバシーポリシーへのリンクをつけたフッターメニューを作る場合もあります。

footer.html
<footer>
    Copyright <a href="sample.html">サンプルサイト</a>. All Rights Reserved.
</footer>

CSS

CSSは、ウェブページの見た目を整えるためのマークアップ言語です。
文字の色やフォントサイズなどを指定することができます。
基本的に、以下のようにセレクタとプロパティを指定して記述することができます。

セレクタ{
    プロパティ名: 値;
    プロパティ名: 値;
    プロパティ名: 値;
}

ここで、サンプルとして以下のHTMLおよびCSSを使います。

sample.html
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>サンプルページ</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <header>
            <h1>ページタイトル</h1>
        </header>

        <main>
            <p>普通の黒字</p>
            <p class="font-red">赤字</p>
            <p class="font-red" id="font-bold">太字の赤字</p>
        </main>

        <footer>
            Copyright <a href="sample.html">サンプルサイト</a>. All Rights Reserved.
        </footer>

    </body>

</html>
style.css
p.font-red{
    color: red;
}

p#font-bold{
    font-weight: bold;
}

ウェブページを表示すると、以下のようになります。

サンプルページ.PNG

ここで、大事なのが、CSSがどのHTMLタグに対して指定されているか、です。
サンプルHTMLでは、class属性とid属性を指定しています。
そして、CSSでは、セレクタ部分に.が書かれているところではclass属性を、#が書かれているところではid属性を指定しています。
CSSにおけるclass属性およびid属性の指定の仕方は重要なので、覚えておきたいところです。
なお、同じウェブページに対してclass属性は同じものを何度でも指定できるのに対し、id属性は同じものは一つしか指定できません。
なので、ここで取り上げている例は赤字にするclass属性は2か所指定していますが、太字にするid属性は1か所にしか指定していません。

まとめ

ここでは、製薬企業研究者が最低限知っておきたいHTML・CSSの基礎知識について解説しました。
この記事に書かれていることが理解できれば、ウェブスクレイピングにも応用が利きます。

参考資料・リンク

HTMLとは？製薬会社の仕事でどう使う？

CSSとは？製薬会社の仕事でどう使う？

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-23T02:40:18+09:00

plotlyでタイトルにハイパーリンクを貼る

plotly で html を作成

スクレイピング結果をplotlyで可視化したhtmlを見ているときに、
スクレイピング元のサイトに行きたいことがあった。

plotly出力後のhtmlを加工しようと思ったが、
ぐちゃぐちゃしてよくわからなかったので（html初心者なので）、
簡単にできないかと思って色々試していると意外とすんなりできた。

グラフタイトルに直接<a href=""></a>を記入する

レイアウト指定部分で、タイトルを指定する際に、

layout = plotly.graph_objs.Layout(
    title={"text":"title"},
    xaxis={"title":"x_label"},
    yaxis={"title":"y_label"},
)

ハイパーリンク（<a href=""></a>）を直接書き込むだけ。
結局タイトルがそのままhtml化されるので、ハイパーリンクが適応される。
仕組みを考えると納得です。

layout = plotly.graph_objs.Layout(
    title={"text":"<a href='{リンク先}'>title</a>"},
    xaxis={"title":"x_label"},
    yaxis={"title":"y_label"},
)

追記:直接HTMLを記載する方法を発見(Dash)

Dashにて、divタグ等を直接記載している記事を見つけました。
htmlをリッチにする場合はこちらのほうがいいかもしれない。

↓ 該当部分

app = dash.Dash()
app.layout = html.Div([
    html.H1('Hudson River'),
    html.H2('Site'),
    dcc.Dropdown(
        id='dropdown-site',
        options=[{'label': i, 'value': i} for i in sites],
        placeholder="Select Site",
        clearable=False,
        value='125th St. Pier'
    ),
    html.H2('Date'),
    dcc.Dropdown(id='dropdown-date', 
                 value='2013-10-16'),
    html.H2('Findings'),
    dcc.Graph(id='graph-with-slider')
])
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-23T00:12:05+09:00

flexboxで画像と文字の横並びアイテムを作る

はじめに

画像と文字の横並びをいい感じに作りたかったので、順を追って試してみたときのイメージ図を備忘録として残していく。

目標としてはこんな感じ。
(0).png

環境

※以下を使用する。
flexbox
bootstrap 4系

まずはflexboxを使ってみる

(1).png

style.css
.img-container{
  display:flex;/* flexbox */
}
index.html
<div class="img-container">
  <img src="img.png">
  文言
</div>

デフォルトは横並びみたいです。imgと文言がくっついちゃいます。

水平方向に真ん中にしてみる。

(2).png

style.css
.img-container{
  display:flex;/* flexbox */
  justify-content:center; /* 水平方向 */
}
index.html
<div class="img-container">
  <img src="img.png">
  文言
</div>

文言が真ん中にならないので何とかしなきゃ

垂直方向を真ん中にしてみる

(3).png

style.css
.img-container{
  display:flex;/* flexbox */
  justify-content:center; /* 水平方向 */
  align-items: center; /* 垂直方向 */
}
index.html
<div class="img-container">
  <img src="img.png">
  文言
</div>

画像と文字がくっついちゃってる。ぴったしくっついてる。余白明けたい。

余白を開けてみる。(ゴール)

(4).png

style.css
.img-container{
  display:flex;/* flexbox */
  justify-content:center; /* 水平方向 */
  align-items: center; /* 垂直方向 */
}
index.html
<div class="img-container">
  <img class="mr-3" src="img.png">
  文言
</div>

bootstrapでmr-3を使ってイメージの右側に余白を開けてみた。

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

日付別

タグ一覧