20211014のCSSに関する記事は5件です。

CSS Grid Layout

グリッドレイアウト このレイアウトをGrid Layoutで作ってみました。 HTMLはこんな感じです。 HTML <div class="content"> <h2>タイトル</h2> <p>テキストテキストテキストテキストテキスト</p> <img src="img/img.png" alt=""> <button>ボタン</button> </div> <!-- スマホ表示時はボタンを一番下にしたい為、この書き方にしました。 --> CSSはこちら CSS .content{ width: 1200px; height: 900px; display: grid; grid-template-rows: 1fr 1fr 1fr 3fr; grid-template-columns: 400px 1fr; } img{ grid-row: 1 / 5; grid-column: 2 / 4; } 説明しやすいようにwidthを1200px、heightを900pxで指定しました。 grid-template-rows: 1fr 1fr 1fr 1fr; こちらは行を4つ作っています。プロパティの中の値の数だけ行を作ります。 frは何分割するかを指定する単位で、値を"1fr 1fr 1fr 3fr"にしている為合計して6分割している事になります。 高さが900pxで、ここでは1frは1/6、3frは1/2という事なので 150px 150px 150px 450pxに行が区切られます。 grid-template-columns: 400px 1fr; こちらは列を2列に分けて、400pxと1fr(800px)に分けています。 図で表すとこんなイメージ CSS img{ grid-row: 1 / 5; grid-column: 2 / 4; } 今回は画像だけ位置の指定をしています。 "grid-row"で何行から何行まで配置するか指定できます。"1 / 5"でRowのグリッド線(ピンク色の線)の1本目から5本目まで指定。 "grid-column"では何列から何列か指定。"2 / 4"でColumnのグリッド線(青色の線)の2本目から4本目まで指定。 こんな感じに配置されます。 先程のHTMLに当てはめるとこんな感じ CSS @media screen and (max-width : 768px) { .content{ display: block; } } これで"display:grid;"が解除され こんな感じでレスポンシブ対応ができました。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML&CSS_01 【RESTART】

HTML&CSS_01 今回のテーマは「progate」の「HTML&CSS初級編」を使って作れたものについて ※学習サイクルの詳細について知りたい方は前記事を参照ください フェーズ1_学習 「progate」「HTML&CSS初級編」を学習 フェーズ2_記録 テキストファイル化し以下のコードに手記入でメモ書き HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <div class="header"> <div class="header-logo">Sample</div> <div class="header-list"> <ul> <li>Contents_01</li> <li>Contents_02</li> <li>Contents_03</li> </ul> </div> </div> <div class="main"> <div class="copy-container"> <h1>サンプルページへようこそ<span>!</span></h1> /* span や a はインライン要素の為、改行が行われない*/ <h2>色々なページのベースとして使う予定です</h2> </div> <div class="contents"> <h3 class="section-title">画像イメージ一覧</h3> <div class="contents-item"> <img src="https://pbs.twimg.com/profile_images/1421736526812041217/NYH8RA2G_400x400.jpg"> <p>img_01</p> </div> <div class="contents-item"> <img src="https://1.bp.blogspot.com/-mjkfErtfCTU/XXXObIPmwBI/AAAAAAABUto/0dQq-cQ5v64RR0IWbDgdlc10CgK2Or0jACLcBGAs/s1600/cat_wink_gray.png"> <p>img_02</p> </div> <div class="contents-item"> <img src="http://4.bp.blogspot.com/-1865joK51EI/Wb8gnbhjDpI/AAAAAAABGy4/ByWIh6Zt-hM-CCEzYWBxcuTJOOWz26kYwCLcBGAs/s800/pet_omocha_neko.png"> <p>img_03</p> </div> </div> <div class="contact-form"> <h3 class="section-title">お問い合わせ</h3> <p>メールアドレス(必須)</p> <input> <p>お問い合わせ内容(必須)</p> <textarea></textarea> <p>※必須内容は必ずご入力ください</p> <input class="contact-submit" type="submit" value="送信"> </div> </div> <div class="footer"> <div class="footer-logo">Sample</div> <div class="footer-list"> <ul> <li>サンプル内容</li> <li>サンプル画像引用先</li> <li>お問い合わせ</li> </ul> </div> </div> </body> </html> CSS body { /*タグ指定*/ font-family: "Meiryo UI"; /*フォント名*/ } li { list-style: none; /*リストの点消し*/ } .header { /*クラス指定*/ background-color: #26d0c9; /*背景色*/ color: #fff; /*文字色*/ height: 90px; /*縦のサイズ*/ } .header-logo { float: left; /*寄せ(左寄せ)*/ font-size: 36px; /*文字サイズ*/ padding: 20px 40px; /*パディング(ボックスの内側の余白)*/ } .header-list li { /*クラス内のタグ指定*/ float: left; font-size: 33px 20px; } .main { padding: 100px 80px; } .copy-container h1 { font-size: 100px; } .copy-container h2 { font-size: 50px; } .copy-container span { color: red; } .contents { height: 500px; margin-top: 100px; /*マージン(ボックスの外側の余白)*/ } .section-title { border-bottom: 2px solid #dee7ec; /*罫線*/ font-size: 28px; padding-bottom: 15px; margin-bottom: 50px; } .contents-item { float: left; margin-right: 40px; } img { width: 250px; /*横の幅(画像も自動で調整される模様)*/ } .contents-item p { font-size: 24px; margin-top: 30px; } .contact-form { margin-top: 100px; } input, textarea { /*タグ複数指定*/ width: 800px; margin: 10px 0 30px 0; padding: 20px; font-size: 18px; border: 1px solid #dee7ec; } .contact-submit { background-color: #dee7ec; color: #889eab; } .footer { background-color: #2f5167; color: #fff; height: 120px; padding: 40px; } .footer-logo { float: left; font-size: 32px; } .footer-list { float: right; } .footer-list li { padding-bottom: 20px; } メモ書き HTML ・span a はインライン要素の為、改行されない CSS ・font-famiry フォント名 ・list-style: none; リストの点消し フェーズ3_実践 「codepen」を使って実際にページ作成 メモ書きを行ったテキストファイルを使用する ※「0.25x」推奨 See the Pen サンプルページ by yuta-proto-biz (@yuta-proto-biz) on CodePen. フェーズ4_発信 この記事自体が「フェーズ4_発信」であるのでこの欄は「所感」とします 「フェーズ2_記録」にてテキスト出力し、メモ書きを行ったことで 理解が深まると共に「フェーズ3_実践」を行う際の「設計図」になりました 格段に作成がしやすくなったと感じます 過去記事へのリンク
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

プログラミングスクールの講師を2年間続けて限界が来て辞めた話

はじめに 某プログラミングスクールで二年間講師をしてました。 受講生の方からの評価点は平均より高く、最終的には全インストラクターの中から代表に選ばれる立場にまでなりました。 始めた経緯 もともと、プログラミングスクールをいつか開きたいと思っていたこともあり、業務委託契約で経験が積めそうなところに応募。 即採用していただき、正社員で働く傍、副業としてプログラミング講師に。 エンジニア歴は当時は5年 得意な言語はPHPのみでした。 コロナ禍で全てが変わった 特定を避ける為に細かな時期は記述しませんが、この復業を始めてから今も尚世界を苦しめているウイルスの流行で事が大きく変貌していきました。 というのも、私が請け負っていたプログラミングスクールでは生徒様が作成したいと言う物をベースにプログラミングを教えるスクールでした。 その中で、コロナ禍前までの生徒様達は明確に、 「ECサイトが作りたい」 「勤怠管理アプリを作りたい」 「ポートフォリオを作って、簡単な案件に挑戦できるようになりたい」 …etc のような明確としたゴールがありました。 私はその手助けをしたり、一緒に悩んだりしながらも最終的に生徒様達がプログラミングをやってよかったと言いながら旅立っていく姿が大好きでした。 違和感を感じ始めた1年前 コロナ禍でリモートワークが進み、働き方に変化が出てきた頃、ありがたい事にエンジニアという職種は一気に市民権を得た気がします。 また、将来性がなくなるような仕事も目に見えて増え、緊急事態宣言などの影響で時間が余ったという人たちが急増しました。 そんな人達を、引き入れようと当時は様々なプログラミングスクールが広告をバンバン打ち出し始めます。 「誰でもできる!」 「好きな時間に働ける!」 「高単価、高時給!」 「業界内〇〇%リモートワーク」 「この先伸びる仕事No.1!!」 はい、詐欺の広告かなんかですね。 上記のクソ広告のせいで、請け負わせて頂く生徒様のプログラミングを学ぶ理由が上記で記述した「明確な目標」から「稼ぐ手段」に変わりました。 昨日までパソコンのパの字も知らなかった人がプログラミングをする為に初めてパソコンを買い、初めて使ってみましたというレベルの方が激増することになりました。 すると、どうでしょうか 「ローマ字ってなんですか?」 「アプリってどうやって入れるんですか?」 「Zoomの使い方がわかりません。」 「インストールってなんですか?」 「携帯でプログラミングできないんですか?」 「持ってるパソコンが200x年のやつなんですけど大丈夫ですか?」 など、とてもじゃないが今からプログラミングをしようとするには思えない人たちが集まってきました。 もちろん稼げると言われる仕事があって、新しいことに挑戦している人を否定するわけではありませんし、たくさん稼ごうと思うのは悪いことではありません。 ただ、プログラミングに至っては地道な努力があってこそ稼げる物であり、何週間か勉強したからといってすぐにできる仕事ではないと感じています。 エンジニアになって一般的に稼げるのはある程度、現場を踏んで知見がついた段階でフリーとして独立した際に単価が上がるという仕組みだと思います。 会社員でバリバリとウン千万と稼いでる人はおそらく数える程しかいないんじゃないでしょうか。 それにプログラミングスクールって凄く割高ですよね。 高いが故に、お金を払えばできるようになるって思われがちなスクールの一つだと思っています。 そうです、コロナ禍になって増えた客層というのは「ジムと契約したらムキムキになれる」と思っている人達なんです。 私が実際に教えれるのは、週に1回1時間のみ ほかの時間は自分で学習をしてもらわないことには何も進められません。 ですが宿題を出しても、ほとんどの方が仕事が忙しいとの理由で進めませんし手もつけてくれません。 ですので、結果として卒業する頃には本当にちょっとだけHTMLとCSSを使ってサイトを作れるだけの人が出来上がります。 私としては「もったいないなぁ」と思い、受講生からすると「こんなにも払ったのにここまでしかできるようにならなかった!」とクレームです。 また、学習を進めてても調べ方が分からないのでエラーが出るたびに「答えを教えてください!」「なんかできません」「答えを教えてくれません」とクレームです。 他にも様々なクレームがありましたが面白すぎて書ききれません。 そして気づいた頃には、講義の日は絶対に体調を崩すようになり、急性ストレス性胃腸炎になりました。 エンジニアってわからないことに対してワクワクしながら調べて、問題を解決するのが一番楽しく私は続けています。 ですが、彼らにとっては稼ぐ手段の一つとしか見ていないことでしょう。 またどこかで、講師として戻る事はあるかもしれませんが、少なくとも今は一旦離れようと思った話でした。 これからプログラミングをやろうかなと思っている人へ まず、プログラミングという仕事に興味を持ってもらってめっちゃ嬉しいです。 自分のやっている仕事をやってみようかなと思ってくれてありがとうございます。 今、世の中の広告では「独学に限界がある」「個別指導してくれる」 など一人で勉強させないような広告がたくさんあります。 それを真に受けずにまず、自分でできるところまで進めてみてください。 少しお金はかかりますが素敵で様々なサービスがあるのでそちらを使ってみてください。 それでも無理なら、プログラミングスクールという手段も検討してみてもらえれば良いかなと思います。 ただ個人的には、プログラミングスクールにウン十万払うぐらいなら、同じ金額の家電製品買った方が多分人生は豊かになりますよ。 いやほんとに。 私が、今も初学者の時にやってよかったなと思う物を開発系のみになりますが、掲載しておきますのでご参考までに。 Udemy 多分、勉強する上で一番最強。 英語が聞けるなら英語圏の講師の動画も見れるので尚更おすすめ。 レベル別に分けておきます。 じっくり学習したい人におすすめ。 ■初学者向け フロントエンド Udemy HTML+CSS バックエンド Udemy PHP+Mysql HTML、CSS(sass)、JavaScript(jQuery)でサイトの見た目を作成してプログラムはPHPで記述するという 従来の一般的な開発方法です。 特に、PHPはまだまだ採用している企業も多く覚えることも少ない為、PHPを通してバックエンドを覚えると、この先他の言語に行った時も理解を助けてくれると思います。 ■慣れてきた人向け フロントエンド Udemy ReactJs バックエンド Udemy AWS 俗に言うサーバーレスフルスタックJS。 ReactJSと呼ばれるJavascriptのライブラリを使用してまるでアプリのようなWebサイトを構築します。 バックエンド側はAmazonが提供するAmazon Web Service通称AWSを使用します。 一年間は無料利用枠が存在しますが、何も考えずに使ってしまうとお金がかかるので注意してください。 多分この先はこの開発方法がメインになるはず。 Progate Progate home 初学者の時に一番助けてもらいました。 つまづきやすい環境構築などを全て投げ捨てて、ブラウザ完結できる最高のサービス。 月1,000円かかりますが、1ヶ月で全部やり切るぐらいのつもりでやればコスパ最強です。 とりあえずやってみたい方や、短期集中したい方におすすめ。 ドットインストール ドットインストール ホーム 1つ3分程度の動画を見て学ぶサービス。 基本無料で、プレミアプランに登録するとたくさん見れるようになる。 無料だけでも結構深いところまで知れることと、1回の動画が短いので学習の区切りがつけやすくてGood。 お金をかけずにとりあえずやってみたいという人にお勧め。 書籍 ■HTML CSS 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 Web制作者のためのSassの教科書 ■JavaScript スラスラ読める JavaScriptふりがなプログラミング 改訂新版JavaScript本格入門 ■PHP PHP7+MariaDB/MySQLマスターブック PHPフレームワークLaravel入門 ■ReactJs 基礎から学ぶ React/React Hooks ■その他参考になった書籍 いちばんよくわかるWebデザインの基本きちんと入門 ノンデザイナーズ・デザインブック リーダブルコード 現場で困らない! ITエンジニアのための英語リーディング ストレングスファインダー さいごに ここまで読んでくださりありがとうございました。 学習する流れや、自分のやりたいことを実現するためのプロセスなどわからないことあればコメント、メールいずれでも結構ですのご連絡下さい。 10月20日追記 何気なく吐きだめ程度として書いた記事がたくさんの方に読まれていてすごく恐縮です。震えています。 何点かよくいただいたご意見について回答だけ追記しておきます。 入校テストやれば良いのでは? これ、運営に提案したこともありますし結構強く打診しました。 が、実際に入校テストやっているところの業績って悪化していってるんですよね。。。 現実として、生徒様にも「〇〇はテストがあってむずかしかったのでここにしました!」 と言われたこともあります。 そもそも向いてないよね。 ごもっともです。 わからない人の気持ちがわからないと気づきました。 ただ、1点だけ言い訳すると、これが月1万円とかのサービスで失敗しても勉強代と現実的に割り切れる金額ならここまで限界は来ないです。 どんな人が来ても鼻ほじりながら対応します。 受講生の方の中には借金したり、何年間もかけて貯めたお金でという方もいて、そんなに努力できる方が実際に何もわからずに入ってきてしまい挫折してローンだけ残ったりお金だけ失ったりというのに心が追いついていきませんでした。 何度も、私が担当じゃなければよかったのにと考えたこともありました。 ご意見ありがとうございます。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

コードブロックにCSSだけで行番号を表示する

下図のようにコードブロックにCSSで行番号を表示する方法を紹介します。 前提 CSSで行番号を表示するにあたって、コードブロックのHTMLは行が<span>などの要素で表現されている必要があります。 行番号を表示するCSS 行番号を表示するCSSは次のようになります。 .code { counter-reset: line-number; } .code span { counter-increment: line-number; display: list-item; padding-left: 1rem; margin-left: 1rem; } .code span::marker { content: counter(line-number); color: #aaa; } それぞれ重要な箇所を説明します。 まず、.code spanを見てみましょう。 .code span { /* ... */ display: list-item; /* ... */ } このdisplay: list-itemは行要素の<span>を<li>相当にするものです。これにより、行はリストタグになり「・」のようなマーカーが表示されます。 リスト要素のマーカーのスタイルは疑似セレクター::markerで設定できます。リストマーカーのスタイルを指定するのが次のCSSです。 .code span::marker { content: counter(line-number); color: #aaa; } このcontent: counter(line-number)で、リストマーカーを「・」ではなく数字にしています。 デモ 実際の表示のされかたはCodePenのデモを御覧ください。 See the Pen 行番号を表示するCSS by suin (@suin) on CodePen.
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ウェブページは作れませんでした 【RESTART】

ウェブページは作れませんでした(結論) 「progate」にて学習すること約1か月 「Web開発パス(Node.js)」を一通りこなしてみて とりあえず何かウェブページ作ってみるかと思った 結論、どうやって作ればいいのか解らず… 学習プロセスの見直し 「progate」だけ行ってしまうと自分の場合は インプットのみになってしまい、定着しないと反省 そこで以下のようなプロセスの仮説を立てて実行することにした 学習プロセスのフェーズ詳細 フェーズ1_学習 これまでと同じように「progate」のカリキュラムをこなすフェーズ フェーズ2_記録 「progate」で書いたコードをテキストファイル化して印刷、手書きで メモ等を加える(昭和生まれなのでアナログ手法) フェーズ3_実践 手書きメモを加えたテキストファイルを参考にして「Codepen」で作成する フェーズ4_発信 作成プロセスを言語化してQiitaの記事を作成する 人間は楽な方に流れる 計画を立ててプロセスを設定しないと どうしても楽なインプットだけに偏ってしまう それに気付かされた1か月だったと言える 過去記事
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む