tech1000+

プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ
CATEGORY

html/css

  • 2020年10月15日
  • 2020年10月15日

formと要素が重なってうまくいかないときの小技

小技、というかcssひとつで解決するんですけどね。 要素に以下をつける なにをするか一言でいうと、要素が選択範囲内にきてもなにもしないよって感じ。 before要素とかでゴチャゴチャ装飾したてformと重なるオシャレなデザインを作ってみたはいいが、いざカーソルを当てるとフォームを選択できない。 さらにz-indexを指定してもうまくいかなかった。ということでこの方法で解決しました。

  • 2020年1月12日
  • 2020年1月12日

iPhoneでフォーム入力時にサイトの幅がズレてしまう時の対処

レスポンシブなwebサイト作成時に、お問い合わせフォームなど、フォーム入力欄を使用する場合が多々あると思います。そのようなフォーム入力を、iPhoneで（スマホ表示で）テストしていると、入力時にフォームが自動的に少しだけズームになってしまい、webサイトの幅が崩れてしまうという現象がありましたので、原因と対処法をメモ。 原因 フォーム要素のテキストサイズと、サイトのテキストサイズが合っていないため […]

  • 2019年5月9日
  • 2019年5月9日

簡単!!bootstrap4でメニューバーを動的に固定する方法

はじめに タイトルが少しわかりにくいので補足すると、いろいろなサイトでよくみる「最初はメインビジュアルの下にあったメニューバーが、スクロールすると上部に固定されて追従してくる」やつです。 bootstrap4のドキュメントには上部固定、下部固定しか記載がありませんが、すごく簡単にできるのでおススメです。 完成系はこちら 先に完成系のソースを掲載します。 stylesheet 解説 bodyの閉じタ […]

  • 2018年10月13日
  • 2018年10月13日

チェックボックス、ラジオボタンの影響

チェックボックス、ラジオボタンが嫌いです。なぜなら苦手だから。 チェックボックス、ラジオボタンの影響 冒頭に書いた理由により使いたくないのが本音だが、案件等では登場頻度が高いのが現実で、普通のフォームと比べて以下のような影響がでてくると思う。 データ登録時 フォームで入力した値をDBに格納する場合 ラジオボタンは一つしか選択できないフォームのため、やりやすい。 男、女から選択するラジオボタンがある […]

  • 2018年1月17日
  • 2018年2月17日

【Bootply】Bootstrapのデザインを確認できるウェブサービス

Bootplyとは、Bootstrapのオプションの指定の挙動確認をしたいときなどに、自身のサイトにコードを書かなくてもそのデザインや挙動を確認できるウェブサービス。 Bootplyの使い方 まずは以下URLからBootplyのWebページへ。 https://www.bootply.com/ HandCodingをクリックすると、編集用画面が開く。 HTML、CSS、JavaScriptを入力す […]

  • 2017年11月19日

【html】buttonをただのボタンにする（submitさせない）方法

bootstrapやwordpressのせいかと思ってちょっとはまったのでメモ 現象 buttonにJavaScriptの処理を記述しているときに、処理が終わった後リンクする。 原因 buttonには初期設定でtype=”submit”が指定させているため、それを解除する必要がある。 解消方法 buttonにtype属性でbuttonを指定する [html] <but […]

  • 2017年7月11日

独自SSL化を考えていたらロリポップがタイムリーに無料SSLを開始した

前置き Googleでは2014年からHTTPSの暗号化通信をSEO判断基準に追加するというアナウンスがあったそう。 とはいえそれがこれまでの基準を大きく覆す重大な判断基準になるというわけではない。急いでサーバーを移転してバタバタと対策するよりは、良質なコンテンツを追求したほうが効果は出るだろう。しかし評価対象になりますよと発表されているからには対策した方がいいのは間違いない。いつまでも放っておけ […]

  • 2017年6月29日
  • 2017年7月29日

【高機能エディタ】 ATOMが一番使いやすいかもしれない

ATOMについて エディタは自分が使いやすいと思ったものが結局一番だが、TeraPadやさくらエディタ、Bracketsなどいろいろ使ってみた結果、GitHubが開発した無料のテキストエディタ【ATOM】が一番しっくりきた。簡単に使い方などをメモ。 ダウンロードから基本設定、基本操作まで ダウンロード https://atom.io/ 日本語化 File>>Setting>>Install 「Ja […]

  • 2017年5月10日
  • 2020年6月13日

【HTML/CSS】 ブートストラップ(Bootstrap)まずは基本の使い方

ブートストラップ(Bootstrap)とは CSSフレームワークで有名なもので、既にCSSが書かれたファイルを読み込んで、HTMLにクラス指定するだけで簡単にwebデザインができるというもの。 メリット モックアップの作成やレスポンシブデザインでのレイアウトが容易 デメリット デザインが似やすい。バージョンアップが早い。HTMLとCSSでガリガリ書くのに慣れている場合は、クラス指定の名称等のルール […]