20200923のCSSに関する記事は8件です。

(´ω`) CREATE TABLEパースできて楽になって余った時間でコーヒー

なし水を飲みながら書いてるわ。つーわけで書く。Qiitaの記事を書き始めてからこの時点でフォロワーは1人増えたぐらいで全く効果がなかった。まったく俺の書く記事が幼稚でそもそも読み手の意識していないちゃらんぽらんの野郎だって思われているかもしれない。実際その通りだ。かつては丁寧に書いていた時期もあったが今では一日の30分をQiitaに放り込んでいる。まるでゴミのようにだ。読者はその事に絶句しているかもしれない。嘲笑しているかもしれない。それが俺だ。丁寧に書けばいけるんじゃね?...と考えたがこれは質の問題のように思える。今日も最低限の記事を書いて眠ろう。ソースコードはわいの手元にある。完璧に動作する状態だがこの分だと陽の目を見ることもないだろう。終わりだ。そこで今まで通りだらだら書くスタイルにした。文字通りダラダラ書く。帰宅したおっさんが寝ながら書いているのか?それより酷い。みたいに書くぞ。

何作ったの

昔、私はある会社にいた。ウェブ系の案件を任された時に作ったユーティリティだ。これはCREATE TABLE文をパース出来る。JSON形式で。この案件ではエクセルに全てのテーブルとそのテーブルのスキーマが書かれていた。列に対する名前・型・入力値検証・制約・備考などだ。プロジェクトを作りこむ内に整合性が合わなくなってくる。ソースコード上はこちらに変更したが「そういやエクセル更新忘れた」と言っても担当は俺一人だったから何も問題はなかった。引継時は大問題だが。特にここらへんはもうCREATE TABLEのコメント文として真横に記載しておいた方がいいんじゃないか。ぐらいのレベルに思えた。でもそれじゃいけない。やっぱりエクセルに纏めておかないと。ってことで作った。とにかく列名をコピペするのが嫌だったし手入力だと遅いで一発でエクセルにコピーするために作った。

image.png

何組み合わせたの

単純だ。エディタはCODE-MIRRORを利用している。UIはいつも通りFOMANTIC-UIだ。テーブルのCSV化とテーブルを画像化したいこともあると思ってPNG化もできる。CHROMEの拡張機能だ。html2Canvasを使っても出来るが全て自作するのはよろしくない。本末点灯だ。エラーも出るようにしてある。

image.png

どうやってパースしてるの?

NEARLEYだ。NEARLEYというコンパイラを使えばJSの解析器を作れる。NEARLEYに.NEというファイル(BNFベースのNEARLEY構文)をぶち込めばパーサ(.JS)を出力してくれる。俺はNEファイルを書いてない。実際はGITHUBで楽に作れるライブラリはないかと探してたんだ。解析 mysql create table 语句,用于通过建表语句生成 model 代码文件。を持ってきた。

5ファイルあって

image.png

構文はこんな感じ

image.png

ソースコード

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以外にも何かできたらええよな。というお話でしたとさ。

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

【初心者でもわかる】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のちょいテク詰め合わせ

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

Tsハロトレ25日目

illustrator

ワイヤーフレーム

→Adobe XD
→Cacoo(オンライン)
illustrator IllustratorをPDF(最小ファイルサイズにする)

2週間に1個、1か月に2個作るようにすると良いです。

クライアントワーク

過程を残すことが大事です。その残したものをポートフォリオにします。
ページの1つ1つのアイデアが盛り込まれていて、ディレクターやデザイナーになれる道が開かれます。

Webサイトを作るまでの流れ

①ヒアリング
②ラフ案・・・大雑把な枠組み 
③ワイヤーフレーム・・・箱だけ 
④カンプ(画像+文字)・・・画像と文字つき
⑤プロトタイプ・・・第一階層をもとに複数のページが作れる

ラフ案

ラフ案.png

960GridSystems

960px2.png

アートボードオプション

アートボードオプション2.png

スマホサイズ

iPhoneX.png

ブレンドツール

スクリーンショット 2020-09-24 11.07.07.png

ガイドをロック

ガイドをロック2.png

margin-bottomがイラレでもできる

mb30_2.png

CSS

flex froggy

flexの練習
flex-floggy.png

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用の設定なので、今は必要ないです。

均等割り

均等割り2.png

justify-contentでspace-betweenをしたとき

space-between2.png

色んなタブレット

色んなモバイル2.png

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>

row-reverse.png

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

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;
}

上の状態のままにしても、
スクリーンショット 2020-09-23 17.28.41.png
画像がみにくくて、申し訳ないのですが、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タグの直後を表現しています。

スクリーンショット 2020-09-23 18.48.33.png
図にしてみると、分かりやすいですかね!?

他にも、overflow:hiddenを使うパターンもありますが、これは背景画像を設定した場合、はみ出た部分が、デフォルトで非表示になってしまうので、時と場合によって使い分けないといけません。
スクリーンショット 2020-09-23 18.55.33.png

いやー説明するの難しいですねー。ご意見あれば、コメントくださいね。本日は、ここまで。

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

CSSのidとclassの使い分け

プログラミング勉強日記

2020年9月23日
よくCSSでclassを使うが、classの方が複数指定できるし便利なのでは?idを使う必要はないのでは?と思った。なので、idとの使い分けについてまとめる。

id属性とclass属性とは

 CSSのセレクタ(h1, p)などでスタイルを指定することはできるが、h1p要素は多く利用されるので、同じ要素でも別のスタイルを使用したいときに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>
CSS
h1 {
  color: orange;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
#green {
  color: green;
}

0923.png

id属性とclass属性の違い

 上で述べたようにid属性とclass属性を指定することで自由にスタイルを変えることができる。どちらでスタイルを呼びだしても結果は変わらないし、読み込み速度も変わらない

 ただ、class属性は1ページに何度でも使用できるのに対し、id属性は1ページに1度しか使ってはいけない。
 一見id属性は不便なように思うが、規模の大きいホームページになるとCSSが複雑になっていくので、id属性とclass属性を使い分けたほうが編集や修正に便利になる。

 ※id属性を複数使っても正しくスタイルが反映される場合があるが、文法的には間違えてるので注意する。

id属性とclass属性の使い分け

 ここで本題になります。
 class属性は何度でも使用することができるので、頻繁に呼び出すCSSはclassで定義して、一度しか使わないCSSはidで定義する。
 特にid属性は一度しか使わないヘッダーやフッターで使われることが多い。

参考文献

idとclassをわかりやすく説明!ゼロから始めるHTML/CSS講座Vol13
classとidの使い方

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

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.最後に

まだまだ初心者で誤った記事を投稿してしまうかもしれないので、変なことを書いている場合は指摘してもらえればと思います。
今後も自分がプログラミングをしていて気付いたことや、エラーの体験談とその解決について投稿していこうと思いますので宜しくお願い致します。

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

vhと%の違い

※主に自分の振り返り用です。

クレジットカード登録画面の下部に空白が生じるのをなんとかしたい。
写真ではわかりにくいですが、黄色で囲んだところに生じている空白を
無くしたいと思い奮闘しました。

スクリーンショット 2020-09-23 10.21.22.png

いろいろ調べて、htmlやbodyに

height: 100%;

を当てる方法を試したところ、他のページのビューにも影響が出てしまい
この方法は断念。。。

このあと2時間ほど奮闘しましたが、
card_addクラスに

height: 100vh;

これであっさり解決。

要素の高さ指定で%とvhの違いがよく理解できていなかったので
ここにたどり着くのに時間がかかったようです。

vhと%の違い

【vh】
ページの表示領域に依存する。

height: 100vh;

と指定すれば、高さがページの表示領域いっぱいに表示される

【%】
親要素に依存する。

height: 100%;

と指定すれば親要素の大きさまで表示される。

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

3カラム横並びカードレイアウトのコーディング

はじめに

スクリーンショット 2020-09-22 23.10.01.png

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カラムでもその都度対応できるかと思います。

まとめ

こんな感じで、コーディングに時間をかけて行きたくないので、ちょっとずつ貯めていきたいです。

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