「新HTML/CSS入門講座」でflexboxを学習したのでまとめます。
基本は箱を作って、その中にまた箱を並べるイメージです。
html
<div class="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
css
.container {
display: flex;
}
.box1 {
flex: 1;
}
.box2 {
flex: 2;
}
.box3 {
flex: 1;
}
このようにすると、box1,box2,box3を1：2：1の割合で横並びにできます。
便利なチートシートを見つけました☟解説も丁寧です。
日本語対応！CSS Flexboxのチートシートを作ったので配布します。
もともとのシュミレーション問い合わせ画面を、
ネットによくある性格診断アプリに変えて、簡単にコーディング。
今回は「選択するたびに質問がぱっぱ変わる性格診断アプリ」を作成。
デモはこちら。
See the Pen eYNqrPL by 坊 拓磨 (@bo_chan6130) on CodePen.
①htmlとcssとjs
②表記をjQueryで書いているのでCDNで読み込んでおく。
今回はjsでの動作をメインにしている記事なので、cssはcode Penからコピペするかデザインしてください。
①質問を回答(選択ボタンをおす)すれば、前の質問が消えて、次の質問が現れる
②回答の選択数に応じて答えの出し方を記述
の２つ。
以下説明。
index.html
<!DOCTYPE html><html><head><title>パパッと変わる性格診断</title><metacharset="utf-8"><linkrel="stylesheet"type="text/css"href="index.css"></head><body></script><divclass="choose_box"><divclass="app-theme"><p>ぱっぱ画面が変わる性格診断アプリ(全5問)</p></div><!-- ここから５つ質問を記述 --><!-- 質問1 --><divid="q_01"class="fit"><p>質問1: あなたは普段 </p><ul><li><aclass="btn"href="#q_02"data-value="a">話すペースが速い</a></li><li><aclass="btn"href="#q_02"data-value="b">話すペースがゆっくり</a></li></ul></div><!-- 質問2 --><divid="q_02"style="display: none;"><p>質問2: あなたは普段、相手との会話で</p><ul><li><aclass="btn"href="#q_03"data-value="a">間をとらずに話す</a></li><li><aclass="btn"href="#q_03"data-value="b">間をとりながら話す</a></li></ul></div><!-- 質問3 --><divid="q_03"style="display: none;"><p>質問3: あなたの話し方は</p><ul><li><aclass="btn"href="#q_04"data-value="a">語尾がキッパリ</a></li><li><aclass="btn"href="#q_04"data-value="b">語尾がソフト</a></li></ul></div><!-- 質問4 --><divid="q_04"style="display: none;"><p>質問4: あなたは普段声が</p><ul><li><aclass="btn"href="#q_05"data-value="a">大きめ</a></li><li><aclass="btn"href="#q_05"data-value="b">小さめ</a></li></ul></div><!-- 質問5 --><divid="q_05"style="display: none;"><p>質問5: 意見を求められた時、あなたは</p><ul><li><aclass="btn end"data-value="a">自分から口火を切る</a></li><li><aclass="btn end"data-value="b">後から発言する</a></li></ul></div><!-- ここから以下回答 --><!-- この辺に回答を記述 --></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript"src="index.js"></script></body></html>
①それぞれの質問に「#q_01」のようにidをふる。
②最初の「質問1」は画面に出力しておく。他の質問はdisplay:none;を記述し、あとで前の質問が回答されたら、次の質問のdisplay:none;を解除する、という指示をjsに後述。
③また合わせて、次の質問を出力する際にclass="fit"をaddClass()メソッドでつけることで、fitがついている質問のみを出力されるようにする。
④タグの２つの選択に、それぞれdata属性でa,bと値をふっておく。
⑤最後の質問「質問5」にはclassにendをつけておいて、「end」がクリックされたら結果が表示される仕組みをjsに後述する。
と、下処理はこんな感じ。
index.js
//ボタンを押すごとに画面が切り替わる関数$(function(){$(".btn").on("click",function(){//btnクラスをクリック後の関数処理$(this).closest("div").css("display","none");//質問画面にあたらる親要素divをdisplay:none;にするid=$(this).attr("href");//次の質問hrefをidに格納$(id).addClass("fit").fadeIn("slow").show();//次の質問にfitをつけて出力。});これで、画面の切り替える処理は終了。
次に、回答に応じて答えを出力する処理を記述。
はじめにhtmlに回答を記述。
index.html
<!-- ここから以下回答 --><!-- 回答の答え1 --><divid="answer_01"class="result"style="display: none;"><divclass="result_theme "><p>あなたの性格は</p></div><divclass="result_type0 "><h4>『イケイケどんどん』タイプ</h4></div><divclass="result_discription0"><h2>めっちゃ自己主張 × めっちゃスピーディ</h2><p> あなたは自己主張強いのでリーダーに向いています。今すぐリーダーになろう。
</p></div><divclass="return-btn"><aclass="return"href="index.html">もどる</a></div></div><!-- 回答の答え2 --><divid="answer_02"style="display: none;"><divclass="result_theme "><p>あなたの性格は</p></div><divclass="result_type1 "><h4>『まろやか』タイプ</h4></div><divclass="result_discription1"><h2>周りを立てる人 × じっくり考える人</h2><p> あなたは物事をじっくり考えて、最善策を練ることが得意。組織や周りを支えることが得意。
</p></div><divclass="return-btn"><aclass="return"href="index.html">もどる</a></div></div>
①それぞれの回答のdivタグに「answer_01」のようにidをふる
②回答はdisplay:none;で隠しておく。あとで、回答に応じて、display:none;を解除する処理をjsに記述する。
index.js
//選択ボタンデータを配列に入れてカウントする関数varcountA;//data-value="a"を選択した数を入れる変数varcountB;//data-value="b"を選択した数を入れる変数varbox=[];//それぞれのデータを配列に入れるための変数box$(".btn").each(function(){$(this).on('click',function(){varvalue=$(this).data("value");box.push(value);//data-value値をboxに入れる。(配列に値を入れるときはpush()を使用)countA=box.filter(function(x){returnx==="a"}).length;//aの数を変数countAへ入れるcountB=box.filter(function(y){returny==="b"}).length;//bの数を変数countBへ入れる});});ここまでで選択するたびに、その選択したデータの数をcountA / countBに入っている。
(もともとの開発アプリから間引いたものなので、もしかした遠回りしているコーディングかもしれません)
以下、回答数に応じて答えを出力する処理を記述。
//結果を出力する関数$('.end').on('click',function(){//endクラスをクリックしたときの関数if(countA>countB){$('#answer_01').css("display","");//回答1//answer_01のdisplayを""へ}else{$('#answer_02').css("display","");//回答2//answer_02のdisplayを""へ}});display:none;をdisplay:"";とすることで、
選択された回答は出力されるように処理を記述。
これで、簡単な診断テストは完成。
今回は２択問題で結果を出力しているが、
４択にしたい場合は、liタグを増やしてdata-valueをいじる→jsで該当処理をいじる
とすることもできるし、
回答数を増やす場合は、出力処理の条件を変更すれば、
簡単に出力できるはず。
コピペして使えると思うので、
使用したい方はドゾー
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
284日目は、
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 7, 2020
284日目 1h
・xdデザインカンプからのサイト模写
・メンターさんに課題提出
・昔つくったポートフォリオを改造（ほぼかきなおし）
残業してたからほとんどできなかった#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
CSSとは、簡単に言うとHTMLを飾り付けしてくれるものです
Webページは華やかなほうがいいですようね？
HTMLのみのサイトだと、Webサイトは白い背景、黒い文字だけになってしまいます。
CSSでは色や文字の大きさだけではなくレイアウトも自由に変える事ができます
1つ例を見てみましょう。以下のポートフォリオサイトのCSSをオフするとどうなるでしょうか…
https://github.com/Yuriko-Y/myportfolio1
(Githubにコード載せてます）
驚くほど殺風景ですね…HTML自体はとてもシンプルなものだったんですね…
逆に言えばシンプルなものでも、デザイン次第では、人の目を引き付けられるサイトを作れるということです
今回の記事
HTMLの基礎からを学びたい人
CSSを適応させる方法は3つあります。
1つ目は、「.css」の拡張子が付いたCSSファイルを作成し、それをHTMLに読み込ませる方法。
2つ目はHTMLファイルの＜head＞内にCSSを書き込む方法。
3つ目はHTMLタグに直接CSSを書き込む方法です。
特別な理由がない限り、1つ目のCSSファイルを読み込む方法が良いでしょう。
CSSファイルを別に作り、読み込む方法です。
以下の記事を参考にCSSファイルを作ってみましょう
CSSで見た目の調整をしよう！
HTMLファイルにCSSのファイルを読み込ませる方法は＜head＞タグの中に＜link＞タグを書きます。
<linkrel="stylesheet"href="">herfの中にCSSのファイルがある場所を書きます。
1つのCSSファイルを複数のHTMLで読み込むことができるので、複数のHTMLファイルに対して共通のCSSを適用できます。
次にHTMLファイルの＜head＞内にCSSを書き込む方法です。ファイルに分ける必要もないような細かい修正を行う際に使用します。
以下のようにstyleタグを使用して、styleタグ内にcssを記入していきます。
<style>h1{color:red;}</style>このようにh1の部分だけcssが適応されました。
HTMLのタグの中にCSSを直接CSSを書く方法です（「インラインにCSSを書く」と言ったりもします）
タグの中にCSSを書くときは、<タグ名 style="CSSをここに書く">という形になります。
<h1style="color: red;">猫の一日</h1>先ほどと同じ結果になりました！
CSSの基本的な構成と文法を見ていきます。
CSSの基本文法の書き方としては「セレクタ（どれの）」「プロパティ（何を）」「値（どのように）」変えるかを指定します。
h1{color:red;font-size:50px;}このようにプロパティを改行して何個も書くことができます。この場合を日本語で解説すると、
「セレクタ（h１の）」
「プロパティ（色を）」「値（赤に）」、また
「プロパティ（フォントの大きさを）」「値（50pxに）」したとなります。
CSSのセレクタはどの対象物を変化させるかを指定します。一番簡単なセレクタはHTMLのタグです。
例えば、h1やpタグ、divタグなどです。
しかし、h1やpタグが同じHTMLファイルにたくさんあり、それぞれ適応させたいCSSを変えたいときは「子孫セレクタ（しそん）」を使います。これは、「どこの中にある何」という指定の仕方ができます。
divh1{color:red;}この場合だとdivタグの中のh1だけ色が変わります。
「プロパティ」とはセレクタで指定した物の「どの内容を変えるのか」を指定するものです。
代表的なものをを以下の表にまとめてみました。
| プロパティ | 意味 |
|---|---|
| color | 色 |
| font-size | 文字サイズ |
| width | 横幅 |
| height | 高さ |
| background-color | 背景色 |
| font-weight | 文字の太さ |
「セレクタとプロパティ」で指定したものに対して「どのように変える」かを指定するものです。
値はプロパティによって様々なものがあります。
例えば、プロパティが色なら、値は何色にするかという値が入り、プロパティが文字サイズなら、値は大きさを表す数字と単位を入れる必要があります。
これでだいぶCSSの基本的な書き方がわかってきたのではないでしょうか
ではこの場合はどうでしょう。
以下のコードがありました。
<div><h1>猫の一日</h1><p>ひたすら寝てます</p></div><div><h1>猫の遊び</h1><p>猫じゃらしで遊びます。</p></div>divタグで囲まれた塊が二つあり、それぞれh1とpタグが入っています。
上のdivタグのところだけ変えたいとします。つまりh1タグに囲まれた、「猫の一日」とpタグで囲まれた「ひたすら寝てます」の部分だけ文字の色を変えたいとします。
先ほど紹介した子孫セレクタを使用すると...
divh1,p{color:red;}
divタグが2つあるので、2つとも変わってしまいました。
そこで使えるのが、HTMLのclass属性とid属性を利用します。
上のdivタグのところだけ変えたいので、そこにclass属性をつけ、下のdivタグと区別します。
classの名前を今回は"change_color"にしました。
<divclass="change_color"><h1>猫の一日</h1><p>ひたすら寝てます</p></div><div><h1>猫の遊び</h1><p>猫じゃらしで遊びます。</p></div>CSSファイルは以下のように書きます。
.change_color{color:red;}
無事上のdivタグの中身だけ色を変えられましたね。
class属性を付けていた部分をid属性に変えてみましょう。
<divid="change_color"><h1>猫の一日</h1><p>ひたすら寝てます</p></div><div><h1>猫の遊び</h1><p>猫じゃらしで遊びます。</p></div>CSSファイルは以下のように書きます。
#change_color{color:red;}
先ほどと同じ結果になりました。
上記では、「class」を使うか「id」を使うかの差だけで、ブラウザ上での表示効果は全く同じです。
では、「class」と「id」の違いは何でしょうか？使用上の違いを見てみましょう。
★class：
「種別名を割り当てる」
同じclass名を、1ページ中に何度でも使える。
★id：
「固有の名前を割り当てる」同じid名は、1ページ中に1度しか使えない。
また、優先順位にも差があり、「idはclassよりも優先される」という規則があります。
そのため、極力idを使わずにclassだけで記述するほうが楽でしょう。
今回はCSSの適応方法と基礎文法でした。
次回はCSSを使って本格的に色を付けたり、フォントを変えたり…華やかなサイトづくりの続きをしていきましょう。
自分は現在、qiitaのストックが上手く使いこなせていません。
理由としてストックが多くなりすぎて、どの記事をどの場面で使いたいからストックしたのか分からなくなるからです。
じゃあ、どの場面で使うかを明記すれば良いんだ！！！
という事で、僕が良くハマる「ありがちな場面」と「その際に有効な記事」をセットでまとめる事にしました。
(とはいえqiita以外の記事も紹介してます。)
今回は「web制作案件」というテーマで場面毎にまとめています。
自分の手引きとして書いた記事ですが、主にweb制作の初学者の参考になれば幸いです。
初めてのクライアントさんの時はいつも以上に本気を出すために、一旦この記事を読みます。
仕事が円滑に進むようなテクニックが誰でも実践できる形で書いてあるので、最高です。
毎回はじめに意識するだけで、ちゃんとした人に近づいている気がして気分が良いです笑
見積もり時に迷ったらこの記事を読みます。
自分の場合、時給や人月での計算がベースですが、そもそもどのぐらいの収入が妥当なんだっけ？を考える時の指標にしています。
特に自分はフリーランスなので、福利厚生や各種手当がない部分や営業などに使っている労力をどこまで勘定に入れるかと言った観点でお世話になっている記事です。
実際に制作期間を感覚で出さない為に、迷ったらこの記事に帰ってきています。
この記事で挙げられている
・予想外のタスクはないか
・やったことない事はないか、あればどのぐらい時間がかかるか
・ハマりポイントはないか、あればどこら辺か
辺りは書き出した上で制作期間は判断した方が良いなーと感じます。
案件というと請負が多そうでうが、プロジェクトによっては準委任で参画するケースは多々あります。
常駐やチームのミーティングへの参加など準委任だと迷いどころは多いのでコチラの記事で確認します。
準委任と請負に関しては単価にも大きく影響の出る部分なので、知識として知った上で契約を巻く必要があります。
契約は当事者間で自由に決められる節があるので、後のアフターフォローをどこまでするか、ヒアリングや途中経過をどこまで明文化するか、など自分がやり易いスタイルを見つけておくと良いと思います。
この記事は実際のLPの制作案件を基にしているので、とても流れがリアルで分かり易いです。
公開前のチェックもとてもしっかりやってるので、これ見ておけばLPの工程での漏れはないはず。
僕の場合はどこまでやるのか予算に応じてクライアントさんに相談しています。
web制作案件の具体的なステップが書いある為、制作案件に入る前にこの記事を確認します。
そのステップ毎での注意点が充実していてボリューミーですが、全て網羅できたらwebサイト制作では怖いもの無しになってそうなぐらいです。
普段はfigmaやzeplinを使う事が多いので、デザインがphotoshopで来た際はこの記事に助けてもらいます。
Figmaのデザインカンプから画像をダウンロードする方法忘れた時はこの記事です。
その他にも模写コーディングでの練習に使えるHTML to Figmaの使い方などが書いてあります。
また、macだと「option+shift+カーソル」で細かい値を取得できます。
自分の生地で手前味噌ではありますが、デザインカンプがある状態をHTMLに起こす際はこの記事を読み直しています。
HTMLをコーディングする前にデザインを基に入れ子構造と命名までは決めると良いでしょう。
HTMLタグで何が適切かを覚えていられないので、この記事で確認しています。
序盤にHTMLタグの一覧があり、重宝しています。
HTMLタグ以外にCSS、Jsの基礎的なことが網羅されていて、ついでに流し見しておくと忘れていた知識が返ってきます笑
命名規則は何パターンがありますが、僕はBEMを好んで使っています。
とはいえ、まだまだ漏れも多いのでclassの命名をする際は傍らにこの記事をおいています。
classの命名の時に1番苦しむのが英単語の設定ですが、この記事に出会った事でだいぶマシになりました。
複雑でない案件なら、ほとんどのパターンを網羅できているんじゃないのかな。
辞書のように使わせてもらっている良記事です。
cssを使っていると、グリッドレイアウトを使う事は多々あると思いますが、不安になったらこの記事に帰ってきます。
グリッドに関してはこれだけで十分なほど充実していて分かり易いです。
さらに場面別の「CSS Grid Layout を極める！（場面別編）」まで合わせれば、レイアウトに関してはほとんどのパターンを網羅できます。
表示崩れやリンクなどの挙動に不備がないかを各対応ブラウザで確認していきます。
レスポンシブな部分もチェックしたいので、スマホとパソコンの両面で可能な限りの確認をしましょう。
在宅で案件を進めていると、上手くいかない時に1人でいる事が多いので、精神にきます！笑
何か改善できないかなーとこの記事を参考に参考にします。
午前中に集中力を要するものを行う
机や場所などの環境を定期的に変える
午前と午後で証明を変える
などの実践しやすいtipがまとめられている為、煮詰まった時に重宝している記事です。
自分が後で探しやすいように「web制作」というテーマで記事をまとめてみました。
この記事を片手に自分のweb制作がますます捗ると思うとワクワクしてきます笑
以上。
昨日の勉強会でHTML・CSS難しいって感じた人が多いと思います。
なのでこれから紹介する、今後頻繁に使う事になるcss集を参考に、復習してみてください！
昨日は難しく感じたかもしれませんが、
反復学習する事で頭に入っていくの繰り返してみましょう。
フロントを作成する際に頻出する以下のレイアウトの実現方法を紹介します。
・ブロック要素を横に並べる（flex）
・絶対値を指定して場所を変更(postion)
・要素を中央に寄せる(margin)
・横並びにしたい子要素を含む親要素に対して、dispaly:flex;
・横並びにしたい子要素に対して,float:left;(flexが最強なので割愛)
<divclass="yokonarabi"><divclass="yoko">横並びになります</div><divclass="yoko">横並びになります</div><divclass="yoko">横並びになります</div></div>.yokonarabi{display:flex;}{display:flex;}は絶対に親要素に対してかけましょう！
flexは横並び以外の効果もあるので、深く知りたい人は下記を参考に。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
1. 動かしたい要素にposition:absolute,
動かす基準にしたい要素にposition:relativeをかける
基本的には、親要素を基準にし、子要素を動かす場合が多いので、
親要素にposition:relative、子要素にposition:absolute
2. 動かす要素にtop,bottom,left,rightのどれか（複数可）を
選択し、親要素を基準にどれだけ動かすかpx指定。(0の場合はつけない)
<divclass="parents"><divclass="child"></div></div>.parent{position:relative;width:100px;height:100px;background:pink;}.child{position:absolute;top:50px;right:0;height:50px;width:50px;background:blue;}⬇︎
position:absoluteを使う際は、必ず動かす基準となる要素にposition:relativeをつけます！
おすすめ記事
https://saruwakakun.com/html-css/basic/relative-absolute-fixed
１, 親要素と子要素にwidthを指定する。（親>子）
２, 子要素にmargin:0 auto を指定
(margin-left:auto; margin-right:auto; でも上記と同意)
上記コードで親要素と子要素の幅の差を均等に振り分けてくれる。
width:100pxの親、width50pxの親の場合、
差分の50pxを子要素のマージンとして左右に25pxずつ振り分けられる。
<divclass="parent"><divclass="child"></div></div>.parent{width:100%;height:100px;background:pink;}.child{background:blue;width:80%;height:100px;margin:0auto;}⬇︎
この記事は、プログラミング初心者の私がポートフォリオを公開するまでの実録を、実際につまづいたポイントと共に紹介します。
ポートフォリオの実物が見たい、ソースコードだけ見たいという方は下記からご覧になってください。
実物
実際のコーディングについての詳細などは紹介していません。
代わりに参考になったリンクを載せています。
(個人的な履歴管理のためGithubを使っていますが、Githubを使わないと公開できない訳ではありません。)
公開するまでの手順 (約27時間)
1. デザイン検討 (約7時間)
2. コンテンツ検討、データ準備 (約1時間)
3. コーディング (約17時間)
4. Webサイトの公開 (約2時間)
やってみての感想
どうしたら良い感じのデザインになるんだ...
デザインはITに関わらず触れたことがありません..
けど今回は初めて公開するサイト。デザイナーさんが作るような複雑な動きやイラストはできずとも、それなりにモダンでシンプルなものにしたいと思いました。
で実際にどう考えたのかですが、主には下記の3つです
これでWebサイトのレイアウトのイメージを掴みました
「ポートフォリオ」で検索するとわかりますが、
多くのサイトは、1ページで完結し縦に長いサイト(シングルページ)で作られています。
スマホとの相性が良いなどユーザーにとってのメリットが多いのでしょうが、今回の私にとっては、たくさんのhtmlファイル、cssファイルを用意する必要がないし、複数のページを用意するほどのコンテンツもないしということで、シングルページを採用しました。
下記を参考にしながら、具体的なレイアウトを決めました。
書籍は、Webサイトに限らず様々なデザインを取り扱っていて、デザインの基本を知るという意味でも勉強になったので、私の中の良書の1つになりました。
これでWebサイトに使う色を決めました
下記のサイトから、自分が好きな配色を選び、その色だけをWebサイト内で使うようにしました。
https://www.canva.com/ja_jp/learn/100-color-combinations/
自分好みの配色を作ってくれるサイトも試したのですが、正直サイトの使い方がよくわからず(多分私の理解力の問題..)、諦めました..
上記のサイトは、配色のイメージと共に、カラーコードも載せてくれているのでその点便利でした。
これで完成形とそっくりの見た目のWebサイトの模型を作ります
プレゼン資料を作るような感覚で、オブジェクトを配置していけば完成します。
実は当初モックアップを作る予定はなく、既にコーディングを始めていたのですが、どうも進みが悪かったのです。少しずつコーディングしながらデザインを決めようとしていたのでそれは当然の結果かもしれません。
やっているうちになんかここはこれとのバランスが悪いからやっぱり違うオブジェクトを使おう、となることが多かったのです。
そこでコーディングしながらというのは辞めて、簡単なものでも良いからモックアップを先に作ってそれをガイドにしようと思いました。
やったこととしては2つ
です
業務で実際にモックアップを作成している人たちは、SketchやAdobeXDといった専用のツールを使うのが多分普通なんでしょうが、使ったことがなかったし、pptx(もちろんkeynoteでも)の機能で十分作成できそうなデザインだったため使いませんでした。
デザイン検討の時と同様、Pinterestや他の人のサイトを見て、決めました。
多くのポートフォリオの構成は下記のようになっている印象でした。
内容もよくあるものだったので、そんなに悩まずに書きました。
ただ今回、成果物のところはまだダミーが入っています。
アイコンは、Font Awesomeを使うことにしました。利用方法はここでは説明しませんが、HTMLファイルに一行かけばすぐ使えるようになります。
proと書かれているアイコンは有料プランに登録しないと使えませんので、proではないものを使います。
そして次の画像準備で、当初想像していなかったつまづきがありました。
表示に必要な良い感じの画像がない..
私が今回表示したい画像は2つでした。
みなさんシングルページという部分は変わらずとも、画像は何かしらの個性を出していることが多いです。
できる方であれば、PhotoShopやIllustratorを使っていい感じのデザインで作ったりしています。
ただ私はそのようなツールは使えません。そして自己紹介に自分の写真を載せたくない..(というか普段写真を撮らないので、車の免許証とかにある証明写真くらいしかなかったんです。本当に)
なんとか自分で撮った数少ない写真の中から良さそうなものを選び、ツールなしで良い感じにできないか検討しました。
まずトップの画像に関してですが、
HTMLタグのimgタグを使えば、限られているながらもCSSで写真の加工ができることがわかりました。
デザイナーさんが気合い入れて作ったものとは遠いかもしれないですが、それなりに加工が可能とわかりました。
参考：https://iholdings.jp/archives/2917
と説明しておきながらなんですが、今回はgrayscaleを使ってみただけなので、加工なしの写真とそんな変わりません..
次にプロフィール画像ですが、職場でこんなツールを紹介してもらいました。
どちらも製作者は、sato_neetさんという方です。
自分の写真をアップロードすれば、オリジナルの自分っぽい画像が出来上がります。私みたいに証明写真しか持ってない人でもいい感じに仕上がるはずです!
大変感謝です。
もちろん、他にも写真加工ツールはあると思いますし、イラストレーターさんに依頼する方法もありましたが、今回は早く公開したかった、全て無料でやりたかった、ちょうどタイムリーにこのツールを紹介いただいたので、上記を使いました。
やっとコーディングし始めます。
ここまで長かった..
あとはひたすら、作ったモックアップの通りになるようにコーディングしていきます。ブラウザのDeveloper Toolを使い、実際の画面を確認しながら進めました。
スマホの時代なのでスマホ/PCどちらも画面にも対応できるよう、レスポンシブ対応もしました。初めて使うメディアクエリに四苦八苦しながらなんとか進めました。モックアップはPC用しか作ってなかったんですが、そこはなしで頑張りました。
言語やライブラリ、フレームワークは定番の以下を使いました。
また使ったエディタは以下です。
必要そうだと思った拡張機能を入れながら使いました。もちろん全く入れなくても使えますが、使った方がコードが見やすくて便利です。
最後に、Webサイトを公開します。
この作業をすると、誰でもある決められたURLにアクセスすれば、作ったサイトを見ることができます。
「ホームページ 公開」と検索すると、独自ドメイン、レンタルサーバーなどなど用意するものが複数あるようです。今回はとりあえず早く公開したかったので、個人的に最も楽にできそうだと思ったFirebaseの無料プランのHostingを使って公開することにしました。
ドットインストールのFirebaseの講座がかなり参考になりました。補足情報を参考にしながら、動画の通りに迷うことなくできました。
このオンライン講座は無料の講座が多く紹介されています。上のリンクの講座も無料です。
この動画の方法だと自分の好きなURLにすることはできない(独自ドメインは取得しない)のですが、今回はとりあえず公開できればよかったし、何より全て無料でやりたかったので取得はしませんでした。
コーディングはもちろんわからないことだらけで一番時間がかかったのですが、
このデザインを実現する、という目標が明確なのでストレスなく進められました。
それよりもデザインや画像の準備が個人的には結構負担でした..
何が正解なのか、どこまで凝ったら良いのかがわからず..
今回はかける時間は特に決めていませんでしたが、時間で区切るというのは一つの手だったかなと思います。
また長くなるのでここには記載していませんが、改善点・反省点をGithubにメモったので、諸々改善していきたいです。
まずは多言語化(英語対応)をしたいと思ってます。
あと今更ですが、各手順の横にかかった時間を記載しています。
合計で27時間でした！
仕事の合間に進めたので、作業期間としては1週間くらいですね。
今回は自分の成果物を作ってみることを目標にしていたので、ユーザー目線でこうした方が良い・今後の保守を考えて..などなど改善すべきことも多いのですが、
これからポートフォリオを作ろうとしている人の参考に(&と自分の記録に)なれば幸いです。
XPath, CSSSelectorで、DOMをクエリする場合に、クラス名やコンテンツの文字列で検索したい場合が多い。
// xpathdocument.evaluate('//dom[ contains(@class, "abc") ]',this,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);// css-selectordocument.querySelector('a[class*="abc"]');単純なクエリでは問題ないが、正規表現が使えると、圧倒的にクエリの表現力が上がる。
rexpathを使うと、XPath, CSSSelectorと正規表現を協調させられる。
/* classが /tr-item\d+_.+/i にマッチする aタグ を取り出す */// xpathdocument.rexpath(['and','//a',['@~','class',/tr-item\d+_.+/i]]);// switch to use css-selectorrexpath.use_css_selector();// css-slectordocument.rexpath(['and','a',['@~','class',/tr-item\d+_.+/i]]);独自のクエリ言語を開発するとか、XPath2.0をwebアセンブリで実現するとか、
まあいろいろやり方があるんだろうけれど。
極力省エネで、合理的に、直交する解決策を考えて実装した。
まあそこそこ便利だったので、記しておく。
拙作のnpmライブラリ、rexpathを使う。
https://www.npmjs.com/package/rexpath
既存のXPath, CSSSelector, RegExp を薄くラップしたクエリ言語を定義することで、
最小限のエネルギーでDOMクエリと正規表現を協調させることができる。
クエリを継続渡し形式のクロージャにコンパイルすることでバックトラック探索を実現している。
特別なレクサはない。JavaScriptの配列を基本として簡単なクエリ言語を実現している。
chrome devtools consoleなどで、
// jump to qiitadocument.location.href="https://qiita.com";// unpkgからrexpathをロードする。varelement_script=document.createElement('script');element_script.src='https://unpkg.com/rexpath';document.head.appendChild(element_script);// テキトーな例。 class属性が正規表現 /tr-item_.+/i にマッチするaタグを見つけ出して削除する。varlinks=document.rexpath_all(['and','//a',['@~','class',/tr-item_.+/i]]);links.forEach(link=>link.parentElement.removeChild(link));文法、例など、まだ未整備だが書いてある。
README.mdを参照のこと。
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
285日目は、
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 8, 2020
285日目 2h
・昔つくったポートフォリオ改造（ほぼ書き直し）
今度は設計とかちゃんと意識して書く#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
ul.hogehoge {
list-style: none;
padding-left: 0;
}
下記のmarginの場合で学習
margin－スタイルシートリファレンス - HTMLクイックリファレンス
最近よく見る↓のような斜め背景をCSSで実装する方法です。
See the Pen Slant Section by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
<section>〜</section><sectionclass="slant-section">〜</section><section>〜</section>HTMLはsectionなどのレイヤーに slant-sectionのクラスを付与するだけです。
slant-sectionは以下のような記述です。
.slant-section{margin:100pxauto;}.slant-section:before{content:"";display:block;position:absolute;top:-50px;z-index:-1;width:100%;height:150%;background:#eee;transform:skewY(-5deg);}.slant-section+section:before{content:"";display:block;position:absolute;top:-50px;z-index:-1;width:100%;height:100%;background:#fff;transform:skewY(-5deg);}最初に ,slant-sectionに十分な上下マージンを取っておきます。
斜めにするのでゆったりした余白が必要です。
次に .slant-sectionの疑似要素 :beforeにスタイルを設定していきます。
「斜め背景」と言いつつ、は実は背景ではなく:before要素を平行四辺形に傾けたものなのです。
この実装には以下3つの工夫が必要です。
transform: skewY()transform: skewY(-5deg);で対象の要素を5度傾けた平行四辺形にできます。
しかしこれを単純に .slant-sectionにかけると、中身のテキストも含めて傾いてしまいます。
そこで次の工夫が必要です。
:before要素を平行四辺形にする.slant-section自体ではなく、.slant-section:beforeを実体化させ、大きな平行四辺形にして .slant-sectionの後方に配置する手法を取っています。
しかしここで別の課題が発生します。slant-section内の増減に柔軟に対応するために、完全なpx固定にせず縦150%を指定していますが、内容量によっては大きくはみ出してしまうのです。
そこで最後の .slant-section + section:beforeのスタイルがあります。
slant-sectionの次のレイヤーでも同じような白い平行四辺形を作ることで、グレーの平行四辺形がはみ出してくるのを防いでいます。
cssnanoは、PostCSSの枠組みの中でCSSを最適化するツールですが、最適化項目も大量にあります。どのようなものがあるのかまとめてみました。
説明に使うために、CSS用語を確認しておきます（MDN）。
p{font-size:12px;color:green;}p。{ ... }の箇所。font-size: 12pxとcolor: green1。font-sizeとcolor。12pxとgreen。原文ではアルファベット順に並んでいますが、ここではわかりやすいように小さい方から大きな方へ順に並べていって、そして最後にデフォルトで適用されないルールについて触れます。
calc（詳細）…CSSのcalcで算出する値のうち、事前に計算できる部分は計算してしまうcolormin（詳細）…色指定を、同じ色の中でできるだけ短い表記のものに置き換える（white→#fffなど）。convertValues（詳細）…長さ・時間・角度の指定を、同じ量でできるだけ短い表記のものに置き換える。minifyFontValues（詳細）…font-familyをできるだけ短い表記になるようにしたり、font-weightを数字に置き換えたりするminifyGradients（詳細）…linear-gradientなどの表記を短くなるように変換するnormalizeDisplayValues（詳細）…display: 外側 内側の2値指定されたもの2を、1つの値に変換可能なら変換するnormalizePositions（詳細）…background-positionなどの値を短い形に変換するnormalizeRepeatStyle（詳細）…background-repeatなどの値を短い形に変換するnormalizeString（詳細）…文字列の引用符を統一し、行継続で入っている改行も削るnormalizeTimingFunctions（詳細）…transition-timing-functionなどの値を短い形に変換するnormalizeUnicode（詳細）…unicode-rangeで、?で書けるものを?で書いて表記を短縮するnormalizeUrl（詳細）…url()の引用符を外す、解決できる相対パスを解決するなどして、表記を短縮するorderedValues（詳細）…borderやtransitionのように、バラバラな種類の値を複数指定できるもので、値の順番を統一する（結果、圧縮率が高まる）reduceInitial（詳細）…initialの実際の値がもっと短い表記なら、それに置き換えるreduceTransforms（詳細）…同じtransformをより短い書き方に変更するsvgo（詳細）…Data URIで埋め込まれたSVGを、svgoで最適化するdiscardDuplicates（詳細）…全く同じ宣言、規則セット、at-ruleを削除するmergeLonghand（詳細）…四辺がバラバラに定義されたmargin、padding、borderを1つのショートハンドにまとめるdiscardDuplicates（前述）discardEmpty（詳細）…空の規則セット、at-rule、セレクタのない宣言ブロックを削除するmergeRules（詳細）…隣接していて、「セレクタが同じ宣言ブロック」あるいは「全く同じ宣言のある宣言ブロック」をまとめるdiscardOverridden（詳細）…全く同じ名前で定義されて上書きされた@keyframesや@counter-styleを削除するminifyParams（詳細）…at-ruleの引数から余計な空白を削るdiscardComments（詳細）…コメントを削除するnormalizeCharset（詳細）…@charsetを（付けるとしたら）先頭の1つだけにするnormalizeWhitespace（詳細）…削れる空白・改行を削って、最後の宣言の後のセミコロンも落とすこれらは、「他のCSS/JSと連携する場合、意味を変えてしまう」などの要素があるものです。
autoprefixer（詳細）…不要なベンダプレフィックスを削るdiscardUnused（詳細）…未使用のat-ruleを削除するmergeIdents（詳細）…同じ内容のat-ruleをまとめるreduceIdents（詳細）…at-ruleの名前を短縮するzindex（詳細）…z-indexの値を整理するまず、デフォルトで入っているものについては、正しく文法を解釈する環境にいる限りは安全です。流石に今どき使うことはまずないとは思いますが、文法違反、あるいは文法的には無意味だけど実際の挙動が違う、というような書き方を利用したCSSハックは正常に動作しなくなると思われます。
あと、重複削除などの機能があるので、cssnanoはプロセスの最後に近いところでかけるほうが効果的となります。Webpackであれば、postcss-loaderとして入れるのではなく、optimize-css-assets-webpack-pluginとして入れたほうがいいでしょう。
ページ容量を増やさないために、不具合報告やコメントは、説明記事に記載いただけると助かります。
※ JavaScript等のタグが付与されている記事は除いています。
【JavaScript関連】【長期】Qiitaの今読んでおくべき記事１００選【毎日自動更新】を参照してください。
| 順位 | 記事名 ________________________________________ | ユーザ | 投稿日付 更新日付 | LGTM1 |
|---|---|---|---|---|
| 1 | CSSのクラス名を決めるときに使うリストをつくりました | manabuyasuda | 16/10/07 18/09/05 | 2307 842 |
| 2 | CSS Grid Layout を極める！（基礎編） | kura07 | 17/04/13 20/02/25 | 1459 532 |
| 3 | CSSアニメーション 入門 | soarflat | 16/08/18 20/01/13 | 1166 388 |
| 4 | 【CSS3】@keyframes と animation 関連のまとめ | 7968 | 17/06/28 19/11/21 | 773 427 |
| 5 | もう逃げない。HTMLのviewportをちゃんと理解する | ryounagaoka | 15/06/10 18/10/01 | 2678 229 |
| 6 | なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 | mikimhk | 19/12/15 19/12/17 | 1636 1636 |
| 7 | CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分 | 39_isao | 16/07/04 18/05/08 | 837 268 |
| 8 | CSS(SCSS) で作るペルソナ5 風メッセージウィンドウ | dd0125 | 20/02/29 20/03/01 | 1149 1149 |
| 9 | GETとPOSTの違いについて | kanataxa | 17/04/07 20/02/06 | 587 309 |
| 10 | CSSで中央寄せの方法いろいろメモ | KAMEch | 15/10/07 19/06/24 | 780 240 |
| 11 | エンジニアでも知っておきたいデザインの基礎知識 | laineus | 19/10/05 19/10/05 | 1594 1594 |
| 12 | 早く・それなりの UI を実現する React コンポーネントセット 16 選 | kyrieleison | 16/07/10 18/06/15 | 1783 194 |
| 13 | これからはcssはSassで書こう。 | m0nch1 | 17/07/25 18/08/08 | 569 243 |
| 14 | Googleフォームを自在にカスタマイズする | curioussafuta | 18/01/30 20/02/27 | 434 264 |
| 15 | flexboxのバグに立ち向かう（flexboxバグまとめ） | hashrock | 16/08/14 17/10/10 | 1265 163 |
| 16 | Bootstrapのグリッドシステムについてまとめてみた | akatsuki174 | 16/01/05 16/01/06 | 575 166 |
| 17 | こんなHTMLとCSSのコーディング規約で書きたい | pugiemonn | 14/07/08 19/09/20 | 1380 132 |
| 18 | CSS Grid Layout を極める！（場面別編） | kura07 | 17/04/17 19/09/16 | 541 198 |
| 19 | エンジニアが知っておきたい色についてのお話 | megumu-u | 19/06/17 19/08/14 | 1355 1355 |
| 20 | 【爆速】HTML5 + CSS3で簡単にWebデザインしよう！ | Y_ASAMOTO | 16/05/10 18/12/08 | 525 176 |
| 21 | ブラウザ君「ワイはCSSのセレクタを右から読むんや」 | Yametaro | 19/06/04 20/01/25 | 1164 1164 |
| 22 | 【CSS3】Transform（変形）関連のまとめ | 7968 | 15/09/11 19/09/25 | 402 190 |
| 23 | リアルな眼球を描く。HTMLとCSSだけで。 | ichimonji_haji | 19/07/29 19/07/29 | 1309 1309 |
| 24 | フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話 | p1ass | 18/10/11 19/10/19 | 898 194 |
| 25 | 【CSS3】Transition（変化）関連のまとめ | 7968 | 15/09/11 19/10/27 | 296 182 |
| 26 | 脱Bootstrapガイド 〜フルスクラッチCSS〜 | hashrock | 15/11/05 18/08/16 | 1346 112 |
| 27 | CSSだけでできるあんなことこんなこと | rana_kualu | 19/07/15 19/07/15 | 1085 1085 |
| 28 | 未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく | hissy | 19/03/24 19/03/28 | 1339 143 |
| 29 | HTML5におけるinput要素のpattern、type属性のおさらい | ka215 | 15/07/14 16/08/30 | 591 108 |
| 30 | Reactのコンポーネントのスタイリングをどうやるか | lightnet328 | 17/12/17 19/10/29 | 304 180 |
| 31 | お前らはまだ、侍エンジニア塾の凄さを知らない | mu_tomoya | 18/10/21 18/10/22 | 1176 81 |
| 32 | フロントエンドのプロ直伝！ CSS余白設定の三原則（＋線の引き方） | yama-t | 19/07/03 19/07/04 | 954 954 |
| 33 | PostCSS まとめ | morishitter | 16/12/31 18/02/27 | 544 111 |
| 34 | Qiitaのマークダウンで色をつける方法[140色] | twipg | 15/12/22 16/11/12 | 335 107 |
| 35 | CSSだけでアスペクト比を固定するテク | ryounagaoka | 15/07/07 15/07/07 | 519 111 |
| 36 | ノンデザイナーでもイケてるLPを作成する方法 | teradonburi | 18/01/03 18/12/24 | 662 148 |
| 37 | HTML,CSSでのwebサイト制作の手順とポイント | terry_6518 | 20/03/23 20/03/26 | 529 529 |
| 38 | 色彩検定１級がオススメする 🎨 配色Webツール５選 | azukisiromochi | 19/07/08 19/08/09 | 907 907 |
| 39 | UIコンポーネントにはマージンをつけるな！絶対にだ！！ | otsukayuhi | 19/08/31 19/09/02 | 799 799 |
| 40 | CSSの基本単位としてremを使うと超絶便利 | butchi_y | 16/02/18 18/08/01 | 272 108 |
| 41 | Visual Studio CodeでHTML作成環境を整える | 84zume | 16/09/13 19/10/26 | 288 108 |
| 42 | 何番目系の便利なCSSまとめ | ituki_b | 14/03/25 18/12/12 | 470 91 |
| 43 | [CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●● | mame_hashbill | 19/08/27 19/08/29 | 848 848 |
| 44 | HTMLとCSSクラスでよく使う命名について | pugiemonn | 14/05/04 18/03/26 | 654 80 |
| 45 | （個人的まとめ）よく使うflexboxの設定 | junara | 16/10/25 18/12/20 | 282 112 |
| 46 | Sassで@mixinを作る時に知っておきたい基礎知識 | nekoneko-wanwan | 15/11/18 16/03/10 | 269 109 |
| 47 | Flexboxレイアウトまとめ | takanorip | 16/07/19 17/12/07 | 421 86 |
| 48 | お手軽なWebサーバーの立て方 | massie_g | 16/01/08 18/07/03 | 298 90 |
| 49 | floatより辛くない「flexbox」でざっくりレイアウト | hashrock | 15/04/27 17/12/06 | 767 51 |
| 50 | BEMを参考にしたCSS設計 | mrd-takahashi | 14/05/26 17/08/25 | 575 86 |
| 51 | CSS設計の基本 | tera_shin | 17/04/04 17/12/16 | 211 116 |
| 52 | 2020年まで使えるfont-familyおすすめゴシック体 | RinoTsuka | 16/08/04 19/12/25 | 540 81 |
| 53 | 最高のモックアップツールかもしれないBootstrap Studio | Yuta_Fujiwara | 18/01/10 18/04/30 | 604 41 |
| 54 | テキストの縦方向の中央揃えについて | Shinji-m | 15/07/24 15/07/30 | 253 81 |
| 55 | 最新のSEO事情！schema.orgで構造化マークアップせよ！ | ryotanatsume | 16/03/07 18/09/06 | 337 62 |
| 56 | CSSでグリッチっぽい表現をやる | SnO2WMaN | 20/02/04 20/02/04 | 444 444 |
| 57 | htmlのid属性とclass属性の命名はハイフンかcamelかsnakeか | itagakishintaro | 15/08/11 18/05/13 | 296 77 |
| 58 | font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する | katsunory | 16/04/23 18/11/18 | 235 77 |
| 59 | CSS3で縦書きにする方法と挙動 | RinoTsuka | 17/03/08 19/07/12 | 268 87 |
| 60 | CSSだけでハロウィン気分の404ページ作った | deren2525 | 18/10/28 19/11/30 | 909 20 |
| 61 | Bootstrap 4を使うならSassを使って3倍幸せになろう | tonkotsuboy_com | 16/04/07 18/05/23 | 334 61 |
| 62 | CSSフレームワーク BULMA チュートリアル① | ochiochi | 17/02/10 17/02/13 | 245 70 |
| 63 | 多様なフォーマットに対応！ドキュメント変換ツールPandocを知ろう | sky_y | 12/12/24 18/09/11 | 1030 57 |
| 64 | SVGを使うときに知っておくといいことをまとめました | manabuyasuda | 19/02/22 19/03/06 | 255 165 |
| 65 | 脱・CSS無法地帯。FLOCSSで指針のある設計を。 | sueshin | 17/07/09 17/07/13 | 218 88 |
| 66 | 横並びCSSプロパティ（inline-block、table-cell、float、Flexbox）のまとめ | watamura | 17/10/28 19/01/21 | 185 102 |
| 67 | CSS3のremとemの違いについて | masarufuruya | 17/11/04 17/11/06 | 173 98 |
| 68 | CSSで「余白」を制してデザイナーに好かれよう | rhirayamaaan | 18/01/05 19/06/02 | 485 99 |
| 69 | 【爆速】HTML + Sass(SCSS)で簡単にレスポンシブ対応のLPを作ろう！ | Y_ASAMOTO | 18/12/03 18/12/19 | 185 120 |
| 70 | 最強のデザインコード抽出/共有/履歴/管理ツール『Avocode』 | ryuta69 | 19/03/16 20/03/13 | 625 89 |
| 71 | そのベンダープレフィックス、いつまでつけてるの？ | amamamaou | 17/03/21 20/01/21 | 264 69 |
| 72 | Apache Benchでサクッと性能テスト | flexfirm | 14/10/22 16/07/21 | 679 45 |
| 73 | CSSのメタ言語Sass(SCSS)、LESSの完全入門 | ritukiii | 15/09/23 15/09/23 | 463 33 |
| 74 | あのサイトで使われている技術を調べる | nightyknite | 17/12/29 20/03/23 | 161 110 |
| 75 | たった一行で重いスクロールが軽快に！will-change属性をつけるだけでFPSが爆上がりするという話。 | ttiger55 | 19/01/19 20/01/30 | 599 48 |
| 76 | 削除済(ID:760efba180ec526903db) | kk6 | 15/10/28 17/02/13 | 214 80 |
| 77 | HTML5でのSVGファイル操作のおさらい | ka215 | 15/01/08 19/04/05 | 450 57 |
| 78 | こうすれば理解できるBootstrap 4のレスポンシブWebデザインとそのCSS | tonkotsuboy_com | 16/04/14 18/10/05 | 294 54 |
| 79 | VS Code でEmmet使ったらHTML書くの速くなった～‼ | tedkuma | 18/09/21 18/09/25 | 144 113 |
| 80 | iOSでinputのフォーカス時に画面がズームするのを防ぐ | skwbr | 15/07/09 17/04/18 | 199 58 |
| 81 | CSSアニメーションを使いこなすために知っておきたい5つのこと | nekoneko-wanwan | 16/01/28 16/02/19 | 276 65 |
| 82 | Sassで色を調整する | hrdaya | 15/10/18 17/07/11 | 160 58 |
| 83 | SCSSの変数と、CSS3のcalc()を併用するには | mtmtkzm | 16/06/20 19/02/07 | 160 58 |
| 84 | ワイ「ありゃ、SCSSの親セレクタが効かへんで？」について | Yametaro | 19/06/01 19/06/02 | 470 470 |
| 85 | font-familyについて本気で考えてみた | RinoTsuka | 19/12/22 20/03/07 | 299 299 |
| 86 | HTMLとCSSでカレーライスを作った | tsugu_maru_san | 19/12/15 19/12/16 | 439 439 |
| 87 | SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ！！ | taiyop | 14/12/29 15/01/07 | 1758 15 |
| 88 | もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... | ryosukemaehira | 17/11/20 18/01/09 | 864 29 |
| 89 | 【2017年度版】Webエンジニアでも最低限押さえておきたい、SEO施策のまとめと実装 | rorensu2236 | 17/04/24 18/06/06 | 688 27 |
| 90 | FLOCSSを使ったCSS設計での悩みどころと解決案 | uggds | 18/04/15 18/07/19 | 177 74 |
| 91 | SCSSの基本的な書き方 | nchhujimiyama | 18/09/21 20/02/15 | 108 100 |
| 92 | エンジニアが知っておきたいフォントについてのお話 | megumu-u | 19/06/23 19/06/25 | 457 457 |
| 93 | CSSとSassのコーディングスタイルガイドを作ってみた | manabuyasuda | 15/11/14 16/01/13 | 298 49 |
| 94 | 知っておく価値のある珍しいHTMLタグ | rana_kualu | 19/06/03 19/06/04 | 450 450 |
| 95 | HTML + CSSでリアルな目玉焼きを作る | nishihara_zari | 19/10/08 20/03/26 | 428 428 |
| 96 | HTML5のお勉強 articleとsectionとか | piotzkhider | 14/07/31 15/10/26 | 353 36 |
| 97 | 治安の良いCSSを目指して 〜 平和な世界のために僕たちができること 〜 | otsuky | 19/12/22 19/12/24 | 348 348 |
| 98 | 【初心者向け】Sassをいい感じに活用する | cotolier_risa | 16/12/24 18/02/14 | 112 59 |
| 99 | [CSS設計] 私のためのFLOCSSまとめ | super-mana-chan | 19/08/06 19/08/09 | 182 182 |
| 100 | フロントエンドの命名や設計の基本と自分の現在の設計 | buchiya4th | 18/07/22 18/11/30 | 341 54 |
1行目が総数。2行目が直近1年。 ↩
ページ容量を増やさないために、不具合報告やコメントは、説明記事に記載いただけると助かります。
※ JavaScript等のタグが付与されている記事は除いています。
【JavaScript関連】【短期】Qiitaの今読んでおくべき記事１００選【毎日自動更新】を参照してください。
| 順位 | 記事名 ________________________________________ | ユーザ | 投稿日付 更新日付 | LGTM1 |
|---|---|---|---|---|
| 1 | CSSのクラス名を決めるときに使うリストをつくりました | manabuyasuda | 16/10/07 18/09/05 | 2307 205 |
| 2 | CSS(SCSS) で作るペルソナ5 風メッセージウィンドウ | dd0125 | 20/02/29 20/03/01 | 1149 1149 |
| 3 | なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 | mikimhk | 19/12/15 19/12/17 | 1636 147 |
| 4 | CSS Grid Layout を極める！（基礎編） | kura07 | 17/04/13 20/02/25 | 1459 134 |
| 5 | CSSアニメーション 入門 | soarflat | 16/08/18 20/01/13 | 1166 96 |
| 6 | エンジニアでも知っておきたいデザインの基礎知識 | laineus | 19/10/05 19/10/05 | 1594 17 |
| 7 | 【CSS3】@keyframes と animation 関連のまとめ | 7968 | 17/06/28 19/11/21 | 773 89 |
| 8 | HTML,CSSでのwebサイト制作の手順とポイント | terry_6518 | 20/03/23 20/03/26 | 529 529 |
| 9 | GETとPOSTの違いについて | kanataxa | 17/04/07 20/02/06 | 587 79 |
| 10 | エンジニアが知っておきたい色についてのお話 | megumu-u | 19/06/17 19/08/14 | 1355 9 |
| 11 | CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分 | 39_isao | 16/07/04 18/05/08 | 837 71 |
| 12 | Googleフォームを自在にカスタマイズする | curioussafuta | 18/01/30 20/02/27 | 434 93 |
| 13 | ブラウザ君「ワイはCSSのセレクタを右から読むんや」 | Yametaro | 19/06/04 20/01/25 | 1164 33 |
| 14 | リアルな眼球を描く。HTMLとCSSだけで。 | ichimonji_haji | 19/07/29 19/07/29 | 1309 6 |
| 15 | CSSで中央寄せの方法いろいろメモ | KAMEch | 15/10/07 19/06/24 | 780 46 |
| 16 | フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話 | p1ass | 18/10/11 19/10/19 | 898 52 |
| 17 | CSSでグリッチっぽい表現をやる | SnO2WMaN | 20/02/04 20/02/04 | 444 444 |
| 18 | CSSだけでできるあんなことこんなこと | rana_kualu | 19/07/15 19/07/15 | 1085 13 |
| 19 | これからはcssはSassで書こう。 | m0nch1 | 17/07/25 18/08/08 | 569 29 |
| 20 | もう逃げない。HTMLのviewportをちゃんと理解する | ryounagaoka | 15/06/10 18/10/01 | 2678 0 |
| 21 | 早く・それなりの UI を実現する React コンポーネントセット 16 選 | kyrieleison | 16/07/10 18/06/15 | 1783 51 |
| 22 | CSS Grid Layout を極める！（場面別編） | kura07 | 17/04/17 19/09/16 | 541 46 |
| 23 | フロントエンドのプロ直伝！ CSS余白設定の三原則（＋線の引き方） | yama-t | 19/07/03 19/07/04 | 954 18 |
| 24 | flexboxのバグに立ち向かう（flexboxバグまとめ） | hashrock | 16/08/14 17/10/10 | 1265 44 |
| 25 | 【爆速】HTML5 + CSS3で簡単にWebデザインしよう！ | Y_ASAMOTO | 16/05/10 18/12/08 | 525 50 |
| 26 | Bootstrapのグリッドシステムについてまとめてみた | akatsuki174 | 16/01/05 16/01/06 | 575 40 |
| 27 | Reactのコンポーネントのスタイリングをどうやるか | lightnet328 | 17/12/17 19/10/29 | 304 55 |
| 28 | 未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく | hissy | 19/03/24 19/03/28 | 1339 18 |
| 29 | UIコンポーネントにはマージンをつけるな！絶対にだ！！ | otsukayuhi | 19/08/31 19/09/02 | 799 5 |
| 30 | 【CSS3】Transform（変形）関連のまとめ | 7968 | 15/09/11 19/09/25 | 402 34 |
| 31 | 【CSS3】Transition（変化）関連のまとめ | 7968 | 15/09/11 19/10/27 | 296 52 |
| 32 | 色彩検定１級がオススメする 🎨 配色Webツール５選 | azukisiromochi | 19/07/08 19/08/09 | 907 9 |
| 33 | お前らはまだ、侍エンジニア塾の凄さを知らない | mu_tomoya | 18/10/21 18/10/22 | 1176 28 |
| 34 | [CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●● | mame_hashbill | 19/08/27 19/08/29 | 848 10 |
| 35 | font-familyについて本気で考えてみた | RinoTsuka | 19/12/22 20/03/07 | 299 46 |
| 36 | ノンデザイナーでもイケてるLPを作成する方法 | teradonburi | 18/01/03 18/12/24 | 662 18 |
| 37 | 脱Bootstrapガイド 〜フルスクラッチCSS〜 | hashrock | 15/11/05 18/08/16 | 1346 23 |
| 38 | こんなHTMLとCSSのコーディング規約で書きたい | pugiemonn | 14/07/08 19/09/20 | 1380 0 |
| 39 | IE11のサポートを切ると使えるようになるCSSとか一覧 | tsuka-rinorino | 20/03/12 20/04/06 | 137 137 |
| 40 | 治安の良いCSSを目指して 〜 平和な世界のために僕たちができること 〜 | otsuky | 19/12/22 19/12/24 | 348 8 |
| 41 | PostCSS まとめ | morishitter | 16/12/31 18/02/27 | 544 20 |
| 42 | HTML5におけるinput要素のpattern、type属性のおさらい | ka215 | 15/07/14 16/08/30 | 591 21 |
| 43 | Visual Studio CodeでHTML作成環境を整える | 84zume | 16/09/13 19/10/26 | 288 36 |
| 44 | SVGを使うときに知っておくといいことをまとめました | manabuyasuda | 19/02/22 19/03/06 | 255 35 |
| 45 | CSSだけでアスペクト比を固定するテク | ryounagaoka | 15/07/07 15/07/07 | 519 37 |
| 46 | HTMLとCSSでカレーライスを作った | tsugu_maru_san | 19/12/15 19/12/16 | 439 7 |
| 47 | 【爆速】HTML + Sass(SCSS)で簡単にレスポンシブ対応のLPを作ろう！ | Y_ASAMOTO | 18/12/03 18/12/19 | 185 42 |
| 48 | Qiitaのマークダウンで色をつける方法[140色] | twipg | 15/12/22 16/11/12 | 335 22 |
| 49 | CSSの基本単位としてremを使うと超絶便利 | butchi_y | 16/02/18 18/08/01 | 272 31 |
| 50 | CSS設計の基本 | tera_shin | 17/04/04 17/12/16 | 211 32 |
| 51 | （個人的まとめ）よく使うflexboxの設定 | junara | 16/10/25 18/12/20 | 282 24 |
| 52 | Sassで@mixinを作る時に知っておきたい基礎知識 | nekoneko-wanwan | 15/11/18 16/03/10 | 269 23 |
| 53 | [CSS設計] 私のためのFLOCSSまとめ | super-mana-chan | 19/08/06 19/08/09 | 182 49 |
| 54 | HTML + CSSでリアルなチョコレートを作る | nishihara_zari | 20/02/13 20/03/26 | 220 220 |
| 55 | CSSだけでハロウィン気分の404ページ作った | deren2525 | 18/10/28 19/11/30 | 909 7 |
| 56 | 2020年まで使えるfont-familyおすすめゴシック体 | RinoTsuka | 16/08/04 19/12/25 | 540 32 |
| 57 | Flexboxレイアウトまとめ | takanorip | 16/07/19 17/12/07 | 421 24 |
| 58 | HTML + CSSでリアルな目玉焼きを作る | nishihara_zari | 19/10/08 20/03/26 | 428 4 |
| 59 | お手軽なWebサーバーの立て方 | massie_g | 16/01/08 18/07/03 | 298 18 |
| 60 | VS Code でEmmet使ったらHTML書くの速くなった～‼ | tedkuma | 18/09/21 18/09/25 | 144 32 |
| 61 | SCSSの基本的な書き方 | nchhujimiyama | 18/09/21 20/02/15 | 108 35 |
| 62 | CSS3のremとemの違いについて | masarufuruya | 17/11/04 17/11/06 | 173 25 |
| 63 | 【これからScssを使う人へ】Scssの使い方と便利さをさらっと紹介するぞ | mame_hashbill | 19/11/05 19/11/05 | 281 11 |
| 64 | 最強のデザインコード抽出/共有/履歴/管理ツール『Avocode』 | ryuta69 | 19/03/16 20/03/13 | 625 9 |
| 65 | Webフロントエンドエンジニアにやさしいデザインファイルの作り方 | jagaapple | 20/02/12 20/02/12 | 218 218 |
| 66 | CSS3で縦書きにする方法と挙動 | RinoTsuka | 17/03/08 19/07/12 | 268 22 |
| 67 | ワイ「ありゃ、SCSSの親セレクタが効かへんで？」について | Yametaro | 19/06/01 19/06/02 | 470 6 |
| 68 | 横並びCSSプロパティ（inline-block、table-cell、float、Flexbox）のまとめ | watamura | 17/10/28 19/01/21 | 185 16 |
| 69 | 10分でわかる構造化マークアップ | yuzuru_xa | 19/10/13 19/10/14 | 298 6 |
| 70 | あのサイトで使われている技術を調べる | nightyknite | 17/12/29 20/03/23 | 161 17 |
| 71 | エンジニアが知っておきたいフォントについてのお話 | megumu-u | 19/06/23 19/06/25 | 457 4 |
| 72 | たった一行で重いスクロールが軽快に！will-change属性をつけるだけでFPSが爆上がりするという話。 | ttiger55 | 19/01/19 20/01/30 | 599 9 |
| 73 | テキストの縦方向の中央揃えについて | Shinji-m | 15/07/24 15/07/30 | 253 21 |
| 74 | CSSで「余白」を制してデザイナーに好かれよう | rhirayamaaan | 18/01/05 19/06/02 | 485 6 |
| 75 | 脱・CSS無法地帯。FLOCSSで指針のある設計を。 | sueshin | 17/07/09 17/07/13 | 218 10 |
| 76 | font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する | katsunory | 16/04/23 18/11/18 | 235 16 |
| 77 | htmlのid属性とclass属性の命名はハイフンかcamelかsnakeか | itagakishintaro | 15/08/11 18/05/13 | 296 21 |
| 78 | そのベンダープレフィックス、いつまでつけてるの？ | amamamaou | 17/03/21 20/01/21 | 264 23 |
| 79 | 最高のモックアップツールかもしれないBootstrap Studio | Yuta_Fujiwara | 18/01/10 18/04/30 | 604 8 |
| 80 | 知っておく価値のある珍しいHTMLタグ | rana_kualu | 19/06/03 19/06/04 | 450 1 |
| 81 | CSSフレームワーク BULMA チュートリアル① | ochiochi | 17/02/10 17/02/13 | 245 9 |
| 82 | CSSぴえんチャレンジ | ksuzu | 20/02/11 20/02/15 | 198 198 |
| 83 | FLOCSSを使ったCSS設計での悩みどころと解決案 | uggds | 18/04/15 18/07/19 | 177 17 |
| 84 | 何番目系の便利なCSSまとめ | ituki_b | 14/03/25 18/12/12 | 470 0 |
| 85 | 最新のSEO事情！schema.orgで構造化マークアップせよ！ | ryotanatsume | 16/03/07 18/09/06 | 337 12 |
| 86 | Bootstrap 4を使うならSassを使って3倍幸せになろう | tonkotsuboy_com | 16/04/07 18/05/23 | 334 12 |
| 87 | 失敗しづらいUIへのアプローチ | megumu-u | 19/08/04 19/09/05 | 374 2 |
| 88 | HTMLとCSSクラスでよく使う命名について | pugiemonn | 14/05/04 18/03/26 | 654 0 |
| 89 | メニューじゃないハンバーガーを作れるCSSをつくった。 | super-mana-chan | 19/10/01 19/10/01 | 452 2 |
| 90 | [CSSアニメーション]三(卍^o^)卍←こいつのこれ→卍を回したい | mame_hashbill | 19/09/04 19/09/05 | 433 1 |
| 91 | CSSフレームワークのススメ - BULMAの導入と覚え書き | belq | 19/06/01 19/12/23 | 66 38 |
| 92 | 削除済(ID:760efba180ec526903db) | kk6 | 15/10/28 17/02/13 | 214 21 |
| 93 | 【React Native】よく使うスタイル実装まとめ【StyleSheet】 | nitaking | 18/08/13 20/03/22 | 110 19 |
| 94 | CSSのposition: stickyでテーブルのヘッダー行・列を固定する | orangain | 19/01/12 19/01/12 | 88 27 |
| 95 | GitHubのポップアップメニューはdetailsタグと:beforeが使われててクレバーだった | zackey2 | 19/11/29 19/11/30 | 223 2 |
| 96 | フロントエンドの命名や設計の基本と自分の現在の設計 | buchiya4th | 18/07/22 18/11/30 | 341 8 |
| 97 | BEMを参考にしたCSS設計 | mrd-takahashi | 14/05/26 17/08/25 | 575 0 |
| 98 | CSSだけで球体！？錯視トリックで世界を騙せ | YusukeNakaya | 19/12/13 19/12/13 | 191 2 |
| 99 | 【Bootstrap 4】navbar の一部の nav-item を右寄せに | hmmrjn | 18/07/04 18/08/25 | 124 18 |
| 100 | floatより辛くない「flexbox」でざっくりレイアウト | hashrock | 15/04/27 17/12/06 | 767 0 |
1行目が総数。2行目が直近3ヵ月。 ↩
要素をスクロールさせる時の高さを可変にする方法です。
Flexboxを使うことで高さを固定値で指定せず、レスポンシブ対応のレイアウトにできたのでざっくりですが方法を書いていきます。
まずはやりたいことの基盤となるスクロールの実装を書きます。
要素のスクロール自体はこのcssでできるはず。
.box-scroll{height:80px;overflow:scroll;}しかし、これだと要素の高さをが固定値（px指定）のため、ブラウザを縮小させると要素が隠れて見えなくなります。
レスポンシブ対応（ブラウザを縮小させても要素全部が見える状態）にしたい場合は、Flexboxを使うことで高さを固定せずに要素のスクロールができます。
Flexboxを使って縦並びのレイアウトにする。
このとき、親要素の高さをheight: 100vh;、子要素にflex: 1;とすることで各要素の高さが均等に画面いっぱいに広がる。
<divclass="flex-box"> <divclass="box">1</div> <divclass="box">2</div> <divclass="box">3</div></div>.flex-box{display:flex;flex-direction:column;height:100vh;>.box{flex:1;}}装飾などのコードは省いていますが、レイアウトは下の画像のようになります。
先ほどと同じ、１画面でブラウザのスクロールをしないイメージのレイアウトです。
２つの要素があり、下の要素がスクロールできるようになっています。
See the Pen LYVoMzE by mnk (@mnk_o7) on CodePen.
Flexboxを使って親要素の高さを指定するだけで子要素の高さが決まります。
なので、スクロールしたい要素の高さを計算したりして指定する..と言った手前がなくて楽かと思います。
実際にこの方法でコーディングする機会があり、便利だなと感じたので書いてみましたが、はじめての投稿でグダグダ、かつ説明不足な部分が多いと思います..
ほかに良さげな方法、ご指摘などあればいただけると嬉しいです。
CSSで左側に画像、右側にテキストのブロックをフロートで横並びに配置して、画像のキャプションのテキストを右下に下揃えで表示したい(下図）。簡単にできそうですが、意外な落とし穴があったので解決策のメモです。
画像出典: Lorem Picsum Images from Unsplash
まずは失敗例から。画像、右側の本文およびキャプションの３つをそれぞれブロック要素で囲んでdiv.boxに入れてみました。キャプションの要素p.captionをposition使って、div.boxを基準にbottom/leftで絶対位置指定してやれば実現できそうです（下図）。
HTML（要点のみ）
<divclass="content"><divclass="box"><divclass="pic"><imgsrc="https://picsum.photos/id/1059/300/400"alt=""></div><divclass="col-txt"><p>情に棹させば流される。...（略）</p></div><pclass="caption">Lorem ipsum dolor sit amet, ...（略）</p></div></div>
CSS（要点のみ）
.content{width:800px;margin:20pxauto0;}.box{overflow:hidden;position:relative;}.pic{float:left;width:28%;}.picimg{width:100%;height:auto;vertical-align:bottom;}.col-txt{float:right;width:70%}.caption{font-size:0.8rem;line-height:1.2;position:absolute;bottom:0;left:30%;}
なんだ簡単！？ では、この画面でブラウザの文字サイズを大きくしていったら何が起きるでしょうか？ 画面のズームではないです。文字だけの拡大です。Firefoxの場合、メニューの「表示／ズーム／文字サイズの変更」を有効にすれば文字だけ拡大できます。
Command+「+」を打ちながら文字を300%まで拡大してみると…
ご覧のように、文字サイズを170%以上にすると、上側の本文テキストが“侵食”してきてキャプションの表示に重なってしまいました。これは、position: absoluteを使って配置した要素は通常のフローから外れるため、本文テキスト側はこの要素が存在しないかのように配置されるので発生します。
ちなみに、ウェブアクセシビリティに関するJIS-X8341-3:2010「7.1.4.4 テキストのサイズ変更に関する達成基準 (等級AA)」1によると、テキスト拡大200%までは他のコンテンツと重ならないようにサイズ変更できることを要求しています。
position: absoluteを使わない方法を考えてみましょう。
まず、要素の構成を変えます。p.captionをdiv.boxの外側に出して兄弟要素にします（サンプルでは共通の親はdiv.content）。そして、margin-leftで画像の幅だけ右に寄せて、margin-topにキャプションの行数分の高さのネガティブマージンを指定してテキストの位置を引き上げることで、画像と下揃えにできます（下図）。
HTML（要点のみ）
<divclass="content"><divclass="box"><divclass="pic"><imgsrc="（略）"alt=""></div><divclass="col-txt"><p>情に棹させば流される。智に働けば角が立つ。...（略）</p></div></div><!-- div.boxの外側にp.captionを移動 --><pclass="caption">Lorem ipsum dolor sit amet, ...（略）</p></div>
CSS（要点のみ）
.content{/* 変更なし */}.box{overflow:hidden;}.pic{/* 変更なし */}.picimg{/* 変更なし */}.col-txt{/* 変更なし */}.col-txtp{padding-bottom:calc(3*1.2*0.8rem);/* 追加 */}.caption{font-size:0.8rem;line-height:1.2;margin-left:30%;/* 追加 */margin-top:calc(-2*1.2*0.8rem);/* 追加 */}
ネガティブマージンの量は、計算式
（キャプションの行数）×（line-height）×（font-size）
で見積もれます。本サンプルでは、キャプションのテキストが２行（ブラウザで文字サイズを変更していない場合）になるという前提で、以下のプロパティを設定しています。
.caption{margin-top:calc(-2*1.2*0.8rem);}下図はp.captionのコンテント（背景色 ライトブルー）に関して、元の位置から最終的な表示位置までの動きを示したアニメーションです。ラッパーdiv.contentの境界を赤い線で示しました。
p.captionを通常フローに置いたことにより、文字拡大時の振る舞いは次のようになります。
div.boxに食い込んだ状態でページの下側に伸びていくdiv.boxの高さが増えると、p.captionのボックスもページの下側に流れていくp.captionの領域が本文テキストと重なる可能性が残るのは、div.boxに食い込んだ２行分の高さ残る課題は上記3への対応ですが、position: absoluteのときと違って、食い込みの高さが２行分に抑えられることがポイントです。そこで、本文テキストのp要素の下側にpaddingを少なくとも3行分入れてやれば、それがのりしろとなって、p.captionから食い込んだ２行を吸収できます。つまり、paddingの量は余白１行を考慮すると、計算式
（キャプションの行数 + 1）×（line-height）×（font-size）
で見積もれます。本サンプルでは以下のように設定しました（上図で背景色が黄色い領域）。
.col-txtp{/* 本文テキスト */padding-bottom:calc(3*1.2*0.8rem);}本文テキストが複数のp要素から成る場合は、(1) 最後のp要素にpaddingを設定する、もしくは(2) div.boxの右側float要素に擬似要素で３行分の高さを埋め込む、などの方法で対応できます。
.col-txtp:last-child{/* 最後のp要素にpadding */padding-bottom:calc(3*1.2*0.8rem);}.col-txt:after{/* float要素の後ろに空のブロックを追加 */display:block;content:"";height:calc(3*1.2*0.8rem);}以上の対策を施した上で、ブラウザで文字サイズを300%まで拡大してみましょう（下図）。
文字サイズ170%の所で、上側から下りてきた黄色ののりしろがライトブルーの領域に重なり、ライトグリーンで示した領域に２行分のテキストが吸収されたのがわかります。以降、テキストを拡大してもキャプションが下へ押しやられるだけで、テキストの重なりは発生しません。
本記事のサンプルコードはこちら： https://codepen.io/kaz_hashimoto/pen/gOaOXKj