20210508のCSSに関する記事は4件です。

【初心者向け】メモ帳でwebサイトを作るとなぜ作りにくいのかを解説

どうも7noteです。メモ帳でwebサイトが作りにくい理由を徹底解説。初心者よ有名エディタを使え! コーディングやプログラミングをする際に必須ともいえるのが「エディタ」。 もちろんメモ帳でもコーディングやプログラミングができますが、エンジニアとして働いている人やyoutubeなどの動画で解説している人たちはそれぞれエディタを使っているのでしょうか? それはメモ帳ではコーディングがしにくいからです。 特に今回はweb制作に焦点を当てて、メモ帳の使いにくさを解説。 なぜメモ帳だとwebサイトを作りにくいのか。 「単色だから識別しにくい」 メモ帳では白背景に黒一色です。(設定でかえれるかもですが。) しかし大概のエディタはHTML要素やCSSに色が付いて識別しやすくなっています。 (他エディタの例) 「不可視文字が見えない」 「(半角スペース)」 「 (全角スペース)」 「(TAB)」 「(改行位置)」 これらの要素が全く見えません。真っ白です。そのため余計なスペースが入っているなどに気づかず表示が崩れてしまい、原因がわからないまますっと悩んでしまうみたいなことになってしまいます。 「拡張ツールが使えない」 インデントも自動で揃わない 好きなようにカスタマイズもできない Emmentで短縮入力できない(「div」のあとにTABキーを押すと<div></div>が自動入力される等) こんなエディタ使えません(泣) メモ帳を卒業したいならこのエディタがオススメ! 好みにもよりますが、様々な調査やTwitterアンケートで人気なのは「Visual Studio Code」ですね。 他のアンケートなんかを見てもほとんど1位は「Visual Studio Code」でした。 いろいろ試してみて、自分なりに納得のいくエディタを使いましょう! 結論 「メモ帳でもweb制作はできる。・・・が、既存の有名ブラウザよりも開発しにくいので開発ストレスがたまるし効率も悪い。」 メモ帳でも開発やweb制作はできます。はじめうちはお試しでメモ帳で作成するところから初めて見るのは全然OKだと個人的には思います。 ただずっとメモ帳で開発し続けている人にはまだあったことがないのでやはり本格的に取り組んでいくのであれば何かしらのエディタは必要になってくると思います。 経験者さんがもし読まれていましたら、オススメのエディタなどぜひコメントください。誰かの助けになるかもしれません。 おそまつ! ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ウルトラ簡単に調整・装飾できてしまうBootstrap

前回の記事でBootstrapの導入について記述したので、 今回は超簡単な使い方に触れます。 題材として新規ユーザー登録画面のフォーム周りに変化を加えていきましょう。 まずは最低限の部品だけ設置します(HTMLのみ) sample.html <h2>新規ユーザー登録</h2> <div><input type="text" name="account" placeholder="アカウント名"></div> <div><input type="text" name="name" placeholder="ユーザー名"></div> <div><input type="password" name="password" placeholder="パスワード"></div> <div><input type="password" name="passwordConfirm" placeholder="パスワード確認"></div> <input type="submit" value="ユーザー新規登録"/> 画面表示させるとこのような形 1.テキスト位置の変更 classに「text-center」を追加します。 sample.html <h2>新規ユーザー登録</h2> <div><input class="text-center" type="text" name="account" placeholder="アカウント名"></div> ~以下略~ これでform内のplaceholderの文字が中心に位置されました。 右詰めでも良い気がしてきました...。その際は「text-right」で、左なら「text-left」で変更できます。 このように一つ掴んでしまえばcssファイルを触らずとも直感的に変更できるのが嬉しいですね。 2.間隔を調整 このままだとそれぞれのフォームにおける役割・制約が明記されていない不親切なもののままですね。 ということでformの下の行に注釈を追加します。 sample.html <div><input class="text-center" type="text" name="account" placeholder="アカウント名"></div> <div>ログインに使うアカウント名です。</div> ~以下略~ 気になる点が一気に増えましたね。順を追って変更を加えますからせっかちな人は少し待ってね。 注釈divにclass「mb-2」を追加します。 sample.html <div><input class="text-center" type="text" name="account" placeholder="アカウント名"></div> <div class="mb-2">ログインに使うアカウント名です。</div> ~以下略~ 画面の薄い橙色の部分が今調整を加えた間隔です。 mb-2を記述しましたが「2」の部分は間隔の大きさを表しますので更に幅が欲しい場合は適宜数字のみ変えるだけです。 「mb」の部分はどこに間隔を与えるか指定してるだけです。cssを書いたことがある人ならすぐピンとくるでしょう。「margin-bottom」の略なので上部は「mt」、右や左は「mr」「ml」で指定できます。 逆に指定なく全周に間隔を与えたければ「m-2」と書けばよいわけです。so easy. 感のいい人ならもうお気づきでしょうがpaddingも同じ要領ですが全く同じように...とは行かないので要注意。今回は省略しますが気になる人は調べてね。 3.文字の大きさを調整 現状だとフォームより注釈のほうが主張が大きくて一体どちらが主役なのかわからないですね。 とりあえずclassに「small」を追加してみましょう。 signup.html <div><input class="text-center" type="text" name="account" placeholder="アカウント名"></div> <div class="mb-2 small ">ログインに使うアカウント名です。</div> ~以下略~ 比較のために新旧を並べてみました。 文字サイズの変更によっていい感じのバランスになってきましたね。 4.登録ボタンの装飾 最初に比べたら最低限の調整はいいような気がします。 がここはせっかくなので動きのあるボタンを実装してみましょう。 送信ボタンのinputにclass「btn btn btn-outline-primary」を追加してみましょう。 signup.html ~送信ボタン以外省略~ <input class="btn btn-outline-primary" type="submit" value="ユーザー新規登録"/> 左が表示させただけで右がボタンにカーソルを合わせた状態です。 「btn」だけだと外線もなければ動きもないものです。 「btn-outline-primary」も組み合わせることで外線・角Rやカーソルをあわせた時の動きが実現されるのです。 他にもbtnだけでも様々な変化が実現できるのでこだわり派の方は是非とも調べてカッチョいいボタン設置してみてください。 以上で簡単なform周りをBootstrapで調整・装飾してみました。form-controlを用いてlabel周りの実装や背景色・文字色などまだまだ触る要素があります。 また、form以外にもnavリンクで便利なものが発見できてワクワクしている私としては、時間が無限にあればいくらでも弄り倒したい魅力があります。 今回は私に近い初学者向けをターゲットとしましたのでいくつか省きました。 さらなる機能や発見があればまた記事にしようかなと思っています。 以上。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSS フレックスレイアウトの基本的かつ実践的な書き方。

画像を正方形に加工した上で、フレックスレイアウトを組んでみる。 対象者 cssの参考書をひととおり読んだ後の人 横並びと縦並びのレイアウトの具体的な作り方を知りたい人  注意 特別な理由がなければchromeをつかって試してください。 やろうとしていること 画像を正方形に加工する 要素を横に三等分きれいに配置する。 画面の横幅が狭くなった時に縦並びに変更する(横並びにする) 完成イメージ(左:全画面表示 右:スマホ表示) 具体的なコード sample/  ├ index.html  ├ main.css  └ images/   └ apple.jpg   └ color.jpg   └ dish.jpg index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sample</title> <link rel="stylesheet" href="./main.css"> </head> <body> <div class="flex-wrapper"> <div class="square1 square"><img src="./images/apple.jpg" alt=""></div> <div class="square2 square"><img src="./images/color.jpg" alt=""></div> <div class="square3 square"><img src="./images/dish.jpg" alt=""></div> </div> </body> </html> 解説 基本的なhtmlの雛形を書いた後に、画像をflex-wrapperクラスでかっこんでいます。画像には後でcssが当てれるようにsquareクラスを付けています。 main.css @charset 'utf-8'; /* ここでcssをリセットしていくよ */ body { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, ul, li { padding: 0; margin: 0; } a { text-decoration: none; } ul, li { list-style: none; } img { display: block; } /* リセットcssはここまでだよ */ /* ここからレイアウト */ .flex-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; } .square { width: calc(100% / 3); } .square img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; } /* 画面幅の750px以下になったときのcss */ @media screen and (max-width:750px) { .square { width: 100%; } .flex-wrapper { flex-direction: column; } } 解説 cssのリセット cssは標準ではブラウザによってデフォルトのcssが当てられています。 そのままにしておくと余分な空白が生まれたり、装飾が施されたりするため、初めにcssをリセットしていきます。 body { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, ul, li { padding: 0; margin: 0; } a { text-decoration: none; } ul, li { list-style: none; } img { display: block; } レイアウト ここでは重要なプロパティを解説していきます .flex-wrapper ここで要素を横並びにしています。 .square widthを計算プロパティによってきれいに三等分しています。 .square img aspect-ratio によって要素の比を1対1に変更して要素にぴったりと当てはまるように object-fit:coverを設定しています .flex-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; } .square { width: calc(100% / 3); } .square img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; } レスポンシブ 画面幅が750px以下になった時に適用されるcssを設定しています。 .square 要素が画面いっぱいに広がるようにwidth:100%にしています。 .flex-wrapper flex-direction:column にすることで要素を縦並びに変更しています。 @media screen and (max-width:750px) { .square { width: 100%; } .flex-wrapper { flex-direction: column; } } 最後に わからないプロパティがあったときは qiita で検索してみてください。 とてもわかりやすい記事がたくさんあるので参考になると思います。 不明点や間違いがあったときは twitter : @kappa_tinpan にリプライもしくはDMしてください。 可能な範囲で対応します。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Sass】矢印ボタンを作ってみた

初めに 学習した内容をもとに矢印ボタン(">"や"<")をsassで作成してみました。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 やりたいこと ①「<」や「>」の形をした矢印ボタンをcssで作る ②マウスを当てると右や左にずれるアニメーションも付ける 完成形のイメージ htmlで箱を用意する arrow_buttonsの中に矢印ボタンを配置するarrow_buttons__prevとarrow_buttons_next要素を用意します。 <body> <section class="buttons"> <div class="arrow_buttons"> <div class="arrow_buttons__prev"></div> <!-- "<"の矢印ボタン --> <div class="arrow_buttons__next"></div> <!-- ">"の矢印ボタン --> </div> </section> </body> SassでBoxと矢印ボタンを作成 ①矢印ボタンを配置させるために必要な箱を作る 幅200px,高さ50px、ボーダーラインが赤色の箱を作ります。矢印ボタンはこの箱の中に配置させたいので、positionをrelativeにし、この箱を基準に矢印の位置を調整するようにします。 .arrow_buttons { box-sizing: border-box; width: 200px; height: 50px; border: 1px red solid; position: relative; } ②矢印ボタンを押せる領域となる箱の作成(ボタンを押しやすくするため) 左と右矢印ボタンを押せるエリアを箱の形で指定します。それぞれ幅と高さを30pxにしました。また、親要素であるarrow_buttonsのpositionがrelativeに指定されているため、こちらの箱にそれぞれpositionをabsoluteに指定し、親要素(arrow_buttons)からの相対位置をtop、left、rightで決めます。 .arrow_buttons__prev { position: absolute; top: 8px; right: 110px; cursor: pointer; width: 30px; height: 30px; } .arrow_buttons__next { position: absolute; top: 8px; left: 110px; cursor: pointer; width: 30px; height: 30px; } ③矢印ボタンを作成ー"ㄱ"の形を作る arrow_buttonsの前に中身が空の擬似要素を作ります。この要素は箱の形にしているので、幅と高さを15pxに指定します。それから上と右に灰色のボーダーラインを引きます。positionをabsoluteにして、topとleftで位置調整をします。 .arrow_buttons { box-sizing: border-box; width: 200px; height: 50px; border: 1px red solid; position: relative; &::before { content: ""; display: block; width: 15px; height: 15px; position: absolute; top: 40%; left: 10px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; } } ④"ㄱ"を回転させる "<"の形にするために回転させます。時計まわりに225度回転させます。 .arrow_buttons { box-sizing: border-box; width: 200px; height: 50px; border: 1px red solid; position: relative; &::before { content: ""; display: block; width: 15px; height: 15px; position: absolute; top: 40%; left: 10px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; transform: rotate(225deg); //追記 } } 矢印の形になりました。 ⑤マウスを当てた時のanimation効果を作る マウスを当てた時に矢印ボタンを左に動くようにしたいので、擬似要素(:hover)のtransformプロパティにtranslateXを-10pxを指定します。また、このアニメーション効果が0.2秒間行われるようにしたいので、transition-durationプロパティを0.2sにします。 &__prev { position: absolute; top: 8px; right: 110px; cursor: pointer; width: 30px; height: 30px; &::before { content: ""; display: block; width: 15px; height: 15px; position: absolute; top: 40%; left: 10px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; transform: rotate(225deg); } //追記 &:hover { transition-duration: 0.2s; transform: translateX(-10px); } } 同じ要領で右の矢印ボタンも作成します。ここまでの完成形は以下の通りです。 .arrow_buttons { box-sizing: border-box; width: 200px; height: 50px; border: 1px red solid; position: relative; &__prev { position: absolute; top: 8px; right: 110px; cursor: pointer; width: 30px; height: 30px; &:hover { transition-duration: 0.2s; transform: translateX(-10px); } &::before { content: ""; display: block; width: 15px; height: 15px; position: absolute; top: 40%; left: 10px; margin-top: -2.5px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; transform: rotate(225deg); } } &__next { position: absolute; top: 8px; left: 110px; cursor: pointer; color: lightgray; width: 30px; height: 30px; &:hover { transition-duration: 0.2s; transform: translateX(10px); } &::after { content: ""; display: block; width: 15px; height: 15px; position: absolute; top: 40%; right: 10px; margin-top: -2.5px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; transform: rotate(45deg); } } } ⑥@mixinを使ってまとめてみる。 @mixin leftArrowButton { &__prev { position: absolute; top: 8px; right: 110px; cursor: pointer; width: 30px; height: 30px; &:hover { transition-duration: 0.2s; transform: translateX(-10px); } &::before { content: ""; display: block; width: 15px; height: 15px; position: absolute; top: 40%; left: 10px; margin-top: -2.5px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; transform: rotate(225deg); } } } @mixin rightArrowButton { &__next { position: absolute; top: 8px; left: 110px; cursor: pointer; color: lightgray; width: 30px; height: 30px; &:hover { transition-duration: 0.2s; transform: translateX(10px); } &::after { content: ""; display: block; width: 15px; height: 15px; position: absolute; top: 40%; right: 10px; margin-top: -2.5px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; transform: rotate(45deg); } } } .arrow_buttons { box-sizing: border-box; width: 200px; height: 50px; border: 1px red solid; position: relative; @include leftArrowButton; @include rightArrowButton; } 参考サイト
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む