Clik here to view.
自分用メモ reactスタイリング styled-components
はじめにreactとjsをいじり始めて、まだ日が浅い素人ですが、人によってcssに記述方法が違っていて、自分もどれにすればいいのかまた古い情報や新しい情報が入り混じって大変わかりにくいので、ここでまとめておこうと思います！！至らない点が数あると思いますが、その際はアドバイスしていただけると幸いです。そしてトラハックさんのこちらの動画を中心にまとめています！！この記事より詳しくわかりやすく説明しており...
View ArticleClik here to view.
ホームページ作成入門メモ1
前知識HTMLハイパー・テキスト・マークアップ・ランゲージの略タグと呼ばれる<>で囲まれた文字を組み合わせたもので、IE や Chrome などのブラウザに文字や段組を表示させることができる他にも意味を決めたり、別ページへのリンクを貼ることもできる昔は色や文字サイズも細かくいじれたが、今は CSS でいじる決まりになっているCSSカスケーディング・スタイル・シートの略 HTML...
View ArticleClik here to view.
【CSS】flex box画像の改行がしたい
画像付きボックスの改行ができなくて沼ったのでメモ。冷静に調べたらもっと早く解決できたと思いますが自分の検索力の無さを恨みますwやりたいことこの画像の様な画像つきのボックスを画像①こんな感じで幅をも持たせて各行に３個ずつ配置したい。画像②まず前提としてボックスの親要素にdisplay:...
View ArticleClik here to view.
HTMLを始めるには
この記事の対象者・webプログラムを始めて見たい人・デフォルトのテキストエディタでコードを書いている人web開発には何が必要？ウェブ開発には主に二つのアプリケーションが必要で、ブラウザとテイストエディターです。※あくまで僕の場合ですがウェブサイト制作は始めにイメージを固める為にデザインの大枠を紙に書いてから、htmlやcssファイルを作りコードを書いて、必要に応じてJavaScriptやphpを追加...
View Article【初心者でもわかる】CSSで背景画像やグラデーションを2重や3重につける方法
どうも7noteです。背景画像やグラデーションを指定するときに使うbackgroundプロパティは、複数指定することができます。背景の複数指定の方法background:url(img1.png),url(img2.png),url(img3.png);background:背景１, 背景2, 背景3と書きます。この場合重なり順は、1.img1.png(最前面) 2.img2.png...
View ArticleClik here to view.
ITCSSまとめ
ITCSSは、OOCSSやBEM、SMACSSのようなCSS methodology(方法論)の１つでInverted Triangle CSS(逆三角形CSS)の略称。提唱したのは、csswizardryのHarry Roberts氏。 ITCSSに関するドキュメントはあまり多くない。セルビアでITCSSについて紹介している動画がYoutubeにあがってる。そのときのスライドがManaging...
View ArticleClik here to view.
学習用 HTMLとCSSの関係性
学習で学んだ内容のアウトプットとして作成しました。HHTMLとCSSの関係性○HTML:ウェブサイトに表示される情報を記載する言語です。〇〇.htmlという名前のファイルに記述します（例：test.html）○CSS：HTMLに装飾を加えるための言語です。〇〇.cssという名前のファイルに記述します（例：style.css）○拡張子：拡張子は、ファイルに書かれる言語の種類を識別するためにファイル末尾...
View ArticleClik here to view.
Traditional WebのWidgetに動的にクラスを適用する
Version 11環境のTraditional Webでの実現方法を検討。確認環境Personal Environment(Version 11.9.0 (Build 16900)) Service Studio(Version...
View Article【初心者でもわかる】スマホの画像は、倍のサイズじゃないとボケる。
どうも7noteです。レスポンシブサイトを作成する時の画像サイズに注意！レスポンシブのサイトを作成する時、スマートフォンで表示される際は200pxの画像は400pxの画像を用意しなければならない！倍のサイズの画像を用意する理由スマートフォンの表示画角はpxでいうと、横幅が約320px～420pxくらいのものが一般的です。機種大きさ（横幅）iphone5,SE320pxGalaxy...
View ArticleClik here to view.
CSSでwidthの注意点とheightは使わないほうがいい理由
プログラミングの勉強日記2020年8月19日 Progate Lv.226 CSSでwidthとheightの指定はわかりやすいので、簡単なプロパティだと思いがちだが、実際にはあまり使用しないことを知った。その理由をまとめておく。 原則のルールとして親要素の範囲を超えて指定してはいけない。width:100%について 理由の一つとしてコードが長くなることが上げられる。...
View Articleスマホの見た目のときだけ電話番号のリンクをアクティブにする
HTML<ahref="tel:0120-000-000"class="telephone">TEL:0120-000-000</a>これだけだとPCのブラウザでも電話番号のリンクがつながってしまうので、スマホだけにするメディアクエリでウィンドウ幅769px以上の場合はリンクを無効にするCSSを設定するCSS@mediascreenand(min-width:769px){a...
View ArticleSass (SCSS) の mixin で max-font-size を実現する（IE 9+ 対応）
はじめにmax-widthや min-heightみたいな感じで、最大・最小の font-sizeを指定したい局面って結構あると思います。具体的には max-font-sizeみたいなプロパティがあると嬉しいけど、今のところそういったものはないので、それを実現するための mixin を書きました。min()、max()、clamp()プロパティの挙動を参考にしています。...
View Articleホームページ作成入門メモ2
前回の記事の続き HTML, JavaScript それぞれでよく使う項目について解説していくHTMLhead タグページのヘッダ部分を示すタグで、ページ自体の情報などを載せる箇所例えば以下のようなタグが入るmeta文字コードなどのメタ情報を示すタグtitle文章のタイトルを指定するタグlinkリソースとのリンクを設定するタグ。cssやwebフォントとの結びつけに使われるclass, id...
View ArticleClik here to view.
【初心者向け】HTML+CSSチートシート
はじめに初心者・新卒の方々にHTML・CSSを教える機会が増え、自分が初心者のときにこんなものがあったら有難かったなと思ったので簡単にまとめてみました。登場する書き方は私がお世話になっている書き方なのでより美しい書き方があればご教示いただけますと幸いです。よくあるレイアウトロゴのみ右寄せになっているヘッダーナビゲーションよくみるこのような形のレイアウト。どうやって実装するのでしょうか？以下のように実...
View Article【初心者向け】初心者コーダーが陥りやすいHTML・CSSのトラップ4選
どうも7noteです。HTML・CSS初心者は気をつけたい罠(トラップ)4選始めたての頃には気付きにくい、参考書にも載ってない（小さくしか載ってない）HTML・CSSのトラップを紹介していきます。初歩的だけど私自身悩んだりつまったりしたことがあったので、参考になれば嬉しいです。HTML・CSSで陥りやすいトラップ4選①インライン要素の間で改行してはならないHTMLを記述する際、このような書き方はNG...
View ArticleClik here to view.
夏だ！カレーだ！都内の人気店のメニューガチャ作ったので、みんなでカレーを食べよう！！！
カレーは好きですか？私は大好きです。カレー専用のInstagramもやってます。(https://www.instagram.com/tawa.tawa.tawa/)プログラミングの練習も兼ねて、好きなカレーを題材に何か作れないか考えました。うーーーーーーんそうだ！メニューガチャアプリを作ろう！話題になったサイゼリヤガチャを参考に、Javascriptで自分なりにアレンジして作ってみることにしました...
View ArticleClik here to view.
ウェブサイトでお洒落なフォントを使おう！
この記事の対象読者・最近CSSの勉強を始めた人・自分のサイトをもっとカッコ良くしたい人・フォントを変えて見たいけど方法がいまいち分からない人新しフォントを探そう！！ネット上では色々なフォントが公開されていますが、初心者が手っ取り早くかっこいいフォントに変えるならgoogle fontsがお勧めです。なので今回はgoogle...
View ArticleClik here to view.
[css]開発でよく使用する便利技
開発でよく使用する便利技をここに残しておきます。これいいなと思ったものはここに残すつもりなので都度更新するかもしれません。要素の上下中央寄せ要素の上下中央寄せの方法はいくつかあります。その中でも、自分が開発を行う上でよく使うのいくつか紹介させて頂きます。完成例html<divclass="c-box"><divclass="c-box__inner"></div>...
View Article