CMSやフレームワークを使えない状態で詳細ページ同士でリンクをつなげる必要があって、フロントで何とかしたメモ。 SEOやデータ追加更新時のリソースを考えると、フロント対処というところにツッコミがありますが かなりのレアケースとは思いますが、せっか…
JavaScript 自分用メモ 様々なサイトで用意されている「ページ最上部へ戻る」ボタンを、jQueryやライブラリを使わずに素のJSで実装するコードです。 <button id="scroll">ページ最上部へ</button> 「ページ最上部へ」ボタンをクリックしたら少しずつスクロール位置を戻し、小刻みに繰り返…
CakePHP3.6 自分用メモです。 個別のユーザーがusersテーブルに登録されていて、bookmarksテーブルがuser_idを持つ形で紐づいている場合 bakeしたコード↓ /** * Index method * * @return \Cake\Http\Response|void */ public function index() { $this->pag…
Cakephp3.6 自分用メモです。 ログインしたときに、元のページまたは指定のページに遷移させる方法。 UsersControllerのloginメソッドなどでも対応できますが、個人の好みとAuthコンポーネントの管理コストを考えるとこの書き方が便利だと思いました。 （つ…
ちょっとしたサンプルなどを公開するときにも使える、GitLab Pagesを使ったページの公開方法のメモ。 masterブランチに公開したい静的サイトのデータと、.gitlab-ci.ymlをコミットしてプッシュする。 ↓.gitlab-ci.ymlの内容 image: python:2.7 pages: stage:…
タイトルのままですが、マウスをのっけると上下にふわふわ動く日本国旗です。 こんな感じ html <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>floating</title> <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap" rel="stylesheet"> </link></meta></meta></head></html>
よくあるサイトデザインの1つ、ページ一番上の横並びメニューの書き方例です。 こういうの 横並びナビゲーション 今回の横並びはflexboxを使っています。 まずhtml <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>flex-box</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> </link></meta></meta></head></html>
研修生から相談のあった書き方をメモしておきます。 formにボタンを作り、選んだボタンによって違うページに遷移したいケースを想定しています。 consoleのエラーですぐわかる記述ミス 要素の後に読み込む対処例 htmlのload後に要素を取得する対処例 ボタン…
レスポンシブ対応のサイトにするときのfont-size関連の書き方。 html に基本の倍率を10px として設定し、bodyで全体を14や16pxになるようにします。 この場合は1.4remで14px （ついでによく使うfont-familyとline-heightもメモ） html { font-size: 62.5%; /…
こちらの記事を参考に、よく使うCSSを残しておきます。 coliss.com /* https://coliss.com/articles/build-websites/operation/css/a-modern-css-reset.html */ *, *::before, *::after { box-sizing: border-box; } ul[class], ol[class] { padding: 0; } u…
