- 投稿日:2020-09-23T22:58:57+09:00
(´ω`) CREATE TABLEパースできて楽になって余った時間でコーヒー
なし水を飲みながら書いてるわ。つーわけで書く。Qiitaの記事を書き始めてからこの時点でフォロワーは1人増えたぐらいで全く効果がなかった。まったく俺の書く記事が幼稚でそもそも読み手の意識していないちゃらんぽらんの野郎だって思われているかもしれない。実際その通りだ。かつては丁寧に書いていた時期もあったが今では一日の30分をQiitaに放り込んでいる。まるでゴミのようにだ。読者はその事に絶句しているかもしれない。嘲笑しているかもしれない。それが俺だ。丁寧に書けばいけるんじゃね?...と考えたがこれは質の問題のように思える。今日も最低限の記事を書いて眠ろう。ソースコードはわいの手元にある。完璧に動作する状態だがこの分だと陽の目を見ることもないだろう。終わりだ。そこで今まで通りだらだら書くスタイルにした。文字通りダラダラ書く。帰宅したおっさんが寝ながら書いているのか?それより酷い。みたいに書くぞ。
何作ったの
昔、私はある会社にいた。ウェブ系の案件を任された時に作ったユーティリティだ。これはCREATE TABLE文をパース出来る。JSON形式で。この案件ではエクセルに全てのテーブルとそのテーブルのスキーマが書かれていた。列に対する名前・型・入力値検証・制約・備考などだ。プロジェクトを作りこむ内に整合性が合わなくなってくる。ソースコード上はこちらに変更したが「そういやエクセル更新忘れた」と言っても担当は俺一人だったから何も問題はなかった。引継時は大問題だが。特にここらへんはもうCREATE TABLEのコメント文として真横に記載しておいた方がいいんじゃないか。ぐらいのレベルに思えた。でもそれじゃいけない。やっぱりエクセルに纏めておかないと。ってことで作った。とにかく列名をコピペするのが嫌だったし手入力だと遅いで一発でエクセルにコピーするために作った。
何組み合わせたの
単純だ。エディタはCODE-MIRRORを利用している。UIはいつも通りFOMANTIC-UIだ。テーブルのCSV化とテーブルを画像化したいこともあると思ってPNG化もできる。CHROMEの拡張機能だ。html2Canvasを使っても出来るが全て自作するのはよろしくない。本末点灯だ。エラーも出るようにしてある。
どうやってパースしてるの?
NEARLEYだ。NEARLEYというコンパイラを使えばJSの解析器を作れる。NEARLEYに.NEというファイル(BNFベースのNEARLEY構文)をぶち込めばパーサ(.JS)を出力してくれる。俺はNEファイルを書いてない。実際はGITHUBで楽に作れるライブラリはないかと探してたんだ。解析 mysql create table 语句,用于通过建表语句生成 model 代码文件。を持ってきた。
5ファイルあって
構文はこんな感じ
ソースコード
sample.html<!doctype html> <html> <head> <title></title> <meta charset='utf-8'> <meta content='' name='author'> <meta content='' name='description'> <meta content='' name='application-name'> <meta content='notranslate' name='google'> <!-- GOOGLE:https://support.google.com/webmasters/answer/79812 --> <meta content='telephone=no,address=no,email=no,date=no,url=no' name='format-detection'> <meta content='noimageindex,notranslate,nosnippet,noarchive,nofollow,noindex' name='robots'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport'> <link href='css/fomantic-ui/2.7.8.min.css' rel='stylesheet'> <link href='asset/manifest.json' rel='manifest'> <link href='asset/favicon.ico' rel='icon'> <style name='editor'> @import url('css/code-mirror/5.49.1.min.css'); @import url('css/code-mirror/addon-5.49.1.min.css'); @import url('css/code-mirror/mode-5.49.1.min.css'); @import url('css/code-mirror/5.49.1.min.css'); </style> <style name='font'> @font-face{ font-family:'M+2VM+IPAG circle'; src:url('asset/m+2vm+ipag-circle.ttf'); } </style> <style> html, body{ font:12px 'M+2VM+IPAG circle'; } /* * 配置(中央) */ body{ display:flex; align-items:center; justify-content:center; } main{ width:999px; height:100%; } .ui.grid{ height:100%; } /* * 見栄(凹凸) */ .ui.label, .ui.table, .ui.segment{ border-bottom:2px solid rgba(34,36,38,.15) !important; box-shadow:rgba(16, 36, 94, 0.4) 0 2px 6px 0 !important; } /* * 調整(位置) */ .ui.table, .ui.segment{ margin-top:0; } /* * 調整(全体) */ .ui.table>thead>tr>th, .ui.table>tbody>tr>td{ padding:.2em; } /* * 調整(個々) */ .ui.table>thead>tr>th:nth-child(2){ width:5em; } .ui.table>thead>tr>th:nth-child(3), .ui.table>tbody>tr>td:nth-child(3), .ui.table>thead>tr>th:nth-child(4), .ui.table>tbody>tr>td:nth-child(4), .ui.table>thead>tr>th:nth-child(5), .ui.table>tbody>tr>td:nth-child(5){ text-align:center; width:3em; } .ui.table>thead>tr>th{ text-align:center; } .ui.table>tbody>tr:hover{ cursor:pointer; } /* * 構造(エディタ) */ #editor{ display:flex; flex-direction:column; } #eidotr #editor-view{ flex:1; } #editor #editor-controller{ } /* * 設定(スクロールとフォント) */ #editor, #editor .ui.segment, #editor .ui.segment .vue-codemirror, #editor .ui.segment .vue-codemirror .CodeMirror{ height:100%; } #editor .ui.segment .vue-codemirror .CodeMirror{ font:12px 'M+2VM+IPAG circle'; } #viewer{ height:100%; overflow-y:scroll; } /* * FOMANTIC-UI(が既に指定してる) * CREATE TABLE->(sql2json):<TABLE>群は * スクロールバーがあるとみっともないので非表示 * #viewer::webkit-scrollbarは効かないので上書き */ body ::-webkit-scrollbar { display:none; } .ui.label>i.icon{ margin-right:0; } /* * FOMANTIC-UI * 2.7.8は古いFONTAWESOMEを利用中 * ので新しいフォントを入れ直して個々に定義する * path:css/fomantic-ui/themes/default/assets/fonts */ i.icon.file-csv:before {content:'\f6dd';} i.icon.file-image:before {content:'\f1c5';} /* * MODEL * CREATE-TABLEをTABLE化したモノ * 画像化した際(クロームの拡張機能による要素指定キャプチャ)影を残す * https://chrome.google.com/webstore/search/element%20capture?_category=extensions */ #viewer div.model{ padding-bottom:.7em; padding-right:.7em; padding-left:.7em; padding-top:0; } /* * sql2json * エラー時の色合わせ */ .ui.label.error-message, .CodeMirror .error-line{ background:#fff0f0 !important; color:#ff7373 !important; } </style> </head> <body> <main> <div class='ui grid internally celled'> <div class='row'> <div class='eleven wide column' id='editor'> <div class='ui labels blue' id='editor-controller'> <div class='ui label pointing below'> 全テーブル </div> <a class='ui label' target='_blank' href='https://chrome.google.com/webstore/detail/html-elements-screenshot/mckfdaahjhmnchjihljdiakamamondld?hl=ja'> <i class='icon file-image'> </i><div class='ui detail'>PNG</div> </a> <a class='ui label' target='_blank' href='https://chrome.google.com/webstore/detail/download-table-as-csv/jgeonblahchgiadgojdjilffklaihalj?hl=ja'> <i class='icon file-csv'> </i><div class='ui detail'>CSV</div> </a> <div class='ui label error-message' v-if='hasErrSql2json'> {{err.message}} </div> </div> <div class='ui segment fitted' id='editor-view'> <codemirror ref='myCm' v-model='content'> </codemirror> </div> </div> <div class='five wide column' id='viewer'> <div ref='models' v-for='(obj,n) in json'> <model v-model='json[n]'> </model> </div> </div> </div> </div> </main> </body> </html> <template id='model' type='text/x-template'> <div v-ui> <div class='ui divider horizontal'> {{table.name}} </div> <table class='ui table attached top single line unstackable celled fixed green'> <thead> <th>名</th> <th>型</th> <th>値</th> <th>虚</th> <th>加</th> </thead> <tbody> <template ref='models' v-for='(obj,i) in table.columns'> <!-- ここ修正 --> <tr v-if='hasName(obj)' :class="[{'positive':highlight[obj.name]}]" @dblclick='highlightRow(obj)'> <td><span>{{getName(obj)}}</span></td> <td><span>{{getDataType(obj)}}</span></td> <td><span>{{getDataTypeParam(obj)}}</span></td> <td> <span> <template v-if='getNullType(obj)'> <i class='icon check'> </i> </template> </span> </td> <td> <span> <template v-if='getAutoIncrementType(obj)'> <i class='icon check'> </i> </template> </span> </td> </tr> </template> </tbody> </table> </div> </template> <!-- native:code-mirror --> <script src='js/native/code-mirror/5.49.1.min.js'></script> <script src='js/native/code-mirror/addon-5.49.1.min.js'></script> <script src='js/native/code-mirror/mode-5.49.1.min.js'></script> <!-- native:sql2json --> <script src='js/native/lodash-4.17.15.min.js'></script> <script src='js/native/nearley/2.19.0.min.js'></script> <script src='js/native/nearley/grammar.js'></script> <!-- vue --> <script src='js/vue/2.6.10.js'></script> <script src='js/vue/code-mirror-4.0.6.min.js'></script> <script> Vue.directive('ui',function(el,binding,vnode){ el.classList.add(vnode.context.$options.name) }) Vue.component('model',{ template:'#model', model:{ prop:'table', event:'input' }, props:{ table:{ required:true, type:Object, default:{} } }, data:function(){ return{ highlight:{ } } }, methods:{ /* * 行色 */ highlightRow:function(obj){ if(this.hasName(obj)){ var name = obj.name var toggle = (name in this.highlight) ? !this.highlight[name] : true this.$set(this.highlight,name,toggle) } }, /* * 取得 */ getName:function(column){ return column.name }, getNullType:function(column){ if(this.hasNullType(column)){ return column.allow_null } }, getDataType:function(column){ if(this.hasDataType(column)){ return column.data_type.type } }, getDataTypeParam:function(column){ if(this.hasDataTypeParams(column)){ return column.data_type.params[0] } }, getAutoIncrementType:function(column){ if(this.hasAutoIncrementType(column)){ return column.auto_increment } }, /* * 検証 */ hasAutoIncrementType:function(obj){ return 'auto_increment' in obj }, hasDataTypeParams:function(obj){ return this.hasDataType(obj) ? 'params' in obj.data_type : false }, hasDataType:function(obj){ return 'data_type' in obj }, hasNullType:function(obj){ return 'allow_null' in obj }, hasName:function(obj){ return 'name' in obj } } }) /* * view-source:https://codemirror.net/mode/sql/ */ Vue.use(VueCodeMirror,{ options:{ scrollbarStyle : 'simple', theme : 'default', mode : 'text/x-mysql', firstLineNumber : 1, tabSize : 2, indentUnit : 2, matchTags : {bothTags: true}, htmlMode : true, autoCloseTags : true, foldGutter : true, lineNumbers : true, lineWrapping : true, styleActiveLine : true, styleActiveSelected : true, extraKeys: { 'Ctrl-A': 'autocomplete', 'Ctrl-Q': function(cm){ cm.foldCode(cm.getCursor()) }, 'F11': function(cm){ cm.setOption("fullScreen", !cm.getOption("fullScreen")) } } } }) new Vue({ el:'main', data:{ err:{ message:'', line:0, col:0 }, json:[], content:` CREATE TABLE action_protocol ( id int(11) NOT NULL AUTO_INCREMENT, createdbyuserkey varchar(40) NOT NULL DEFAULT '', userkey varchar(40) NOT NULL DEFAULT '', dt_created datetime NOT NULL DEFAULT '0000-00-00 00:00:00', servicekey varchar(40) NOT NULL DEFAULT '', information text NOT NULL, objectkey varchar(40) NOT NULL DEFAULT '', action varchar(50) DEFAULT '', PRIMARY KEY (id) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; CREATE TABLE crm_reports ( id int(11) NOT NULL AUTO_INCREMENT, entrykey varchar(40) NOT NULL, userkey varchar(40) NOT NULL, reportname varchar(255) NOT NULL, description varchar(255) NOT NULL, tablekey varchar(40) NOT NULL, dt_created datetime NOT NULL, dt_start datetime NOT NULL, dt_end datetime NOT NULL, date_field varchar(100), displayfields text NOT NULL, specials text NOT NULL, interval varchar(255) NOT NULL, filter text NOT NULL, defaultreport int(11) NOT NULL DEFAULT '0', basedonaddressbook int(11) NOT NULL, allow_select_fields int(11) NOT NULL DEFAULT '1', PRIMARY KEY (id) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; CREATE TABLE adminactions ( id int(11) NOT NULL AUTO_INCREMENT, dt_created datetime NOT NULL DEFAULT '0000-00-00 00:00:00', userkey varchar(50) NOT NULL DEFAULT '', urlvariables text NOT NULL, formvariables longtext NOT NULL, resellerkey varchar(50) NOT NULL DEFAULT '', companykey varchar(50) NOT NULL DEFAULT '', href text NOT NULL, PRIMARY KEY (id) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; ` }, watch:{ content:{ /* * 監視(入力) */ deep:true, handler:function(newSQL,oldSQL){ /* * 保存 */ localStorage.setItem('cache',this.content) /* * 解析 */ var self=this var editor=self.$refs.myCm.codemirror /* * 保存間隔は850ms */ var processing = _.throttle(function(){ // 消去:前回のエラー editor.removeLineClass(self.err.line,'wrap','error-line') try{ // 変換 self.sql2json() // 変換:正常 self.err.message = '' }catch(exception){ // 取得:エラーの情報と内容 var errInfo = exception.message.split('\n')[0] var errContent = exception.message.split('\n')[2] // 整形:エラーとして表示するメッセージ self.err.message = errInfo + ':' + errContent // 取得:エラーの発生した行と列(https://www.regextester.com/97589 "Syntax error at line 111 col 1:: test") self.err.line = parseInt(errInfo.match(/line\s[0-9]+/g)[0].replace('line ','')) - 1 self.err.col = parseInt(errInfo.match(/col\s[0-9]+/g)[0].replace('col ','')) // 追加:今回のエラー(https://codemirror.net/doc/manual.html#removeLineClass) self.$refs.myCm.codemirror.addLineClass(self.err.line,'wrap','error-line') } },850) /* * 処理 */ processing() /* * 表示 */ console.dir( this.json ) } } }, computed:{ hasErrSql2json:function(){ return this.err.message.length > 0 } }, methods:{ init:function(){ if('cache' in localStorage){ this.content = localStorage.getItem('cache') } }, sql2json:function(){ this.json = new nearley.Parser(grammar).feed(this.content).results[0] } }, created:function(){ this.init() this.sql2json() } }) </script>備考
CODE-MIRRORはmode/, addon/ とか別個に読み込まずにモジュール事に全ての*.jsをuglifyjs-folder使って1ファイルに纏めてる。CSSもcssclean *.css使って1ファイル化している。
さて
SQL以外にも何かできたらええよな。というお話でしたとさ。
- 投稿日:2020-09-23T21:25:09+09:00
【初心者でもわかる】tableのtr要素に効かないCSS
どうも7noteです。テーブルを作っていて、trにCSSが効かない時に確認すること
tableのtrにはいくつかうまく反映されないCSSがあります。
とくに幅やbordreなどボックスに関連するCSS効かないので注意!
tr要素にも効くCSS
効く・・・というよりも、継承されて効いているってものが多そうです。
【フォント系】
- color
- font-size
- font-weight
- font-family
【テキスト系】
- text-align
- line-height
- letter-spacing
【背景系】
- background
tr要素には効かないCSS
【ボックス系】
- width
- height
- margin
- padding
- border
trに効かないCSSがあるのはなぜ?
そういう仕様・・・というしかないのですが、あくまで私のイメージで考察してみました。
tr自体は表組みの1行を示す時に使われるタグで、tr要素の実体はどこにもありません。
つまり、実体のないモノに横幅を指定しても効かないし、borderを引こうにもなにもないところに線は引けない。
中にtd要素などを持ってはいますが、あくまでtrの役割は1行の意味だけなのでtr自身に対して直接なにかしようとしても効かないということなのかなと思います。ただこれでいうとbackgroundだけは効くので何かが違うのかも・・・
初心者の方がコーディングする際は無理にtrに余白をとるのではなく、thやtd、もしくはtable要素自体にCSSを書くようにしましょう。
そして、trはCSSが効かないもの。と覚えてしまったほうが楽かもしれません。覚えることが多いと思うので、tr要素にCSSを書かなくても済むような組み方ができるようになっておいたほうがのちのち楽かもしれません。好みはあるかもですが。まとめ
幅や高さ、余白と線はtr要素には効かない!!
いっそtrに装飾を使わないで済むほうがかも楽??です。おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日:2020-09-23T20:47:00+09:00
Tsハロトレ25日目
illustrator
ワイヤーフレーム
→Adobe XD
→Cacoo(オンライン)
→illustrator IllustratorをPDF(最小ファイルサイズにする)2週間に1個、1か月に2個作るようにすると良いです。
クライアントワーク
過程を残すことが大事です。その残したものをポートフォリオにします。
ページの1つ1つのアイデアが盛り込まれていて、ディレクターやデザイナーになれる道が開かれます。Webサイトを作るまでの流れ
①ヒアリング
②ラフ案・・・大雑把な枠組み
③ワイヤーフレーム・・・箱だけ
④カンプ(画像+文字)・・・画像と文字つき
⑤プロトタイプ・・・第一階層をもとに複数のページが作れるラフ案
960GridSystems
アートボードオプション
スマホサイズ
ブレンドツール
ガイドをロック
margin-bottomがイラレでもできる
CSS
flex froggy
Emmet
<nav> ul>li*5>a[href="#"]{ホーム} </nav> <nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">ホーム</a></li> <li><a href="#">ホーム</a></li> <li><a href="#">ホーム</a></li> <li><a href="#">ホーム</a></li> </ul> </nav>HTMLのクラス名の付け方
OOCSSとBEM
仕事ではBEMが多いです。
海外のWordPressは、OOCSSが多いです。CSSリセットの意味
CSSリセットとは、ブラウザが持っているブロックレベル要素の初期値をリセットという意味です。
インライン・・・a,img,br,div
はCSSリセットを行ってもリセットされないです。メディアクエリ
①モバイルファースト・・・仕事ではこちらが多い
min-width:768px;
(PCの最小値幅)
②PCファースト
max-width:767px;
(スマホの最大値幅)この時、ブレイクポイントが768pxです。
inline,block,inline-block
displayの使い方の 4. display: inline-blockとは? からにわかりやすく解説されています。
initial-scale
古いiphone用の設定なので、今は必要ないです。
均等割り
justify-contentでspace-betweenをしたとき
色んなタブレット
footerの中のナビゲーションボタン
①
display: inline;
文字を横並びにできるが、広げたりはできません。
<a>
に対してのpadding
はできません。②
display: inline-block;
<a>
にpadding
を付けたいときに使います。ただ、headerやbodyは、
display: flex;
を使います。最近は、
display: grid;
が使われています。floatは最近使われていない
<div class="container"> <section> <h3></h3> </section> <section> <h3></h3> </section> </div>
- 投稿日:2020-09-23T18:58:38+09:00
clearfix::afterの重要性
floatさせた要素が、上手く反映されない時の対処法
として、clearfix::afterを用いることが、解決法の1つとしてあります。
でもこれをきちんと理解出来てる方って少ないと思うんですよね。職業訓練校に通ってた時も、単に覚えてねーと言われた記憶があり、モヤモヤしていました。これを特に知りたくないかたは、flexboxを使いこなすことを推奨したいのですが、floatでしか再現出来ないこともあるので、これらの知識はmustだと思ってください。index.html<div class="container"> ここに画像が入ってるとする。 </div> <div class="text-container"> /*以下を、全てフロートさせようとする*/ <p>テキスト</p> <div class="text> <p><img src="img/main-img"></p> </div> </div> <div class="non-float">こいつはfloatさせたくない</div>style.css/*ここからは、Css*/ *{ margin:0; padding:0; } .text{ float:left; background-color:blue; } .text-container img{ float:right; background-color:blue; }上の状態のままにしても、
画像がみにくくて、申し訳ないのですが、non-floatクラスが、text-containerクラスに覆いかぶさるようになってしまっています。あらあら、そこはfloatしなくても良いのに。という状況ですね。これが、勉強を開始したばかりの頃に、とても悩まされました涙
この不必要なfloatを解除するために、clearfix::after
を用いる必要が大いにあります。
::afterが分からない方は、ネットで調べてください。擬似要素ってやつです。
ちなみに、clearfixはクラスになるので、float解除させたいdivクラスの直前の親要素に設定をしてあげてください。イメージしにくければ、clear:bothだけで、対処することも初めのうちは良いと思います。何度も言ってますが、Web言語の勉強で必要以上の暗記は、しないでください。応用が効かなくなるので。index.html/*親要素にclearfixを設定しましょう!*/ <div class="text-container clearfix"> </div>style.css.clearfix::after{ clear:both; display:block; content:""; }cssのコードですが、1から説明していきたいと考えています。
1:clearについて
clearは、フロートの回り込みを解除します。
1(1)clear:left
直前の要素が、左にfloatされていて、左に回り込みをしたくない時に使う。
1(2)clear:right
直前の要素が、右にfloatされていて、右に回り込みをしたくない時に使う。
1(3)clear:both(よく使う気がする)
直前の要素の影響を一切受けない。
2:display:blockについて
これは、インライン要素、ブロック要素というものです。
インライン要素の場合は文字が、
ああああああ
と横並びになります。しかしブロック要素では、
あ
あ
あ
あ
あ
と縦並びになります。今回の場合、divタグの回り込みを解除したいので、
display:blockを用いています。3:contentについて
擬似要素に入れたい文字や記号がある場合、ここに記述する必要があります。
今回は何も入れないので、空白のみ入力されています。style.css.clearfix::after{ /*●を表現する場合*/ content:"●"; display:inline; }4::afterについて
divタグの直後を表現しています。
他にも、overflow:hiddenを使うパターンもありますが、これは背景画像を設定した場合、はみ出た部分が、デフォルトで非表示になってしまうので、時と場合によって使い分けないといけません。
いやー説明するの難しいですねー。ご意見あれば、コメントくださいね。本日は、ここまで。
- 投稿日:2020-09-23T17:50:24+09:00
CSSのidとclassの使い分け
プログラミング勉強日記
2020年9月23日
よくCSSでclassを使うが、classの方が複数指定できるし便利なのでは?idを使う必要はないのでは?と思った。なので、idとの使い分けについてまとめる。id属性とclass属性とは
CSSのセレクタ(
h1
,p
)などでスタイルを指定することはできるが、h1
やp
要素は多く利用されるので、同じ要素でも別のスタイルを使用したいときにHTMLのid属性やclass属性を使う。CSSはHTMLのどこの部分のなにをどのようにするか指定することができ、書き方は以下のようになる。
どこの(セレクタ) { なにを(プロパティ): どうする(値); }このセレクタをid属性とclass属性の属性値(名前)を指定することができ、自由にスタイルを変えることができる。class属性の場合は名前の前に
.
を、id属性は名前の前に#
をつける。HTML<h1>こんにちは</h1> <p class="red">私の名前は田中太郎です</p> <h1>こんにちは</h1> <p class="blue">私の名前は田中次郎です</p> <p id="green">よろしくお願いします</p>CSSh1 { color: orange; } .red { color: red; } .blue { color: blue; } #green { color: green; }id属性とclass属性の違い
上で述べたようにid属性とclass属性を指定することで自由にスタイルを変えることができる。どちらでスタイルを呼びだしても結果は変わらないし、読み込み速度も変わらない。
ただ、class属性は1ページに何度でも使用できるのに対し、id属性は1ページに1度しか使ってはいけない。
一見id属性は不便なように思うが、規模の大きいホームページになるとCSSが複雑になっていくので、id属性とclass属性を使い分けたほうが編集や修正に便利になる。※id属性を複数使っても正しくスタイルが反映される場合があるが、文法的には間違えてるので注意する。
id属性とclass属性の使い分け
ここで本題になります。
class属性は何度でも使用することができるので、頻繁に呼び出すCSSはclassで定義して、一度しか使わないCSSはidで定義する。
特にid属性は一度しか使わないヘッダーやフッターで使われることが多い。参考文献
- 投稿日:2020-09-23T17:02:32+09:00
overflow: scrollが反映されなかった原因
【目次】
1.overflow:scrollとは
2.原因
3.反省
4.最後に1.overflow:scrollとは
親要素の表示範囲から、はみ出した子要素が存在する時、はみ出した分に関してはスクロール表示にすることができるというCSSの1つです。overflowというプロパティに対して様々な値を指定することができ、指定した値の種類によって、はみ出した子要素に対してどのような表示形式を指定するか決めることができます。
2.原因
widthとheightを指定していなかった為。(表示範囲を決める記述がなかった為)
「overflow」「効かない」といった単語を並べて検索したがヒットせず、初心者向けのoverflow解説記事を読んでいて気付きました。親要素からはみ出した分についての表示形式を定めるプロパティなのに、親要素のサイズが決まっていなければ、はみ出したかどうかの判定も行われていないのでスクロール表示がされないということですね。3.反省
1.エラー原因の検索する前に、公式リファレンスや初心者向けの解説記事を読んでみる。
エラーの原因を直接的に探る検索も大切ですが、そもそもプロパティの使い方を1から読み直すこともエラーを解決する上では大切だと思います。私のような初心者のエラーは基本的な使い方に問題のある場合があります。あまりに基本的すぎるエラーは、現象を直接検索してもエラーの事例としてヒットしないことがあると思いました。
2.サイズ指定を忘れがち
検証ツールでサイズ指定していない部分を選択しても、コンテンツの分だけサイズがあるように表示されます。しかし、それはコンテンツを空にすれば表示領域は0になってしまうということです。コンテンツを入力しているとサイズが指定されていると錯覚してしまうことがあるので注意する必要があると感じました。
メモをしていなかったので例を出せませんが、サイズ指定をするだけでCSSが反映されないというエラーを解消できた例を他にも経験した記憶があるので、詰まったらサイズ指定を考えてみるというのも1つの方法かと思いました。4.最後に
まだまだ初心者で誤った記事を投稿してしまうかもしれないので、変なことを書いている場合は指摘してもらえればと思います。
今後も自分がプログラミングをしていて気付いたことや、エラーの体験談とその解決について投稿していこうと思いますので宜しくお願い致します。
- 投稿日:2020-09-23T12:59:37+09:00
vhと%の違い
※主に自分の振り返り用です。
クレジットカード登録画面の下部に空白が生じるのをなんとかしたい。
写真ではわかりにくいですが、黄色で囲んだところに生じている空白を
無くしたいと思い奮闘しました。いろいろ調べて、htmlやbodyに
height: 100%;
を当てる方法を試したところ、他のページのビューにも影響が出てしまい
この方法は断念。。。このあと2時間ほど奮闘しましたが、
card_addクラスに
height: 100vh;
これであっさり解決。要素の高さ指定で%とvhの違いがよく理解できていなかったので
ここにたどり着くのに時間がかかったようです。vhと%の違い
【vh】
ページの表示領域に依存する。height: 100vh;と指定すれば、高さがページの表示領域いっぱいに表示される
【%】
親要素に依存する。height: 100%;と指定すれば親要素の大きさまで表示される。
- 投稿日:2020-09-23T09:08:53+09:00
3カラム横並びカードレイアウトのコーディング
はじめに
WEB制作をしていると、こんな感じのカードレイアウトを作成することがあるので、コピペできるようにメモしておきます。
なるべく使い回しができるようにしていきますが、もっと汎用性高くできるわ!って人はお声掛けください。
まずはカード本体を作る
HTML
<div class="card"> <div class="card__wrapper"> <div class="card__img-box"> <img src="https://cdn.pixabay.com/photo/2020/08/27/10/24/water-5521696_960_720.jpg" alt="" class="card__img-item" /> </div> <div class="card__content"> <h3 class="card__ttl">ダミーテキスト</h3> <p class="card__txt"> ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストが入ります。 </p> <p class="card__txt"> ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストが入ります。 </p> </div> </div> </div>CSS(SCSS)
.card { &__wrapper { background-color: #fff; box-shadow: 5px 5px 5px #999; } &__img-box { position: relative; width: 100%; padding-top: 55%; overflow: hidden; } &__img-item { width: 100%; position: absolute; top: 50%; transform: translate(0, -50%); } &__content { padding: 20px; > *:last-child { margin-bottom: 0; } } &__ttl { font-size: 20px; margin-bottom: 15px; font-weight: 700; } &__txt { font-size: 16px; } }まずはカード本体を作成します。
「> *:last-child」の部分で何をしているかというと、仮にダミーテキストがなくなってタイトルだけになった場合にmargin-bottomを消してくれるようにしています。こういうレイアウトのときに画像を背景でよく置くのですが、今回はコンテンツとして表示するという意識をもってあえてimgタグで置いています。
この方が背景よりも若干SEO的に有利になります。また、背景でおくとCMS導入の際にHTMLにCSSで「background-image」を指定することになるのが自分的にあまり好きじゃないです…
横並びにする
<div class="cards cards--col3"> ~繰り返す~ <div class="card"> <div class="card__wrapper"> <div class="card__img-box"> <img src="https://cdn.pixabay.com/photo/2020/08/27/10/24/water-5521696_960_720.jpg" alt="" class="card__img-item" /> </div> <div class="card__content"> <h3 class="card__ttl">ダミーテキスト</h3> <p class="card__txt"> ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストが入ります。 </p> <p class="card__txt"> ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストが入ります。 </p> </div> </div> ~ここまで繰り返す~ </div> </div>.cardのスタイルはそのままで、プラスして
CSS(SCSS)
.cards { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -15px -30px; } .cards > .card { padding: 0 15px; margin-bottom: 30px; } .cards--col3 > .card { width: 33.33333%; }こんな感じです。
.cardsの部分で、ネガティブマージンを指定しているのはカード間にできるガターを打ち消すためです。
.card自体にはwidthは決めずに、親要素直下のcardに指定することで4カラムになった時でも、2カラムでもその都度対応できるかと思います。まとめ
こんな感じで、コーディングに時間をかけて行きたくないので、ちょっとずつ貯めていきたいです。