ドロップダウンメニューのアニメーション覚書

CSS

ドロップダウンメニューのアニメーションについての覚書です。 webdesignfacts.net 上記のサイトの「SIMPLE PURE CSS DROPDOWN MENU1」のCSSについて考察・transform(translate(X軸,Y軸)) 要素をX軸、Y軸にずらすことができる。これでドロップダウン要素を…

2020-04-03

BEMについて

CSS BEM

この記事は自分の理解を確認するためのアウトプット全ては書籍「CSS設計完全ガイド」に書かれているのでそちらで。 BEMの基本 Block ・特定のコンテンツに依存しない、どこでも使い回せるパーツ・見た目を表す命名ではなく、「それが何なのか」を表すよう…

2020-04-01

模写中に調べたこと

CSS html

模写中に困って調べたことのメモ画像の下にできる余白問題 ideahacker.net Vertivcal-alignが効かない問題 haniwaman.com

2020-03-15

お問い合わせフォームのあれこれ

PHP wordpress Xserver html CSS

Webページにお問い合わせフォームが必要そうなので色々方法を調べていたので、メモしておきます。 WordPressのプラグインを使う方法 XserverのCGIツールを使う方法 PHPで全て作る方法お問い合わせフォーム.php お問い合わせ確認.php メール送信.php Google…

2020-03-15

言葉の定義　デザインコーディングプログラミングって何？

CSS html jQuery wordpress Ruby on Rails PHP laravel

エンジニア界隈でなんとなく使われている言葉について、いろいろ調べました。厳密な定義はないんでしょうが、なんとなーくみんなそういう意味で使っているんだろうなという私の理解のメモです。完全に私の主観なので、意見もらえると嬉しいです。 Webデザ…

2020-03-10

Webサイト模写で調べたちょっとしたこと

CSS

サイト模写をやりながら、色々調べているんですが「なるほどなぁ」と思ったものをメモ的に残しておきます。擬似要素を使う方法 afterの中で空白を使う方法 afterでfontawesomeを使う方法 liの最後の要素以外にmarginを設定する擬似要素を使う方法 afterや…

2020-03-09

slickの導入とちょっとしたカスタマイズ

CSS html jQuery

サイトの模写を進める中でスライドショーを実装する必要が出てきました。そこで簡単にスライドショーを実現できるスライダープラグイン「slick」を導入し、少しカスタマイズを行なったのでやり方を紹介します。導入方法カスタマイズ方法導入方法以下の…

2020-03-01

ハンバーガーメニューについて考えてみた

html scss CSS jQuery

レスポンシブなハンバーガーメニューを作りたくて、色々調べていました。ただ導入するだけなら、コードのコピペで済むんでしょうが、実装内容をきちんと理解したいと思いこの記事を書いています。以下の記事で紹介さ入れているコードについて、考察してい…

2020-03-01

Sassでちょっとつまったところ

CSS html scss

SCSSを使っていて、ちょっとつまったのでメモを残しておきます。うまく行かないコードうまく行ったコード（経緯含む）結局どういう事？うまく行かないコード以下のようなHTML、SCSS（CSS）を書きました。 ※SCSSはLive Sass CompilerでCSSに変換していま…

2019-12-10

【問題】text-decorationの適用について

CSS html

問題 aタグで表示するリンクのアンダーラインを消すために「text-decoration」を設定しましたが、うまくいきませんでした。その原因と対処策について説明して下さい。前提条件：Ruby on Railsでhamlを使用 html.haml%html %head 省略 %body .content .text-…

2019-12-08

【rails】railsでFontAwesomeを使うときの注意点

Ruby on Rails CSS

Ruby on RailsでFontAwesomeを使う方法はいくつかあるんですが、とても「ハマりポイント」が多く感じたので、そのポイントをまとめます。（ちなみにこの記事は2019年12月に書いてます）どのgemを使うか擬似要素（:before）を使うときの注意点 Railsを再起…

2019-12-06

【問題】inline-boxの隙間について

問題 html CSS

問題 inline-boxを指定して要素を横並びにしたときに発生する隙間をうめる方法を説明して下さい。隙間のある要素のイメージ図コード html<ul> <li class='inline-box-test'>要素1</li> <li class='inline-box-test'>要素2</li> <li class='inline-box-test'>要素3</li> </ul> css.inline-box-test { display: inline-block; font-size: 24px; border-bottom:1px solid red…

2019-12-05

【問題】margin-topについて

問題 html CSS

問題以下のhtmlとCSSにより親要素の中心に子要素が表示されることを期待したが、うまく行きませんでした。なぜうまく行かなかったのか、うまく表示させるためにはどうすればいいか説明しなさい。 html<div class="parent"> <div class="child"></div> </div> CSS.parent { margin: 30px; width: 240px; height: …