html
模写中に困って調べたことのメモ 画像の下にできる余白問題 ideahacker.net Vertivcal-alignが効かない問題 haniwaman.com
Webページにお問い合わせフォームが必要そうなので色々方法を調べていたので、メモしておきます。 WordPressのプラグインを使う方法 XserverのCGIツールを使う方法 PHPで全て作る方法 お問い合わせフォーム.php お問い合わせ確認.php メール送信.php Google…
エンジニア界隈でなんとなく使われている言葉について、いろいろ調べました。 厳密な定義はないんでしょうが、なんとなーくみんなそういう意味で使っているんだろうなという私の理解のメモです。 完全に私の主観なので、意見もらえると嬉しいです。 Webデザ…
サイトの模写を進める中でスライドショーを実装する必要が出てきました。 そこで簡単にスライドショーを実現できるスライダープラグイン「slick」を導入し、少しカスタマイズを行なったのでやり方を紹介します。 導入方法 カスタマイズ方法 導入方法 以下の…
レスポンシブなハンバーガーメニューを作りたくて、色々調べていました。 ただ導入するだけなら、コードのコピペで済むんでしょうが、実装内容をきちんと理解したいと思いこの記事を書いています。 以下の記事で紹介さ入れているコードについて、考察してい…
SCSSを使っていて、ちょっとつまったのでメモを残しておきます。 うまく行かないコード うまく行ったコード（経緯含む） 結局どういう事？ うまく行かないコード 以下のようなHTML、SCSS（CSS）を書きました。 ※SCSSはLive Sass CompilerでCSSに変換していま…
問題 aタグで表示するリンクのアンダーラインを消すために「text-decoration」を設定しましたが、うまくいきませんでした。その原因と対処策について説明して下さい。 前提条件：Ruby on Railsでhamlを使用 html.haml%html %head 省略 %body .content .text-…
問題 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…
問題 以下のhtmlとCSSにより親要素の中心に子要素が表示されることを期待したが、うまく行きませんでした。なぜうまく行かなかったのか、うまく表示させるためにはどうすればいいか説明しなさい。 html<div class="parent"> <div class="child"></div> </div> CSS.parent { margin: 30px; width: 240px; height: …
本日は前回作成したスタンダードレイアウトをlaravelに適応しました。 さらに「MVCについて」といことで、コンテンツも制作。 制作中のプログラミング学習アプリ（個人アプリ）。発表まで残り1週間。仕上げていきたい。#駆け出しエンジニアと繋がりたい #テ…
個人アプリのレイアウトがひとまず完成しました。 吹き出しを作る時、CSS理解に多くの時間をかけてしまったので、今回はコピペ多めで作成。 画面は以下のような感じです。 画面イメージ 参考にしたサイト ポイントボックス 【CSS】おしゃれなボックスデザイ…
本日は画面設計の基礎についての記事になります。 やったこと 今回作成した画面 htmlとCSS 読み込むCSSファイルの解説 reset.css csshack.css htmlcsstest.css CSSの中身を解説 メインの画面幅は960px フッターとヘッダーの横幅 メインとサイドメニューを横…
