あそぶ技術

フィヨルドブートキャンプでRuby on railsの学習をしている僕の学習ブログです。

フィヨルドブートキャンプ四日目 CSSで三角形を作る練習

今日の学習

CSSの続きをやりました。 10:30~12:30,13:30~19:30.

  • Normalize.css
  • ATOMバグ
  • CSSで三角形を作る練習

Normalize.css?知らない子ですね。

色々なブザウザで同じ表示ができるようにブラウザに使われている別々のCSSをリセットするCSSについてのサイトを見たのですが、聞いたことが有るのがreset.cssだけでした。 Normalize.cssやress.cssでは僕が職業訓練校に行っていた頃には聞かなかったプロパティーを効かせたり、無効化させたりしており、何だか知らないことが多いと思った僕はCSSの参考サイトを見直すことにしました。 誰なんだよキミタチ。

ATOMで読み込み用のダブルクオートが自動入力されてしまう問題

そんな訳でCSSの参考サイトを見直していたのですが、実際動かしてみないと解らない事が多いのでは?と思いATOMでHTMLとCSSを書いてみました。 が、CSSが適応されず何も変わらない…

駒形さんに聞いてgoogle clomeのconsoleのconsoleで見てみると、HTMLからCSSを読み込む際に使うダブルクオート( ""リンク"" ←これ)が何故か二重に入力されており、読み込まれない結果に

    <link rel="stylesheet" href= " /Users/t.hiyoshi/Documents/fjord_practce/css-practise/stylesheets_triangle/triangle.css " >

こう入力したのに

    <link rel="stylesheet" href= "" /Users/t.hiyoshi/Documents/fjord_practce/css-practise/stylesheets_triangle/triangle.css "" >

こうなっている。

シングルクオートにしてみてもダブルクオートがやはり自動入力され、何も打たなくてもブラウザで見るとダブルクオートが表示されCSSが効いていました。 ATOMにブラウザで表示された時の様子がリアルタイムで見れるビュワーを入れていたのですが、そちらも同様。 駒形さんがvimで保存し直し、ブラウザで確認すると通常どうり二重にならず表示されました。

ATOMにおすすめのプラグインをたくさん入れたからどれかが原因かなと思ってATOMを再インストールしてみたのですが、変わらなかったのでエディターをBracktsにしました。 ATOMなんて知らない。

CSSで三角形を作る

下記のサイトを参考にさせて頂き、CSSで三角形を作る練習をしていました。

www.granfairs.com www.granfairs.com

実際にやってみたもの

See the Pen CSS 三角形の練習 by zeroringo (@zeroringo) on CodePen.

ほぼ写経ですが、ブラウザでこまめに更新しパラメーターを変更しながら理解をしていきました。 丸い吹き出しのところは同じ数字にしても上手く行かなかったので、数字を変更しました。

解らない所

一番解らないのが最後に書いた枠線付きの吹き出しです。

See the Pen CSS 三角形の練習 by zeroringo (@zeroringo) on CodePen.

時間がないので後ほど書き足します。 absoluteの指定 :afterのz-index: 10;