今回は作成中のポートフォリオの背景が、 色をつけるだけでは寂しいので景色の画像を貼って見ました。 その時の貼る方法の備忘録を書いて行きます。 背景に画像を貼る (例) form__wrapper { background-image: url("sea.jpg"); background-image: no-repeat; background-position: 50% 50%; } これで背景が変わりました。 urlの中身は(貼りたい画像の名前を記入) ・assetsのimagesファイルに画像を保存しておく必要がある。 repeat：背景画像を縦方向、横方向双方に繰り返し表示する（初期値） repeat-x：背景画像を横方向に繰り返し表示する repeat-y：背景画像を縦方向に繰り返し表示する no-repeat：背景画像を繰り返さず1つだけ表示する marginを使うと背景の画像が微妙にズレていくので、 background-positionで調整してあげる。 こんなのもありました。↓↓ background: 上記のプロパティーを使えば background-color background-image background-repeat background-position background-size background-origin background-clip background-attachment を、まとめて1行で指定するそうです。 めちゃくちゃ便利ですね。 最初からこれでもよかったってのが 結論でした。
今回は作成中のポートフォリオの背景が、 色をつけるだけでは寂しいので景色の画像を貼って見ました。 その時の貼る方法の備忘録を書いて行きます。
(例)
form__wrapper { background-image: url("sea.jpg"); background-image: no-repeat; background-position: 50% 50%; }
これで背景が変わりました。 urlの中身は(貼りたい画像の名前を記入) ・assetsのimagesファイルに画像を保存しておく必要がある。
urlの中身は(貼りたい画像の名前を記入)
repeat：背景画像を縦方向、横方向双方に繰り返し表示する（初期値） repeat-x：背景画像を横方向に繰り返し表示する repeat-y：背景画像を縦方向に繰り返し表示する no-repeat：背景画像を繰り返さず1つだけ表示する
marginを使うと背景の画像が微妙にズレていくので、 background-positionで調整してあげる。
こんなのもありました。↓↓
上記のプロパティーを使えば background-color background-image background-repeat background-position background-size background-origin background-clip background-attachment
を、まとめて1行で指定するそうです。 めちゃくちゃ便利ですね。 最初からこれでもよかったってのが 結論でした。
SassとScssとは CSSをより簡略化したメタ言語です！ この２つの共通点は入れ子構造で書くことです。 index.html <div class="header"> <div class="header-logo">Sassについて</div> </div> style.css .header { heigth:90px; color:black; } .header-logo { font-size:40px; border-bottom:4px solid black; } と入力するとしましょう。 これが普段のcssの入力の仕方ですね? Sassの場合は、少し記入の仕方が変わります。 atyle.scss .header heigth:90px color:black .header-logo font-size:40px border-bottom:4px solid black となります。 ちなみにScssで書く場合はこうなります。 style.scss .header { heigth:90px; color:black; .header-logo{ font-size:40px; border-bottom:4px solid black; } } みたくなる。 HTMLの親要素と子要素に共通する書き方ですね。つまり入れ子です。 ちなみにcssであたっていない場合はデベロッパーツールで確認しますが、これら（以下sass）は、崩れて画面真っ黒、そして黒い画面でエラーを訴えてくるのですね? 以上がSassの説明でした。 次の記事では導入について書いていきます?
CSSをより簡略化したメタ言語です！ この２つの共通点は入れ子構造で書くことです。
<div class="header"> <div class="header-logo">Sassについて</div> </div>
.header { heigth:90px; color:black; } .header-logo { font-size:40px; border-bottom:4px solid black; }
と入力するとしましょう。 これが普段のcssの入力の仕方ですね?
Sassの場合は、少し記入の仕方が変わります。
.header heigth:90px color:black .header-logo font-size:40px border-bottom:4px solid black
となります。 ちなみにScssで書く場合はこうなります。
.header { heigth:90px; color:black; .header-logo{ font-size:40px; border-bottom:4px solid black; } }
みたくなる。 HTMLの親要素と子要素に共通する書き方ですね。つまり入れ子です。 ちなみにcssであたっていない場合はデベロッパーツールで確認しますが、これら（以下sass）は、崩れて画面真っ黒、そして黒い画面でエラーを訴えてくるのですね?
以上がSassの説明でした。 次の記事では導入について書いていきます?
どうも7noteです。フォントによる字間の悩みはこれで1発解決！ 様々な日本語フォントがありますが、フォントによって1文字の大きさが違い、いざ実装してみるとなんだかやぼったい感じ（ダサい）の文字の並びになってしまうことが気になるあなたへ。 特にデザイナーからWEBのコーディングも始められた方は 「cssで字間の自動調整ってできないの？」 と思われる方もいるかも。そんな方へ朗報です。 デザイナーから字詰めを迫られていたコーダーの人も、朗報です。 font-feature-settings: "palt"を使うことで、自動で字間調整してくれる。 プロポーショナルメトリクスが有効になるフォントであれば、この指定を入れるだけで一発で自動カーニングをしてくれるようです！しかもほぼ全てのブラウザで対応。 .palt { /* プロポーショナルメトリクスと旧字体指定 */ font-feature-settings: "palt"; } Can I useで確認しても主要ブラウザは全て対応。 （設定前と設定後のテキストを比較。） 全体的に指定ありの方が余分な隙間がキュッとしまった印象になります。 まとめ font-feature-settings: "palt";の指定が使えるフォントは限られているようなので、指定しても「あれ？効かない？」と思ったらこちらのサイトに綺麗に情報がまとまっていますのでこちらを見ていただくといいかもしれません。 参考サイト：https://ics.media/entry/14087/ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
様々な日本語フォントがありますが、フォントによって1文字の大きさが違い、いざ実装してみるとなんだかやぼったい感じ（ダサい）の文字の並びになってしまうことが気になるあなたへ。
特にデザイナーからWEBのコーディングも始められた方は
「cssで字間の自動調整ってできないの？」
と思われる方もいるかも。そんな方へ朗報です。 デザイナーから字詰めを迫られていたコーダーの人も、朗報です。
font-feature-settings: "palt"
プロポーショナルメトリクスが有効になるフォントであれば、この指定を入れるだけで一発で自動カーニングをしてくれるようです！しかもほぼ全てのブラウザで対応。
.palt { /* プロポーショナルメトリクスと旧字体指定 */ font-feature-settings: "palt"; }
Can I useで確認しても主要ブラウザは全て対応。
（設定前と設定後のテキストを比較。）
全体的に指定ありの方が余分な隙間がキュッとしまった印象になります。
font-feature-settings: "palt";の指定が使えるフォントは限られているようなので、指定しても「あれ？効かない？」と思ったらこちらのサイトに綺麗に情報がまとまっていますのでこちらを見ていただくといいかもしれません。
font-feature-settings: "palt";
参考サイト：https://ics.media/entry/14087/
~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
ではでは、今まで使った技術でフォームで作っていきましょう！！ index.html <link rel="stylesheet" href="css/style.css"> <div class="form"> <h1>お問い合わせフォーム</h1> <label>名前：<input type="text"></label><br> <label>電話番号：<input type="number"></label><br> <label>メールアドレス：<input type="email"></label><br> <fieldset> <legend>どこで当社を知りましたか？？(複数選択可)</legend> <label><input type="checkbox">知り合い</label> <label><input type="checkbox">新聞・テレビ</label> <label><input type="checkbox">インターネット</label> </fieldset> <label for="comment">お問い合わせ内容</label> <textarea id="comment" name="comment"></textarea> <button>送信</button> </div> 簡易的なお問い合わせフォームなので雑ですが? 今まで作れなかった人が作れたので勘弁してあげてください笑 labelのあとのbrは行を変えたかったので作りました。 textareaはidとforを紐付けました? style.css .form { background-color: aqua; width: 40%; margin: 30px 40px ; padding: 30px; display: flex; flex-direction:column; } h1 { border: 2px solid black; width: 50%; } fieldset { width: 52%; margin-bottom:10px ; } textarea { display: block; height: 200px; margin: 20px; width: 80%%; } button { width: 10%; margin: 0px 0px 20px 20px; } cssは完全に感なのであれですが、、、、 噂のフレックスボックスですね(^_^;)フレックスボックスはこちらを https://qiita.com/akari_0618/items/85a6f6d7eaf6681e11df 一応、ブラウザではこうなります！！
ではでは、今まで使った技術でフォームで作っていきましょう！！
<link rel="stylesheet" href="css/style.css"> <div class="form"> <h1>お問い合わせフォーム</h1> <label>名前：<input type="text"></label><br> <label>電話番号：<input type="number"></label><br> <label>メールアドレス：<input type="email"></label><br> <fieldset> <legend>どこで当社を知りましたか？？(複数選択可)</legend> <label><input type="checkbox">知り合い</label> <label><input type="checkbox">新聞・テレビ</label> <label><input type="checkbox">インターネット</label> </fieldset> <label for="comment">お問い合わせ内容</label> <textarea id="comment" name="comment"></textarea> <button>送信</button> </div>
簡易的なお問い合わせフォームなので雑ですが? 今まで作れなかった人が作れたので勘弁してあげてください笑 labelのあとのbrは行を変えたかったので作りました。 textareaはidとforを紐付けました?
.form { background-color: aqua; width: 40%; margin: 30px 40px ; padding: 30px; display: flex; flex-direction:column; } h1 { border: 2px solid black; width: 50%; } fieldset { width: 52%; margin-bottom:10px ; } textarea { display: block; height: 200px; margin: 20px; width: 80%%; } button { width: 10%; margin: 0px 0px 20px 20px; }
cssは完全に感なのであれですが、、、、 噂のフレックスボックスですね(^_^;)フレックスボックスはこちらを https://qiita.com/akari_0618/items/85a6f6d7eaf6681e11df
一応、ブラウザではこうなります！！
今回オリジナルアプリを作るにあたって、検証ツールで、試しにめっちゃ長いアルファベットの文章を打ってみたのですが、そのときに、投稿を作っているブロックからはみ出てしまう問題が発生してしまったので、その解決策を共有していきたいと思います 実例 こんな感じになってしまいます。 これでは、とてもいいUIとは言えませんよね、それを、 のように、きちんと枠に収める方法があります 解決策 HTMLのbodyのCSSの部分に、 word-wrap: break-word; をつければ解決します
今回オリジナルアプリを作るにあたって、検証ツールで、試しにめっちゃ長いアルファベットの文章を打ってみたのですが、そのときに、投稿を作っているブロックからはみ出てしまう問題が発生してしまったので、その解決策を共有していきたいと思います
こんな感じになってしまいます。 これでは、とてもいいUIとは言えませんよね、それを、 のように、きちんと枠に収める方法があります
HTMLのbodyのCSSの部分に、
word-wrap: break-word;
をつければ解決します
align-self margin-top display: flex ボタンを横に並べる https://csshtml.work/button-sidebyside/ justify-content
ボタンを横に並べる https://csshtml.work/button-sidebyside/
前回の記事labelタグのフォーム作成について学びましたね！ 次は、boxについて学んで行きましょう? ①ドロップダウンリスト index.html <label for="like">あなたの好きな食べ物は？？</label> <select id="like"> <option>人参</option> <option>ピーマン</option> <option>玉ねぎ</option> </select> 質問のセンスの無さは置いといてブラウザで表示するとこうなるかなと思います? はい！ドロップアンドリスト完成です！ 最初から選択している状態でスタートしたい場合は、select の中の一つを選んでselectedを付けるとできます！ ②チェックリスト それではチェックボックスを作っていきましょう！ index.html <fieldset> <legend>性別を教えて下さい</legend> <label><input type="checkbox" name="gender" value="man">男</label> <label><input type="checkbox" name="gender" value="woman">女</label> <label><input type="checkbox" name="gender" value="other">その他</label> </fieldset> ここでタグについての説明をしますね！ fieldset▶ここではlabelのグループ化を図っています！ legend▶labelのタイトルを作っています！ ブラウザ上ではこうなります? クリックするとチェツクが付きます！ 上記したチェックボックスは複数選択の際に利用するものなので、 一つだけ選択させる場合はラジオボタンに書き換えていきましょう！ index.html <fieldset> <legend>性別を教えて下さい</legend> <label><input type="radio" name="gender" value="man">男</label> <label><input type="radio" name="gender" value="woman" checked>女</label> <label><input type="radio" name="gender" value="other">その他</label> </fieldset> はい！こうすると一つのみの選択に変わります！? name属性について解説しますと、 フォーム部品を識別するための名前を指定します。 複数のラジオボタンに同じ部品名を付けることで、1つのグループを作ることができます。 ラジオボタンでは、そのグループの中から1つだけを選択することができるのです！ ③ボタン 次はボタンですね！！ 結構簡単なのでちゃちゃっとやっちゃいましょう！ index.html <input type="button" value="決定"> <button>決定</button> ね、びっくりするぐらい簡単でしょう? ブラウザ上だとこんな感じですね? どっちでも記述はいいみたいです? ちなみにvalue属性とは、input要素の値を指定する属性。テキスト入力欄などにおいては初期入力値、チェックボックスやラジオボタンにおいては選択した時にだけ送信する値、送信ボタンなどにおいてはボタン名を表す。ようです！
前回の記事labelタグのフォーム作成について学びましたね！ 次は、boxについて学んで行きましょう?
<label for="like">あなたの好きな食べ物は？？</label> <select id="like"> <option>人参</option> <option>ピーマン</option> <option>玉ねぎ</option> </select>
質問のセンスの無さは置いといてブラウザで表示するとこうなるかなと思います?
はい！ドロップアンドリスト完成です！
最初から選択している状態でスタートしたい場合は、select の中の一つを選んでselectedを付けるとできます！
それではチェックボックスを作っていきましょう！
<fieldset> <legend>性別を教えて下さい</legend> <label><input type="checkbox" name="gender" value="man">男</label> <label><input type="checkbox" name="gender" value="woman">女</label> <label><input type="checkbox" name="gender" value="other">その他</label> </fieldset>
ここでタグについての説明をしますね！ fieldset▶ここではlabelのグループ化を図っています！ legend▶labelのタイトルを作っています！
ブラウザ上ではこうなります? クリックするとチェツクが付きます！
上記したチェックボックスは複数選択の際に利用するものなので、 一つだけ選択させる場合はラジオボタンに書き換えていきましょう！
<fieldset> <legend>性別を教えて下さい</legend> <label><input type="radio" name="gender" value="man">男</label> <label><input type="radio" name="gender" value="woman" checked>女</label> <label><input type="radio" name="gender" value="other">その他</label> </fieldset>
はい！こうすると一つのみの選択に変わります！?
name属性について解説しますと、 フォーム部品を識別するための名前を指定します。
複数のラジオボタンに同じ部品名を付けることで、1つのグループを作ることができます。 ラジオボタンでは、そのグループの中から1つだけを選択することができるのです！
次はボタンですね！！ 結構簡単なのでちゃちゃっとやっちゃいましょう！
<input type="button" value="決定"> <button>決定</button>
ね、びっくりするぐらい簡単でしょう? ブラウザ上だとこんな感じですね?
どっちでも記述はいいみたいです?
ちなみにvalue属性とは、input要素の値を指定する属性。テキスト入力欄などにおいては初期入力値、チェックボックスやラジオボタンにおいては選択した時にだけ送信する値、送信ボタンなどにおいてはボタン名を表す。ようです！
久々のCSS。F12が大切ってことだ。 .after .shiny-input-container { margin-top: -10px; margin-bottom: -10px; } 上記のstyles.cssをwwwに配置して下記を実行。 library(shiny) ui <- fluidPage( tags$head(tags$link(rel="stylesheet", type="text/css", href="styles.css")), h1("before"), div( class="before", checkboxInput(inputId="x1", label="x1"), checkboxInput(inputId="x2", label="x2"), checkboxInput(inputId="x3", label="x3"), checkboxInput(inputId="x4", label="x4"), checkboxInput(inputId="x5", label="x5") ), h1("after"), div( class="after", checkboxInput(inputId="x1", label="x1"), checkboxInput(inputId="x2", label="x2"), checkboxInput(inputId="x3", label="x3"), checkboxInput(inputId="x4", label="x4"), checkboxInput(inputId="x5", label="x5") ), absolutePanel( h1("after"), div( class="after", checkboxInput(inputId="x1", label="x1"), checkboxInput(inputId="x2", label="x2"), checkboxInput(inputId="x3", label="x3"), checkboxInput(inputId="x4", label="x4"), checkboxInput(inputId="x5", label="x5") ), top=10, right=10, draggable=TRUE) ) server <- function(input, output, session) { } shinyApp(ui, server)
久々のCSS。F12が大切ってことだ。
.after .shiny-input-container { margin-top: -10px; margin-bottom: -10px; }
上記のstyles.cssをwwwに配置して下記を実行。
styles.css
library(shiny) ui <- fluidPage( tags$head(tags$link(rel="stylesheet", type="text/css", href="styles.css")), h1("before"), div( class="before", checkboxInput(inputId="x1", label="x1"), checkboxInput(inputId="x2", label="x2"), checkboxInput(inputId="x3", label="x3"), checkboxInput(inputId="x4", label="x4"), checkboxInput(inputId="x5", label="x5") ), h1("after"), div( class="after", checkboxInput(inputId="x1", label="x1"), checkboxInput(inputId="x2", label="x2"), checkboxInput(inputId="x3", label="x3"), checkboxInput(inputId="x4", label="x4"), checkboxInput(inputId="x5", label="x5") ), absolutePanel( h1("after"), div( class="after", checkboxInput(inputId="x1", label="x1"), checkboxInput(inputId="x2", label="x2"), checkboxInput(inputId="x3", label="x3"), checkboxInput(inputId="x4", label="x4"), checkboxInput(inputId="x5", label="x5") ), top=10, right=10, draggable=TRUE) ) server <- function(input, output, session) { } shinyApp(ui, server)
前回の続きから始めていきます！ 前回の続きはこちらからどうぞ?▶ https://qiita.com/akari_0618/items/86e5e8b1535c5cec5d7f 前回入力したものをブラウザで表示するとこうなっているかなと思います！ これだと何を入力するのかわからないので名前をつけてあげましょう！ この名前を付けるのは"label"を使いましょう！ その際に使うのが"id属性"と"for属性"です。この子達がlabelの名前とinputで入力した値を紐付けてくれます！ 紐付けではいくつかあるみたいなのですが、気になる人は自分で調べてみてください！！ id属性とfor属性についてはこちらを▶https://qiita.com/akari_0618/items/3526fd7b751d9387667d index.html <label for="name">名前：</label> <input type="text" id="name"> <textarea></textarea> <label for="password">パスワード：</label> <input type="password" id="password"> id属性とかわかんないからめんどくさい！って思った方！ 私もそうだから省略しちゃいましょう? index.html <label>名前：<input type="text"></label> <textarea></textarea> <label>パスワード：<input type="password" ></label> はい！こんな感じに楽になりましたね?
前回の続きから始めていきます！ 前回の続きはこちらからどうぞ?▶ https://qiita.com/akari_0618/items/86e5e8b1535c5cec5d7f
前回入力したものをブラウザで表示するとこうなっているかなと思います！
これだと何を入力するのかわからないので名前をつけてあげましょう！ この名前を付けるのは"label"を使いましょう！
その際に使うのが"id属性"と"for属性"です。この子達がlabelの名前とinputで入力した値を紐付けてくれます！ 紐付けではいくつかあるみたいなのですが、気になる人は自分で調べてみてください！！ id属性とfor属性についてはこちらを▶https://qiita.com/akari_0618/items/3526fd7b751d9387667d
<label for="name">名前：</label> <input type="text" id="name"> <textarea></textarea> <label for="password">パスワード：</label> <input type="password" id="password">
id属性とかわかんないからめんどくさい！って思った方！ 私もそうだから省略しちゃいましょう?
<label>名前：<input type="text"></label> <textarea></textarea> <label>パスワード：<input type="password" ></label>
はい！こんな感じに楽になりましたね?
1...ついつい忘れがちなインライン要素たち 特徴 width(横幅)とheight(高さ)の指定ができず、内包する要素次第。（margin: o auto;で中央寄せ不可） 改行できない。（横に並ぶ。） marginは、上下には効くが左右には効かない。 paddingは上下左右に効くが他の要素を無視して被さる。 メンバー <a></a> <br> <img>と<img/> <input>と<input/> <label></label> <textarea></textarea> <span></span> <small></small> <strong></strong> 付き合い方 displayでinline指定、又はinline-block指定する。 <img>はブロック要素の「背景画像」で指定する。 2...画像話あれやこれや 画像の形式と適正 JPEG ： 写真 PNG : イラスト、ロゴ、画像文字。透明色の利用。 GIF ： 極めて短時間のアニメーションを作れるが、今はあまり使われない。 SVG ： 拡大しても劣化しないベクター形式。AdobeのIllustlatorがこの形式。（ちなみにPhotoshopはBMP：ビットマップ形式） 3... 横中央寄せ ①text-align: center; css .inline { text-align: center; } インライン要素の中の要素の横中央寄せ。 中央寄せにしたい要素そのものでなく親要素に指定する。 中の要素がテキストの場合も、あくまで中央にくるのは中のテキスト。（テキストはタグで囲まれていないけどインライン要素。） 省略記法：tac=>text-align: center; ②margin: 0 auto; CSS .block { width: 80%; max-width: 1000px; margin: 0 auto; } ブロック要素そのものの横中央寄せ。 widthの指定必須。（そうでないとブロック要素は横幅いっぱいに広がるので中央寄せに見えない。） 省略記法：m0-a=>margin: 0 auto; ①②をまとめるとこんな感じ。 ③display: inline-block; CSS .inline-block { display: inline-block; } インライン要素の横幅を指定せず横中央寄せ。 省略記法：dib=>display: inline-block; 4...縦中央寄せ ①heightとline-heightを揃える CSS .sample { height: 60px; line-height: 60px } ボタンのデザインなどによく使われる。 テキストが複数行になると使えない。 省略記法：h60=>height: 60px; lh60=>line-height: 60px; ②上下のpaddingの数字を揃える CSS .sample2 { padding: 10px 0; } 複数行のテキストでも対応可。 ①②をまとめるとこんな感じ。 ③複数のインライン要素の縦中央寄せ CSS .sample { vertical-align: center; } 縦中央寄せにしたいインライン要素全てに指定する。 ブロック要素には効かない。 省略記法：vam=>vertical-align: middle; こんな感じ。 ④ブロック要素の縦（横）中央寄せ CSS .sample { position: absolute; top: 50%; left: 50%; transform: translate -50% -50%; } 省略記法： poa=>position: absolute; t50%=>top: 50%; l50%=>left: 50% trft=>transform: translate( x y )「x」「y」それぞれに「-50%」を入力 こんな感じ。 position: absolute;で要素の左上が画面中央になるので、それをtransform: translate(xy);で要素そのものの縦横50％分戻す。
width
height
margin: o auto;
margin
padding
<a></a>
<br>
<img>
<img/>
<input>
<input/>
<label></label>
<textarea></textarea>
<span></span>
<small></small>
<strong></strong>
display
inline
inline-block
text-align: center;
.inline { text-align: center; }
インライン要素の中の要素の横中央寄せ。 中央寄せにしたい要素そのものでなく親要素に指定する。 中の要素がテキストの場合も、あくまで中央にくるのは中のテキスト。（テキストはタグで囲まれていないけどインライン要素。） 省略記法：tac=>text-align: center;
tac
margin: 0 auto;
.block { width: 80%; max-width: 1000px; margin: 0 auto; }
ブロック要素そのものの横中央寄せ。 widthの指定必須。（そうでないとブロック要素は横幅いっぱいに広がるので中央寄せに見えない。） 省略記法：m0-a=>margin: 0 auto;
m0-a
①②をまとめるとこんな感じ。
display: inline-block;
.inline-block { display: inline-block; }
インライン要素の横幅を指定せず横中央寄せ。 省略記法：dib=>display: inline-block;
dib
line-height
.sample { height: 60px; line-height: 60px }
ボタンのデザインなどによく使われる。 テキストが複数行になると使えない。 省略記法：h60=>height: 60px; lh60=>line-height: 60px;
h60
height: 60px;
lh60
line-height: 60px;
.sample2 { padding: 10px 0; }
複数行のテキストでも対応可。 ①②をまとめるとこんな感じ。
.sample { vertical-align: center; }
縦中央寄せにしたいインライン要素全てに指定する。 ブロック要素には効かない。 省略記法：vam=>vertical-align: middle; こんな感じ。
vam
vertical-align: middle;
.sample { position: absolute; top: 50%; left: 50%; transform: translate -50% -50%; }
省略記法： poa=>position: absolute; t50%=>top: 50%; l50%=>left: 50% trft=>transform: translate( x y )「x」「y」それぞれに「-50%」を入力 こんな感じ。 position: absolute;で要素の左上が画面中央になるので、それをtransform: translate(xy);で要素そのものの縦横50％分戻す。
poa
position: absolute;
t50%
top: 50%;
l50%
left: 50%
trft
transform: translate( x y )
1...ついつい忘れがちなインライン要素たち 特徴 width(横幅)とheight(高さ)の指定ができず、内包する要素次第。（margin: o auto;で中央寄せ不可） 改行できない。（横に並ぶ。） marginは、上下には効くが左右には効かない。 paddingは上下左右に効くが他の要素を無視して被さる。 メンバー <a></a> <br> <img>と<img/> <input>と<input/> <label></label> <textarea></textarea> <span></span> <small></small> <strong></strong> 付き合い方 displayでinline指定、又はinline-block指定する。 <img>はブロック要素の「背景画像」で指定する。 2...画像話あれやこれや 画像の形式と適正 JPEG ： 写真 PNG : イラスト、ロゴ、画像文字。透明色の利用。 GIF ： 極めて短時間のアニメーションを作れるが、今はあまり使われない。 SVG ： 拡大しても劣化しないベクター形式。AdobeのIllustlatorがこの形式。（ちなみにPhotoshopはBMP：ビットマップ形式） 3... 横中央寄せ ①text-align: center; css .inline { text-align: center; } インライン要素の中の要素の横中央寄せ。 中央寄せにしたい要素そのものでなく親要素に指定する。 中の要素がテキストの場合も、あくまで中央にくるのは中のテキスト。（テキストはタグで囲まれていないけどインライン要素。） 省略記法：tac=>text-align: center; ②margin: 0 auto; CSS .block { width: 80%; max-width: 1000px; margin: 0 auto; } ブロック要素そのものの横中央寄せ。 widthの指定必須。（そうでないとブロック要素は横幅いっぱいに広がるので中央寄せに見えない。） 省略記法：m0-a=>margin: 0 auto; ①②をまとめるとこんな感じ。 ③display: inline-block; CSS .inline-block { display: inline-block; } インライン要素の横幅を指定せず横中央寄せ。 省略記法：dib=>display: inline-block; 4...縦中央寄せ ①heightとline-heightを揃える CSS .sample { height: 60px; line-height: 60px } ボタンのデザインなどによく使われる。 テキストが複数行になると使えない。 省略記法：h60=>height: 60px; lh60=>line-height: 60px; ②上下のpaddingの数字を揃える CSS .sample2 { padding: 10px 0; } 複数行のテキストでも対応可。 ①②をまとめるとこんな感じ。 ③複数のインライン要素の縦中央寄せ CSS .sample { vertical-align: center; } 縦中央寄せにしたいインライン要素全てに指定する。 ブロック要素には効かない。 省略記法：vam=>vertical-align: middle; こんな感じ。 5...ブロック要素の縦横中央寄せ ①position: absolute;＋transform: translateXY CSS .sample { position: absolute; top: 50%; left: 50%; transform: translate -50% -50%; } 省略記法： poa=>position: absolute; t50%=>top: 50%; l50%=>left: 50% trft=>transform: translate( x y )「x」「y」それぞれに「-50%」を入力 こんな感じ。 position: absolute;で要素の左上が画面中央になるので、それをtransform: translate(xy);で要素そのものの縦横50％分戻す。 ②display: flex; CSS .sample { display: flex; align-items: center; justify-content: center; } 省略記法： df=>display: flex; aic=>align-items: center; jcc=>`justify-content: center; こんな感じ
transform: translateXY
display: flex;
.sample { display: flex; align-items: center; justify-content: center; }
省略記法： df=>display: flex; aic=>align-items: center; jcc=>`justify-content: center; こんな感じ
df
aic
align-items: center;
jcc
前回までのあらすじ 漢字熟語陣取り合戦というものを作りました。漢字を集めてきてバラバラに表示し、そこから熟語を見つけて取り合うゲームです。ルール、成果物はこちらをご覧ください。 今回実装した部分はこちら。 取ってきた漢字が難しすぎた場合、いつまでも終わらないという問題がありました。[阿呆陀羅経]や[百万陀羅]のような一般的でない語はいつまでたっても思いつかないという懸念です。 いっそ選出した熟語を表示してしまうことにしました。これなら漢字数が多くても難しくても計30手くらいで決着をつけることが可能です。 先攻が長い単語を獲得できるので、普通にやれば先攻の勝ちです。しかし、表示されていない熟語を思いつければ相手の点数を奪ったりできます。 これなら、難しすぎて「漢字の山から熟語を見つける」というゲームになっていた状況から、「熟語というブロックを意識しながら、意外な熟語で盤面をひっくり返す」という本来狙っていた面白さを実現できそうです。公平さを犠牲にして面白さを取ります。 ちなみにこの選出方法で選んだ熟語を表示するだけなので、漢字群から作れるすべての熟語を網羅するわけではありません。 どう実装するか 選択した熟語はjukugosという配列に入れてあります。それを表示するだけなので、 <div onclick="this.innerText=jukugos">クリックして表示</div> という要素を追加することにしました。htmlにスクリプトを直書きすること、onclick要素を安易に使うこと、あまつさえそれがグローバルな変数を参照していることなど良くないことをたくさんしています。将来的なバグの温床になりえます。保守運用を続けていくつもりなら別のスクリプトファイルに書くべきでしょう。 また、現在漢字を表示しているエリアの右側に並べたいので、下記のように書きました。 漢字、熟語表示部分 <div id="main-area"> <div id="fields"> Aの獲得文字<br/> <div id="a-list" class="field"></div><br/> 手付かず<br/> <div id="free-list" class="field"></div><br/> Bの獲得文字<br/> <div id="b-list" class="field"></div><br/> </div> <div id="selected-jukugo" onclick="this.innerText=jukugos">クリックして熟語を表示する</div> </div> スタイルシートは 要素を横並びにする div#main-area{ display: flex; } div#selected-jukugo{ width:40%; } div#fields{ width:40%; } div.field{ /* 漢字が横に広がりすぎないように */ width:60%; } のようにして、横にならべました。また、漢字群が横に広がっていると遊びにくいため、縮めています。デザインのセンスがないので横幅の数字を適当に変えて一番よさそうだった比率にしました。センスがない以上、スタイリングの知識や定石を学ぶべきかもしれません。 ともあれ、たった数十行で熟語を表示することができました。 実装した結果 こちら。 実装し、実際に熟語を表示してみました。「映画倫理規定管理委員会」やら「司法試験管理委員会」やらイカつい熟語が並んでますね。 これは答えが良すぎる例ですね。「(小さい)熟語のブロックを意識しながら、意外な熟語で盤面をひっくり返す」という遊びにするつもりが、「意外な熟語」の方を表示してしまっています。 「映画」「倫理」「管理委員会」が表示されていて「映画倫理規定管理委員会」を導き出して盤面をひっくり返したら戦略性があっていいんですが、ネタバレしてしまっています。 このネタバレをどう回避しましょう。長すぎる単語は表示しない？分割できる熟語は分割する？ 要件の方を変える どう対策してもネタバレになってしまう懸念がぬぐえません。なので、私が実装したのはゲームに戦略性を持たせる機能ではなく、熟語を見つける練習のための機能だったということにしました。手前味噌ですがなかなかの機転です。でもコイツに仕事頼みたくないですね。絶対言われたもの作ってこないタイプです。 まず、漢字群を見ます。なるべく多くの熟語を見つけます。で、クリックして熟語を表示させます。すぐに答え合わせができるので効率よく練習できます。 慣れてきたら、漢字群から「奪う」パターンを考えます。例えば「映画」「倫理」「管理委員会」を見つけたら、相手が「映画」や「倫理」を取ってきたら「映画倫理規定管理委員会」で奪えるというパターンを想定するということです。 ここで、答えを表示し、「司法試験管理委員会」などを見つけて、「管理委員会」は奪われがちだから後半に言ったやつが5点得するな、などと反省することができます。 あるいは、一向に消費できない「二」や「三」を、答えを見て納得することもできます。今回の例だとベースとして選んだ熟語がまずかったのか「二三千」など熟語とは言い切れないものが載っています。これは熟語辞典じゃないものから取ってきているせいで、加工者の責任です。いかんせん自動生成なので駄作も生み出してしまいます。そのケースに気が付けるので、さっさと次の問題に移ることができ、やはり練習効率は上がります。 いかがでしたか 熟語を表示してしまうというアイディアはいい線いってたと思います。生成した問題によってはただのチートツールになってしまいますが。副産物として練習ツールができたので良かったです。 競技を面白くするためか、競技について考察を深めるためかは分からないが、その問題を構成している熟語を表示することが必要だったわけです。 「二三千」のような熟語とは言えない単語が辞書に入っているという失態があきらかになってしまいました。しかし、東大王の番組でも「格闘家」がダメだったり、我々の考える熟語と熟語辞典に載っている熟語には乖離があるようです(ちなみに「格闘技」はあります)。「最高経営責任者」はいるけど「経営責任者」っていないんだなぁとか、確かな知識が要求されるゲームみたいですね。なので不問にします。
漢字熟語陣取り合戦というものを作りました。漢字を集めてきてバラバラに表示し、そこから熟語を見つけて取り合うゲームです。ルール、成果物はこちらをご覧ください。 今回実装した部分はこちら。
取ってきた漢字が難しすぎた場合、いつまでも終わらないという問題がありました。[阿呆陀羅経]や[百万陀羅]のような一般的でない語はいつまでたっても思いつかないという懸念です。
いっそ選出した熟語を表示してしまうことにしました。これなら漢字数が多くても難しくても計30手くらいで決着をつけることが可能です。 先攻が長い単語を獲得できるので、普通にやれば先攻の勝ちです。しかし、表示されていない熟語を思いつければ相手の点数を奪ったりできます。 これなら、難しすぎて「漢字の山から熟語を見つける」というゲームになっていた状況から、「熟語というブロックを意識しながら、意外な熟語で盤面をひっくり返す」という本来狙っていた面白さを実現できそうです。公平さを犠牲にして面白さを取ります。
ちなみにこの選出方法で選んだ熟語を表示するだけなので、漢字群から作れるすべての熟語を網羅するわけではありません。
選択した熟語はjukugosという配列に入れてあります。それを表示するだけなので、 <div onclick="this.innerText=jukugos">クリックして表示</div> という要素を追加することにしました。htmlにスクリプトを直書きすること、onclick要素を安易に使うこと、あまつさえそれがグローバルな変数を参照していることなど良くないことをたくさんしています。将来的なバグの温床になりえます。保守運用を続けていくつもりなら別のスクリプトファイルに書くべきでしょう。 また、現在漢字を表示しているエリアの右側に並べたいので、下記のように書きました。
jukugos
<div onclick="this.innerText=jukugos">クリックして表示</div>
<div id="main-area"> <div id="fields"> Aの獲得文字<br/> <div id="a-list" class="field"></div><br/> 手付かず<br/> <div id="free-list" class="field"></div><br/> Bの獲得文字<br/> <div id="b-list" class="field"></div><br/> </div> <div id="selected-jukugo" onclick="this.innerText=jukugos">クリックして熟語を表示する</div> </div>
スタイルシートは
div#main-area{ display: flex; } div#selected-jukugo{ width:40%; } div#fields{ width:40%; } div.field{ /* 漢字が横に広がりすぎないように */ width:60%; }
のようにして、横にならべました。また、漢字群が横に広がっていると遊びにくいため、縮めています。デザインのセンスがないので横幅の数字を適当に変えて一番よさそうだった比率にしました。センスがない以上、スタイリングの知識や定石を学ぶべきかもしれません。
ともあれ、たった数十行で熟語を表示することができました。
こちら。
実装し、実際に熟語を表示してみました。「映画倫理規定管理委員会」やら「司法試験管理委員会」やらイカつい熟語が並んでますね。 これは答えが良すぎる例ですね。「(小さい)熟語のブロックを意識しながら、意外な熟語で盤面をひっくり返す」という遊びにするつもりが、「意外な熟語」の方を表示してしまっています。 「映画」「倫理」「管理委員会」が表示されていて「映画倫理規定管理委員会」を導き出して盤面をひっくり返したら戦略性があっていいんですが、ネタバレしてしまっています。
このネタバレをどう回避しましょう。長すぎる単語は表示しない？分割できる熟語は分割する？
どう対策してもネタバレになってしまう懸念がぬぐえません。なので、私が実装したのはゲームに戦略性を持たせる機能ではなく、熟語を見つける練習のための機能だったということにしました。手前味噌ですがなかなかの機転です。でもコイツに仕事頼みたくないですね。絶対言われたもの作ってこないタイプです。
まず、漢字群を見ます。なるべく多くの熟語を見つけます。で、クリックして熟語を表示させます。すぐに答え合わせができるので効率よく練習できます。
慣れてきたら、漢字群から「奪う」パターンを考えます。例えば「映画」「倫理」「管理委員会」を見つけたら、相手が「映画」や「倫理」を取ってきたら「映画倫理規定管理委員会」で奪えるというパターンを想定するということです。 ここで、答えを表示し、「司法試験管理委員会」などを見つけて、「管理委員会」は奪われがちだから後半に言ったやつが5点得するな、などと反省することができます。
あるいは、一向に消費できない「二」や「三」を、答えを見て納得することもできます。今回の例だとベースとして選んだ熟語がまずかったのか「二三千」など熟語とは言い切れないものが載っています。これは熟語辞典じゃないものから取ってきているせいで、加工者の責任です。いかんせん自動生成なので駄作も生み出してしまいます。そのケースに気が付けるので、さっさと次の問題に移ることができ、やはり練習効率は上がります。
熟語を表示してしまうというアイディアはいい線いってたと思います。生成した問題によってはただのチートツールになってしまいますが。副産物として練習ツールができたので良かったです。 競技を面白くするためか、競技について考察を深めるためかは分からないが、その問題を構成している熟語を表示することが必要だったわけです。
「二三千」のような熟語とは言えない単語が辞書に入っているという失態があきらかになってしまいました。しかし、東大王の番組でも「格闘家」がダメだったり、我々の考える熟語と熟語辞典に載っている熟語には乖離があるようです(ちなみに「格闘技」はあります)。「最高経営責任者」はいるけど「経営責任者」っていないんだなぁとか、確かな知識が要求されるゲームみたいですね。なので不問にします。
