企画主旨 Frontend Developer Roadmapをひたすら巡回する企画 詳しくはこちら 今回の実施内容 CSSプリプロセッサ 選択しが３つあるようだが、唯一黄色表示になっているSASSを選択。 ロードマップ作成者曰く、「今からLess始める、なんてことしたくないけどね。私なら。」とのこと。 CSS Pre-processors SASS yarn経由でSassをインストール。便利ですねえ。 "scripts": { "watch-css": "sass --watch src/sass/main.scss styles/style.css", }, 公式サイトSass Basicsに従って、シートを分割したり、階層構造にしたり、変数使ったりしてみた。 記法はSCSS記法を選択。なんかややこしい。 main.cscc @import 'base'; $font-stack: "Open Sans", sans-serif; $bg-color:#ffffd9; body { width: 600px; } header { h1 { font-size: 40px; text-align: center; margin: 0; padding: 30px 0; color: #00539f; animation-name: fadeInTitle; animation-duration: 3s; animation-timing-function: ease-in; } nav { display: flex; justify-content: space-around; align-items: stretch; } h2 { flex: 1; text-align: center; background-color: $bg-color; margin: 0; padding: 20px 0; } h2:nth-child(2){ background-color: white; } } 成果物 デザインを少しだけアップデート。Sass使うと捗ることを実感。 https://tonchan1216.github.io/WDR-frontend/v4/ https://github.com/tonchan1216/WDR-frontend/tree/4.0
Frontend Developer Roadmapをひたすら巡回する企画 詳しくはこちら
CSSプリプロセッサ 選択しが３つあるようだが、唯一黄色表示になっているSASSを選択。 ロードマップ作成者曰く、「今からLess始める、なんてことしたくないけどね。私なら。」とのこと。
yarn経由でSassをインストール。便利ですねえ。
"scripts": { "watch-css": "sass --watch src/sass/main.scss styles/style.css", },
公式サイトSass Basicsに従って、シートを分割したり、階層構造にしたり、変数使ったりしてみた。 記法はSCSS記法を選択。なんかややこしい。
@import 'base'; $font-stack: "Open Sans", sans-serif; $bg-color:#ffffd9; body { width: 600px; } header { h1 { font-size: 40px; text-align: center; margin: 0; padding: 30px 0; color: #00539f; animation-name: fadeInTitle; animation-duration: 3s; animation-timing-function: ease-in; } nav { display: flex; justify-content: space-around; align-items: stretch; } h2 { flex: 1; text-align: center; background-color: $bg-color; margin: 0; padding: 20px 0; } h2:nth-child(2){ background-color: white; } }
デザインを少しだけアップデート。Sass使うと捗ることを実感。 https://tonchan1216.github.io/WDR-frontend/v4/ https://github.com/tonchan1216/WDR-frontend/tree/4.0
タイトルがYouTuberすぎる． Progateくん のHTML&CSS初級編をやったのでチートシート兼アウトプットしておく． ほんとに列挙するだけ． 1.HTML編 見出し <h1>例</h1> 段落 <p>例</p> リンク <a href = "URL"> 例 </a> 画像 <img src = "URL"> リスト <li> <ul> 点 </ul> <ol> 番号 </ol> </li> divタグ <div>例</div> 単体では意味がないがブロック要素としてグループ化することができる <span>も同じだがこっちはインラインでグループ化するので，前後に改行を含まない <head> <head> <meta charset = "文字コード"> <title>ページタイトル</title> <link rel = "ファイル名" href = "ファイル名.css"> </head> フォーム <input>テキストフィールド</input> <textarea>テキストエリア</textarea> <input type = "submit" value = "ボタン"> クラスの利用 div <div class = "クラス名"> 2.CSS編 セレクタ h1{ } この例ならh1を使った時の振る舞いを制御する クラス .クラス名{ } 色 color : カラーコード; background-color : カラーコード; 文字 font-size : __px; font-family : フォント名; サイズ width : __px; height : __px; リストスタイル list-style : none; この例をリストで使ったらリストの黒点を消せる 枠 border : __px 種類 カラーコード; -top(bottom, left, right)で方向を指定できる 余白 padding : __px; margin : __px; 上下左右に余白を設置 -top(bottom, left, right)で方向を指定できる paddingは枠線の内側 margin は枠線の外側の余白である 入れ子のセレクタ .クラス名 h1{ } この例なら指定したクラスのh1を使った時の制御を指定する 横向き float : left; 左から横向き rightなら右から横向き 〆 初級編ではこのくらい． 環境も作らなくていいし，空き時間にサクッとできるしで手軽にやった感が出せるのはいいね． まだ無料の中で基本をやってるだけなので教材として評価するには早いけど，言語のとっかかりとしては優秀な気がするので，短期間なら有料でやってみてもいいかも．技術書より安いしな！！ とりあえず無料でできる他の初級編もやってみよ・・・
タイトルがYouTuberすぎる．
Progateくん のHTML&CSS初級編をやったのでチートシート兼アウトプットしておく． ほんとに列挙するだけ．
<h1>例</h1>
<p>例</p>
<a href = "URL"> 例 </a>
<img src = "URL">
<li> <ul> 点 </ul> <ol> 番号 </ol> </li>
<div>例</div>
単体では意味がないがブロック要素としてグループ化することができる <span>も同じだがこっちはインラインでグループ化するので，前後に改行を含まない
<head> <meta charset = "文字コード"> <title>ページタイトル</title> <link rel = "ファイル名" href = "ファイル名.css"> </head>
<input>テキストフィールド</input> <textarea>テキストエリア</textarea> <input type = "submit" value = "ボタン">
<div class = "クラス名">
h1{ }
この例ならh1を使った時の振る舞いを制御する
.クラス名{ }
color : カラーコード; background-color : カラーコード;
font-size : __px; font-family : フォント名;
width : __px; height : __px;
list-style : none;
この例をリストで使ったらリストの黒点を消せる
border : __px 種類 カラーコード;
-top(bottom, left, right)で方向を指定できる
padding : __px; margin : __px;
上下左右に余白を設置 -top(bottom, left, right)で方向を指定できる paddingは枠線の内側 margin は枠線の外側の余白である
.クラス名 h1{ }
この例なら指定したクラスのh1を使った時の制御を指定する
float : left;
左から横向き rightなら右から横向き
初級編ではこのくらい．
環境も作らなくていいし，空き時間にサクッとできるしで手軽にやった感が出せるのはいいね． まだ無料の中で基本をやってるだけなので教材として評価するには早いけど，言語のとっかかりとしては優秀な気がするので，短期間なら有料でやってみてもいいかも．技術書より安いしな！！
とりあえず無料でできる他の初級編もやってみよ・・・
組み方によってはiOS実機でborder-radiusが効かない場合があるようなので対応メモ。 border-radiusが効かないケース .hoge { border-radius: 5%; } .hoge { border-radius: 5px; } 対応策 指定単位に%は使わない。 z-indexを付与する。 .hoge { z-index: 1; border-radius: 5px; } より適切な方法があれば知りたい。
組み方によってはiOS実機でborder-radiusが効かない場合があるようなので対応メモ。
.hoge { border-radius: 5%; } .hoge { border-radius: 5px; }
.hoge { z-index: 1; border-radius: 5px; }
より適切な方法があれば知りたい。
