動機 kintoneアプリを作成していて、画面の項目にcssを適用したいときがある。 個人的にjavascriptとcssを合わせて比較的シンプルに適用する方法ではないかと思うので備忘のため記録に残す。 注意 kintoneの仕様が変わったら使えなくなる可能性がある。 画面イメージ ２つのテキストボックスにスタイルを適用する例で示す。 その１ テキストボックスにスタイルを適用 デベロッパーツールでHTMLの入力項目を確認するとclass="input-text-cybozu"とある。 input-text-cybozu目掛けてスタイルを適用すれば良さそう。 やってみる 背景を黄色にしてみる。 .input-text-cybozu { background-color: yellow !important; // !importantを付けないと上書きできない } ファイルに保存して、アプリに登録する。 登録手順 １． JavaScript / CSSでカスタマイズを開く ２． PC用のCSSファイルの「アップロードして追加」で作成したCSSファイルを登録する。 ３． 保存 & アプリの更新 ４． 確認 その２ 特定の項目にスタイルを適用 デベロッパーツールでHTMLの入力項目を確認する。 なにやらテキストボックスの要素に項目を一意に特定できそうな番号がある。 この番号目掛けてスタイルを適用すれば良さそう。 やってみる #31_5519913-:1d-text { background-color: yellow !important; // !importantを付けないと上書きできない } CSSの登録手順は、その１と同様のため、割愛 １． 確認 変わらず。。。 id属性が数値から始まる場合、属性セレクターで書く必要がある模様。 [id="31_5519913-:1d-text"] { background-color: yellow !important; // !importantを付けないと上書きできない } ２． 再確認 [id="31_5519913-:1d-text"] { background-color: yellow !important; // !importantを付けないと上書きできない } できた！ その３ javascriptと絡めてCSSを伝わりやすい定義で作る！ その２でkintoneでは１つの要素を特定する時、一意の番号が払い出されていることがわかった。 確認すると、同じ番号は、４箇所（field-xxxx, label-xxxx, value-xxxx, 31_xxxx:1d-text）登場している。 kintoneはcybozu.data.page.FORM_DATA.schema.table.fieldListで画面項目の一覧が取得できる。 上記を踏まえて、javascriptとcssでスタイルを適用する。 javascript 追加、更新、詳細画面を表示した時のイベントを定義する。 (() => { "use strict"; kintone.events.on( [ "app.record.detail.show", "app.record.create.show", "app.record.edit.show", ], (event) => { const fieldArray = Object.values( cybozu.data.page.FORM_DATA.schema.table.fieldList ).map((field) => ({ [field.var]: field.id })); const fields = Object.assign({}, ...fieldArray.map((field) => field)); const nameId = fields["名前"]; const element = document.getElementsByClassName(`field-${nameId}`); element[0].classList.add("required"); return event; } ); })(); css .required { background-color: pink; } .required input { background-color: yellow !important; } １．CSSの登録手順は、その１と同様のため割愛 　 javascriptの登録手順はCSSと同様。 ２． 確認 できた。 htmlを確認すると、field-5519913にrquiredが設定されている。 javascriptのコーディングが入るが、CSSで意味のわかるclass属性で定義ができるので、個人的にわかりやすくなったかな。 javascript lessでできるようにするには．．． プラグインにすればいいのだろうか？？ まだ知識が浅くてよくわからない。

はじめに いつも目測でなんとなくやってしまっていた。 インターン先でコードを読んでいる途中、綺麗に配置する方法を知ったのでまとめた。 今回は codepen を使って説明する。 中心に配置したい要素を用意する 横が 300px, 縦が 150px の長方形を作った。 要素の左上端を中心に移動させる position: absoluteとし、left: 50%かつtop: 50%の位置に移動させた。 このときの 50% というのは、画面幅基準であって要素幅基準ではないことに注意。 要素の左上端部分が白い画面の中心にある状態になった。 要素の横幅50%分だけ左に移動させる transform属性を使い、translate: (-50%)を指定。 画面の中心にあった要素の左上端が、x軸負の向き（左）に 50% 移動した。 このときの 50% は、要素の横幅に対しての 50% である。 これで、要素が水平方向の中心に配置された。 要素の縦幅50%分だけ上に移動させる translate: (-50%, -50%)とし、y軸負の向き（上）に 50% 移動させた。 このときの 50% は、要素の縦幅に対しての 50% である。 要素を白い画面の中央に配置することができた。 画面幅を変えてもレイアウトはそのまま。 おわりに CSSを書くたびに、勉強し直さなきゃと思っている。

はじめに FontAwesomeのアイコンをオリジナルアプリに取り入れています。 そこでサイズを変更がなかなかうまくいかなくて時間がかかったので投稿します。 間違えたこと <div class="review-gear"> <i class="fas fa-cog"></i> <i class="fas fa-trash-alt"></i> </div> .fas { width: 5px; height: 5px; } 変わりませんでした。。。 正解 .fas { margin-right: 5px; font-size: 25px; } 画像と勝手にとらえてたので勘違いをしていました。 このアイコンは文字ととらえfont-sizeなのかなと思いました。 ※正しいやり方かは分かりません・・・

floatプロパティとは？ 
要素を横並びに配置することができるCSSコード。 書き方 float: 値； 「値」には、 ・left…左寄せ ・right…右寄せ 以下2つを使うことはあまりない。 ・ none…フロートやめる ・ inherit…継承させる 例） 以下のように横並びしたい時は…。 対象のクラスにfloat: left；。要素の２つともに記述すること。 floatの解除 -clearfix　-clearプロパティ floatの解除する理由は、floatプロパティによる回り込みを防ぐため！！ なので、clearfixという解除用classを親要素へ与え、子要素のfloatを解除することを行う。 clear fixの書き方 .clearfix::after { content: " "; display: block; clear: both; } clearfix::after…clearfixクラスの後ろ(after)に対しての要素に下記のCSSを適用するという意味。 content: “”;…「” “」の間に文字を入れる。 display: block;…指定された範囲をブロック要素に変換。 clear: 値;…値に入力された側に寄せられた要素に対する回り込みを解除。 both;【左寄せも右寄せも解除】 left;【左寄せされた要素に対する解除】 right;【右寄せされた要素に対する解除】

はじめに これからプログラミングを学習するにあたって、学ぶ言語について以下にまとめました。 （間違いがありましたら、ご指摘を頂けますと幸いです） HTML 言語の正式名称　 　ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略 　 ハイパーテキスト 　文書・画像・図表・音声・動画などのリンクを貼ったり、埋め込むことができる仕組み 　 マークアップ 　サイト内の文書に意味づけをしていく作業。 　HTMLでは文書をタグで囲むことで意味をつけていくことで、 　コンピューターが正しく認識できるようにする。 　 ランゲージ 　言語 開発された経緯　 　WEBページを作成するために開発された言語である 主にどのように利用されているのか 　ほとんどのWEBページにおける基本的な骨組みはHTMLで構成されている メモ 　SEO「検索エンジン最適化（Search Engine Optimization）」を意識しタグを使うことで、 　検索エンジンが、より正確に文書の中身を理解できるようになる。 　 　 CSS　 言語の正式名称 　カスケーティング・スタイル・シート（Cascading Style Sheets） カスケーティング 　カスケードとは、何段も連なった小さな滝のこと。 　転じて、同じものがいくつも数珠つなぎに連結された構造や、 　連鎖的あるいは段階的に物事が生じる様子を表す。 スタイルシート 　構造化文書などにおける表示形式を制御する仕組み。 　・・・WEBページのデザインやレイアウトなどの見栄えを変更できる 開発された経緯 　WEBページの見た目の部分を編集するために開発された 主にどのように利用されているのか 　文字のサイズや色、レイアウトなどのWEBページ上で表現される部分を 　細かく編集する際に用いられる。 メモ 　HTMLとセットで使用されることが多い。 　HTMLは「ページの構造」cssは「ページの装飾」を指定する言語といえる。 JavaScript（JS） 言語の正式名称 　ジャバスクリプト（JavaScript ）  開発された経緯 　元々はWEBページに動作をつけるために開発された 主にどのように利用されているのか　 　・ポップアップウィンドウを出現させる 　・ブラウザ上で画像を拡大表示してWebページを見やすくする 　・メッセージ送付フォームやパスワードの入力フォームなどを設置する　等 　 メモ 　クライアントサイドの言語である。（反対＝サーバーサイド言語） 　プログラミング言語のJAVAとは、全くの別物。メロンとメロンパンくらいの違う。 Ruby 言語の正式名称 　ルビー（Ruby） 開発された経緯 　まつもとひろゆき氏により開発されたオブジェクト指向言語・スクリプト言語である。 　全てのデータがオブジェクトとして扱う純粋なオブジェクト指向スクリプト言語であり 　可読性を重視した構文が特徴。 主にどのように利用されているのか 　Ruby on Railsというフレームワークを使うことで 　効率よくWEBサイトやWEBベースの業務システムを開発することができる メモ 　フリーソフトウェアであるため、無料で利用でき、コピー・変更・再配布が自由である。 　 Ruby on Rails 言語の正式名称 　ルビー・オン・レールズ 開発された経緯 　Rubyを使用したフレームワークの一つ。 　Rubyを使って簡単なコードでWEBアプリケーションの開発ができるように作られた 主にどのように利用されているのか 　クックパッド（お料理レシピサイト） 　グノシー（ニュースアプリ） 　食べログ（グルメサイト）　等 メモ 　Ruby on RailsはMVCアーキテクチャ（アーキテクチャ＝構造）で構成されており 　Model（データを扱う箇所） 　View（ユーザーが直接目にする箇所） 　Controller（ModelとViewの連携を行う箇所）の要素に分解し、開発を行う。 　 調べていて気になった単語 クライアントサイドとサーバーサイド ・クライアントサイド言語 　（JavaScript・CSSなど） 　WEBサーバーから結果がプラウザに返ってきて 　プラウザ側で処理するときに動作する言語 ・サーバーサイド言語 　（Ruby・PHPなど） 　サーバー内部で動く言語でデータベースの処理を行う仕組みを作る言語 　 コンパイラ言語とインタプリンタ型言語 　前提として 　・プログラムを実行するには、 　　機械で理解するように言語を翻訳（コンパイル）する必要がある 　・翻訳の方法の違いにより呼び方が異なる 　 ・コンパイラ言語 　記述したプログラムをコンピューターが理解可能な形式に事前に一括でコンパイルする言語 ・インタプリンタ型言語 　記述したプログラムを１行ずつコンパイルする言語 ＊気をつける点 　 インタプリンタ型言語≠スクリプト言語 　 スクリプト型言語とは 　開発で使用されるコードの内、読みやすく簡易的に記述できるプログラミング言語の汎称