要素の位置の指定について
要素を任意の位置に配置する方法について記事を書きたいと思います。要素の配置方法■positionプロパティ positionプロパティとは指定した要素の配置方法を決めることができるプロパティ。値との組み合わせ説明position: relative;現在の位置を基準に相対的な位置を決めるposition:...
View ArticleClik here to view.
疑似要素でつくったチェックボックスにブラウザ準拠のフォーカスを当てる
はじめに疑似要素を使用してチェックボックスを作った際に、ブラウザ準拠のフォーカスを当てたかったのですが、どうしようか…と少々苦戦したので備忘録として残すために記事にしました。...
View ArticleClik here to view.
Vue.jsとは？？
今回は、Vue．jsについて学習していきたいと思います。 Vue.jsとは、フロントエンドで使われる言語です。Javascriptのフレームワークになります。...
View ArticleVue.js~オブジェクト（ドラえもん）~
https://qiita.com/akari_0618/items/36ba2fc4dee783def482前回の記事でのオブジェクトについて触れていきたいと思います。簡単に言うとオブジェクトとは物体なのですが、わけわからないと思うのでここではドラえもんという作品を作るということにしときます。ということで最初にいきなりオブジェクトに突っ込むと詰むので、まずは周りから攻めていきましょう。ドラえもんの...
View ArticleClik here to view.
vsIE（ボタンのレイアウトが崩れる編）
はじめに前回の記事同様IEに苦しめられた内容を備忘録として残していきます！ ということで今回は「ボタンのレイアウトが崩れる編」です。 ボタンの中身の文言をただただ中央に表示したいだけなのに…！もし他にステキな解決法があれば是非教えてください！！ では！早速！...
View ArticleIntersectionObserverクラスで画面をスクロールした時、要素をふわっと出現させる。
はじめにホームページなどでよく見る、下にスクロールさせると下からふわっと画像が出現するようにするにはどうすれば良いのか気になったので調べてみました！コード紹介&解説このような物を作っていきます！ See the Pen dyNbgbX by Ryuji Watanabe (@ryuji0526) on...
View ArticleClik here to view.
画像の表示(HTMLとCSS)
HTMLとCSSを使って画像を表示させる方法に関しての記事。下記2点について書きたいと思う。・画像を表示する方法・画像の大きさを調節する方法画像の配置まずは、画像を配置させる。下記のようにimageというフォルダ内に画像を配置させる。画像の表示画像を表示するためには、img要素を使う。 img要素を用いることで、Webサイト上に画像を表示することができる。...
View ArticleClik here to view.
HTMLで埋め込んだYellowfinのJSAPI3で効かせたフィルターを表示させない方法
どのような時に使われるか主に、ログインした人によってあらかじめフィルターを絞った状態で表示させたいが、フィルターの内容は表示させたくないといった状況です。その人の所属してる店舗の情報のみ表示したい・・など。こういったものはYellowfinの機能の一つであるアクセスフィルターを使って製品保証された状態で使うのが普通だと思うのですが、どうしてもという場合にこういう方法があるかなという提案です。(もちろ...
View ArticleClik here to view.
Grid LayoutのIE向けベンダープレフィックスをAutoprefixerに任せるなら「自動配置」に注意する
はじめにCSSベンダープレフィックスは手打ちでやろうとすると割と厄介ですが、Autoprefixerは自動でこのベンダープレフィックスを付与してくれるため、コーディング量を少なくしメンテナンス性も高めることができるとても便利なものです。しかし、Autoprefixerの挙動を理解していないと、IEと従来版Edge対応時に「自動配置」に振り回されるかもしれないので備忘録を残します。決して、Autopr...
View Articleinputタグの中で文字位置を調整
inputタグの文字位置を調整するにはpaddingを使う例 虫メガネマークの後ろから文字を表示したい時 input> style> padding-left: 30px; /style>
View ArticleClik here to view.
ellipsisに記号を使いたい。CSSのみでやりたい
文字が見切れた時に「...」を表示するellipsis。これを「...」じゃないほかの何かを表示したいことがあった。ググっても出てこなかったので自分で作ってみた。ので公開する。ちなみにJSを使いだすと画面サイズ変わったイベントとかいちいち取らないといけないのが面倒なのでCSSだけでやりたい見切れた時に★を表示するサンプルサンプル(codepen)見切れた時、文末に★が出る。↓HTML<divc...
View ArticleClik here to view.
主なWebサイト構造設計
サイト構造設計の種類レスポンシブWebデザインシングルページ・レイアウトアダプティブ・デザインワンカラム・レイアウトマテリアル・デザイン1. レスポンシブWebデザイン機種の画面サイズ、ウィンドウのサイズに応じてレイアウトを最適化するWebデザイン。...
View Articleキャプションを画像幅に合わせる
メディア系にて<figure><imgsrc="https://placehold.jp/400x200.png"alt=""><figcaption>なが〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜いキャプション</figcaption></figure>figure{display:table;}figcaptio...
View Articleホバーしたら数字が1回転するコードを使ってtransitonの理解を深める①
概要ホバーしたら数字が1回転するコードを使ってtransitonを理解を深める【transitionプロパティ】遷移 (transition) によって、要素の2つの状態間の変化を定義することができます。それぞれの状態は :hover や :active のような疑似クラスで定義するか、 JavaScript を使用して動的に設定します。参考：transform - CSS:...
View ArticleClik here to view.
huskyを使ってgit commit前にstylelintを動かす
huskyを使えば簡単にpre-commitにstylelintが組み込めます。チーム開発では非常に便利なので是非取り入れてみてください！目次huskyとはインストールhusky準備package.jsonに追加動作確認バージョンnpm: 6.14.8 husky: 5.2.0 lint-staged: 10.5.4huskyとはgit hookを簡単に使えるようにするツールです。 git...
View ArticleHTML/CSS フォームの実装
HTML/CSSを使ったフォームの作り方の記事を書きたいと思う。フォームの入力欄の作成■form要素 form要素とは、フォーム関連要素の集まりを表すブロック要素。form要素を用いて、フォームの大枠の要素を作成する。<!DOCTYPE...
View Article2021年春版 ホームページフロント開発の便利リンク集 学習篇
はじめに機能篇はこちらデザイン篇はこちらツール篇はこちら網羅性を重視して書いています。(備忘録)クリエイティブ・コモンズに気をつけてください。ここに書かれていない便利ツールがあれば教えてもらえると幸いです（あとで追加するかもしれません）各項目使いやすさ・使用頻度順？に並べています北海道に春が来るまでは工事中親玉的存在規模が大きすぎるもの、html,cssが内容の一部であるサイトをとりあえずまとめまし...
View Article2021年春版 ホームページフロント開発の便利リンク集 機能篇
はじめに学習篇はこちらデザイン篇はこちらツール篇はこちら網羅性を重視して書いています。(備忘録)クリエイティブ・コモンズに気をつけてください。ここに書かれていない便利ツールがあれば教えてもらえると幸いです（あとで追加するかもしれません）各項目使いやすさ・使用頻度順？に並べています北海道に春が来るまでは工事中ツールの宝庫TwinzLabとりあえず最強リンク集 coveloping{...
View Article2021年春版 ホームページフロント開発の便利リンク集 ツール篇
はじめに学習篇はこちら機能篇はこちらデザイン篇はこちら網羅性を重視して書いています。(備忘録)クリエイティブ・コモンズに気をつけてください。ここに書かれていない便利ツールがあれば教えてもらえると幸いです（あとで追加するかもしれません）各項目使いやすさ・使用頻度順？に並べています北海道に春が来るまでは工事中ツールの宝庫coveloping{ }...
View Article2021年春版 ホームページフロント開発の便利リンク集 デザイン篇
はじめに学習篇はこちら機能篇はこちらツール篇はこちら網羅性を重視して書いています。(備忘録)クリエイティブ・コモンズに気をつけてください。ここに書かれていない便利ツールがあれば教えてもらえると幸いです（あとで追加するかもしれません）北海道に春が来るまでは工事中文字Googlefontsフォントを調べるときの定番Capsizeフォント、行間のプレビューができ、それをコピペできるFont...
View Article