Clik here to view.
【HTML】brタグを多用してはいけない
プログラミング勉強日記2021年3月7日brタグを多用してはいけない理由デバイスによってレイアウトがずれてしまうため 必要なところで<br>を使うのはいいが、レイアウトを整えるために使うのは良くない。デバイスによって画面幅が異なり返って見にくくなる可能性がある。対処法...
View Article営業の私がGoogle Apps Script【GAS】を使って営業の業務を自動化・効率化していく話。
はじめに※この記事は随時更新しています。(最終更新日：2021/3/8)私は小さなIT企業で営業をしています。もともとはエンジニアでしたが、会社都合で入社から3年後にして営業をしています。(謎)営業の業務って本当に無駄な業務が多いんですよね・・・。特に私の今いる会社では、人数がとても少ないので、一言で営業といっても単に顧客へのセールスだけが仕事というわけではありません。契約等の事務処理、契約書作成、...
View ArticleClik here to view.
ChromeとFirefoxで印刷用CSS（@media print）を確認する方法
最近よく聞かれる気がするので2021年3月時点の情報を明記しておきます👀 Firefoxはなかなかわかりづらい( ˘ω˘ )Google Chromeの場合※ macOS Canary 91 で確認開発者ツール右上の三点リーダメニューを開く「More tools」を選択「Rendering」を選択Emulate CSS media type から「print」を選択Mozilla...
View Article初学者のJavaScript 開閉機能のプログラミング
jQueryでtoggleClassメソッドを利用した開閉機能$(document).ready(function(){$('#button').on('click',function(){$('#hoge').toggleClass('show');});});HTML要素のhoge(ID名)にtoggleClassでshowをクリック時に追加、削除するプログラム。クラスセレクタshowにCSSを...
View ArticleClik here to view.
アニメーション
アニメーションをまとめます。チェックボックスチェックマークがいい感じにつく<inputtype="radio"name="test"id="test1"><labelfor="test1">チェックボックス</label>input[type="radio"]{display:none;}input[type="radio"]+label{display:bloc...
View Article【CSS】white-spaceの使い方
プログラミング勉強日記2021年3月8日white-spaceとは テキスト内の改行・スペース・タブをどのように扱うか指定できる。white-spaceの使い方white-space:値; この値には、normal, nowrap, pre, pre-wrap, pre-lineのどれかを指定する。...
View ArticleClik here to view.
CSS アニメーション
目次transitionについてanimationについてアニメーションの例1. transitionについてtransitionスタイルの変更の開始時から終了時までの挙動を設定する開始時と終了時を定義するには？ :hoverなどの疑似クラス(:active,...
View ArticleTailwindCSS入門①
TailwindCSSとはCSSフレームワークであり、utility classを使って独自のデザインをすることができるので、カスタマイズしやすい。...
View ArticleClik here to view.
margin ;0 auto; と text-align:center; の違い
cssいまいち違いがわからなかったので、メモを残します。【text-alignだけ】stylesheet.csstext-align: center;h1が微妙に左側に傾いてる【margin 0 autoもtext-alignも両方】stylesheet.cssmargin: 0auto;text-align: center;文字が中心でさらに枠組み自体が真ん中になっている【margin 0...
View ArticleWebフォントを軽くする方法（Googleフォントを無料でダイナミックサブセット化）
Webフォントを軽くする方法（Googleフォントを無料でダイナミックサブセット化）Googleフォントで読み込む文字を指定可能に！Google Chromeのエンジニア...
View ArticleReact でカスタムコンポーネントの props に CSS のプロパティを使う
やりたいことカスタムコンポーネントを使う際に、style の要素を props に含めたいケースがありました。イメージとしては下記の通りです。// Custom Box Component<MyBoxflex={1}flexDirection="row">...</MyBox> 例えば Flexbox に関するスタイルの場合、 React Native だと @typesに...
View ArticleCSSでhover時に荒ぶらせない
hoverさせると荒ぶってしまう。hoverなどを利用してボタンの色を変えたり、サイズを変更したりして何らかのアニメーションをつけることがあるかと思います。そんなとき範囲を考えて実装しないとマウスの挙動によってびっくりするぐらいアニメーションが荒ぶります。荒ぶるボタン See the Pen css bad_animation by moririn3464 (@moririn3464) on...
View ArticleClik here to view.
ボタンタグ~使い分け~
今回はボタンタグについて振り返って行きます！！まず、ボタンタグには３つほどあり、ややこしくなっています。一つずつみていきましょう😊では、お使いのテキストエディタに入力していきましょう。index.html<button>移動</button><inputtype="button"value="移動">しかしこのままではリンクが飛ばないので、いろいろ、つけ加えて行き...
View Article【CSS】line-breakの使い方
プログラミング勉強日記2021年3月9日line-breakとは 改行規則の厳密さを指定するときに使用する。line-breakの使い方CSSwhite-space:値; この値には、auto, loose, normal, strict, anywhereのどれかを指定する。 autoは初期値で、既定の改行規則を使用して改行する。...
View ArticleClik here to view.
【初心者向け】フォントサイズの指定は10pxより小さくはならない
どうも7noteです。フォントサイズの指定は10pxより小さくしないようにしましょう。WEBサイトを作成するときにfont-sizeでフォントの大きさを指定できますが、フォントサイズは10pxより小さくならないように気をつけましょう！なぜフォントサイズは10px以下にしてはいけないのか？結論：いけないわけではないが、対応していないブラウザが多いので指定しても効かない。たとえばGoogleChrome...
View ArticleClik here to view.
CSS, グリッドの中の入力ボックスの幅を自動で縮める方法
申し訳ない、あまり良い記事名ではないし説明も拙いことと思います……。グリッドを使ってフォームを作りたいが、フォームの幅が内部の要素の幅に依存する場合 (position: absolute), あるいは内部の要素の幅から全体の幅を決めたい場合 (display: inline-grid) がある。稀に。単に grid-template-columnsで...
View ArticleClik here to view.
【初心者でもわかる】HTML・CSSの[改行][文字送り][非改行]のマニュアル
どうも7noteです、改行させたい時、逆に改行させたくない時の書き方「目指せ改行のスペシャリスト！」webサイトでは必ずといっていいほど改行する場面が出てきます。場所によっては改行させたくないところや、この単語だけは途中で改行させたくない等細かい仕様を決めることができます。改行する方法、逆に改行させない方法などを解説していきます。オーソドックスな改行：...
View ArticleClik here to view.
@keyframesって何
大前提: @keyframesとはアニメーション開始から終了するまでどのような動きのアニメーションをするのかを指定できるCSSの文法。 animation プロパティと...
View Article