アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < イザユケエンジニャー

HTML

CSSだけで画面の下端にフッターを固定する

スクロールでついてくるやつではなく、 「ページの一番下に表示、ただしコンテンツが少なくスクロールが発生しないときは画面の一番下に表示」 というやつ。まずHTMLがこんな感じで、固定したいfooter要素がbodyの直下にあるものとする。 他のコンテンツの構…

いい感じにdivをスライドさせる

CSSとHTMLだけで、divを横にスルッとスライドさせるやつ(語彙力) スライドショーみたいに勝手にうごくやつじゃなくて、クリックして次に進むタイプ。 .slides { display: flex; overflow: hidden; scroll-behavior: smooth; } .slides > div { flex-shrink: 0…

Twitterのタイムラインを設置する

↓こういうやつ。意外と簡単でした。 Tweets by honey8823 作り方 公式でツールを用意してくれています。 これに従って進めて、出来上がったHTMLを貼り付けるだけ。 詳しい使い方はヘルプページにあります。 タイムラインを埋め込む方法 補足 …とだけ書くのも…

アップロードされた画像をDBに保存する

作る機会があったのでメモ。 フォームのタイプとか、DBではなくファイルとして保存するとか、そういうアレンジは適当に。 手順 ざっくり分けると以下のような感じ。 画像のアップロードフォームを作る アップロードされた画像を加工する(リサイズなど) 加…

CSSの指定方法いろいろメモ

バック兼業フロントエンドエンジニア1年生、昔はHTMLは書いてたけどCSSすごい苦手だったのが今更響いている…。サンプルを作って試したのをメモ。<HTML> <div id="divid1" class="divclass1 divclass2"> <span>test1</span> <div id="divid2" class="divclass1 divclass3"> <span>test2</span> <div id="divid3" class="divclass2 divclass3"> <span>test3</span> </div></div></div>

ドラッグ&ドロップでファイルをアップロードする(ちょっとリッチ版)

こちらの記事が前提となります。 IEだと動かないはず。対応した版はこちら。 ドラッグ&ドロップでファイルをアップロードする(IE対応版) - アナログCPU:5108843109簡単に書くと 「ファイルのアップロードフォーム」と 「アップロードしたいファイルをド…

ドラッグ&ドロップでファイルをアップロードする(最低限版)

タイトル通りのやつにちょっと苦戦したのでメモ。 つーか業務アプリなんだからドラッグ&ドロップじゃなくてよくね??今回は必要最低限の処理だけ書いた版です。ちょっとリッチ版はこちら。 ドラッグ&ドロップでファイルをアップロードする(ちょっとリッ…

iframeのデメリットを無理矢理消化した実装(JS+PHP+Smarty版)

iframeの二大デメリット 「URLが切り替わらない(常にフレームの外側ページのもの)」 「内側ページのURLを直接叩くとフレームが出ない」 を解決すべく とりあえず↑を検討した後、やっぱ微妙だなと思って PHPとSmartyの力も借りて実装したバージョン。仕組み…

新しいウインドウを開き、そこに値を送信する

まずは結論 <HTML:親ウインドウ> <a href="#" onclick="pushValue();">ウインドウを開いて値を送信する</a> <HTML:子ウインドウ> <input type="hidden" id="testid" value=""> <jQuery> var obj; // 開いたウインドウを扱うためのオブジェクト変数 function pushValue(){ // ウインドウオブジェクトが存在しない場合・閉じられている場…

ファイルをダウンロードさせる方法

画像とかMP3ファイルとかPDFとか、 そういうものにaタグでリンクを張ると普通はブラウザで表示しちゃうのですが、 表示でなくダウンロードさせたい場合。HTML5ではaタグに「download」属性を追加するだけでOK。 <a href="ファイルパス" download="ファイル名">ダウンロード</a> それ以外の方法を探すとやたら面…

ローカルのCSVファイルをアップロードして処理

ローカルからCSVファイルをアップロードしてその内容を処理する機能を作ることがあったのでメモ。 といってもアップロード機能自体はめちゃくちゃ簡単だった。エラーチェック系が沼。 HTML <form enctype="multipart/form-data" action="【※】" method="POST"> <input name="userfile" type="file" /> <input type="submit" value="送信" /> </form> これだけ…

半角スペースに2種類あって困った話

いや、2種類あること自体は知ってたんですけど。 文字コード32と160ですね。※10進数普通にスペースキー打って出てくるのは32の方です。 これ→「 」 160の方は、キーボードで打つことができるのかどうかは分かりませんが、 これ→「 」(尚、ここでは↓のように…