まみやん技術メモ

仕事でためになった情報をこまめに書いていきます。

サムネイルをセンタリングして正方形にきりとる

.cover_img { display: inline-block; width: 98px; height: 98px; background-repeat: no-repeat; background-position: center center; background-size: cover; }

position:absolute;やposition:fixed;で要素をきれいに中央配置する方法

position:absolute;やposition:fixed;で要素をきれいに中央配置する方法 [CSS] position:absolute;やposition:fixed;で要素をきれいに中央配置する方法 | TechMemo

画像のタップハイライトを非表示にする方法

スマホサイトで困ったのでメモしておく。該当のimgタグに下記プロパティーをあててあげたら解決した!.xx img { pointer-events: none; /* imgのタップハイライト */ }iPhoneのa要素内にimg要素がある場合のタップハイライトの件 iPhoneのa要素内にimg要素が…

参考になるSPキャンペーンページ一覧(随時追記)

ウチカフェ秋コレリツイートキャンペーン|ローソン Pontaスピードくじ!!|ローソン Ponta会員限定 MACHI caféマイレージキャンペーン|ローソン

Androidの標準ブラウザでセレクトボックスを標準デザインに戻す方法

セレクトボックスは一度リセットCSSでリセットをしデザインをあてていたけれど、 説明文だけの画面とかお堅いところの画面では標準を使いたいということで、 元に戻す方法を模索していた。 ボーダーなどはさておき、プルダウンっぽい▼さえでれば問題なかった…

Chromeで小さいフォント指定が出来ない現象(仕様)

iPhoneのsafariで正常に指定できていたfont-size:6pxがAndroidのchromeでみたら効いておらずスタイル崩れが発生。 AndroidとPCをつないでchromeでリモートデバッグしてみたら、 クラスは読み込んでいるもののfont-size:10pxになっている!! なぜ!!!! と…

CSSスプライトの超便利ツール★Glue(CGIを使用)

以下の2つの記事を参考にglue、OptiPNGのインストール、Python のパスを通したりして キレイにCSSと結合したpngファイルを吐き出してくれました。 ありがたや〜 私が使ったコマンドは glue icon sprite -p3 --retina 速いは正義!CSSスプライトの作成効率を1…

safariで自動入力欄の色(黄色)を変更する

CSS

iPhoneのsafari(chrome系?)で自動入力機能が働いたtextboxの背景が黄色になる現象が発生した。 どうやらsafariが用意しているユーザ・エージェント・スタイルシートのbackground-colorが効いているらしい。 それで以下のようにcolor指定してあげたげど全然…

mobile safariでinputがグレーになる現象とその解決策

iPhoneのsafariでinputボタンがグレーになる現象が発生していた。 リモートデバッグで開発者モードにして調査したところ、ユーザーエージェントスタイルが効いてグレーになっていた。chromeで同一ページをみたところグレーにはなっていないことから、やはりs…

デバイス幅に合わせたボタンのコーディングの仕方

CSS

iPhoneとAndroidを対象とした画面を作るとき、 ログインボタンと会員登録ボタンを画像にする想定でデザインしてました。デバイスによって横幅が変わるのでどうしようと思っていたら またまたこの業界の先輩が記事として残してくださっていたのでメモ。 paddi…

hタグの中で画像を表示させる

hタグの中で画像を表示させる方法のメモ。 indentで文字をずらす方法はもう古い。とのこと。 サイトタイトル h1 a { display:block; width:280px; height:100px; background-image:url("../img/logo_dummy.gif"); background-repeat:no-repeat; } h1 span { …

iPhoneやAndroidで簡単デバッグ、改めてfont-familyについて考えてみる。メモ。

Androidやタブレットで表示したときにWebページが最適化されるようレスポンスブデザインでコーディングしました。今回はAndroidアプリのLPだったので対象メインユーザーはAndroid端末の方なの。だからPCは除外で。 モバイル端末だけどPCと同じようにブラウザ…

DreamweaverからSublime text2に移行した時の設定など

テキストエディタといえば代表的なのがDreamweaverとかNetbeansとか有償無償いろいろあがると思うんだけど、 2012年あたりから日本でも使用者が増えているほぼ無償のSublime textが気になっていた。(※評価版は無償なんだけど開発者への資金提供もできるみた…

【jQuery】要素の外側のタップイベント捕捉

スマホサイトの改修で検索履歴のサジェスト表示を頼まれた。 オーバーレイでよく使われているような、要素の外側をクリックすると表示していた要素が消える動作をしたかったのでjQueryでプログラムくんだ。 以下のサイトで自前のjQuery拡張機能を作られてい…

Dreamweaverのカラーコード設定でわかりやすく!

下記のサイトを参考にDreamweaverのカラーコードを設定しました。 Dreamweaverのコードカラーリングまとめ | Webデザインのタネ いろいろなサイトのコードカラーが載ってて対応言語も一覧表示されているからわかりやすい。私はHTML,CSS,JS,PHPを設定した。 …

CSSフレームワークとCSSスタイルガイドジェネレーター

CSSフレームワーク oocss ー構造と見た目の分離 ーコンテナとコンテンツの分離 Smacss ーカテゴライズ ー命名規則 ーHTMLとCSSの分離 スタイルガイドジェネレーター ーStyleDocco

個人的メモ。

運用・効率 zen-CordingをNetBeansに導入して作業効率UPを計る (http://kenqsan.com/application/875/) スマホ対応 PCとスマホサイトの対応を一枚のHTMLで(Media Queries) Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用…

データベースのおべんきょ。

本日のキーワード ・データベース(DB) ・RDB(リレーショナルデータベース) ・SQL ・MySQL ・クエリー言語先週の二日間はJavaを離れてDBつまりデータベースの事に関して学んでいました。主にMySQLのソフトをインストールし、クエリー言語を用いて目的のデ…

問題を解いてservlet、html、JSP、Beanの連動の仕組みを理解する

昨日解けなかった問題が完成しました! ソースを載せておきます。何かアドバイス等がございましたらお気軽にコメントいただければと思います(*・ω・*)【問題】checkBoxを3つ用意し、送信ボタンを押すと次の画面にて選んだ選択肢が表示 される。servlet、html、…

html,servlet,JSP,Beanの連携の仕組み

こんばんは。まみです。 また前回のブログ記事からしばらく時間が経ってしまいましたが更新します><先週オブジェクト指向の概念を一通り説明してもらって理解したところで、 現在はJavaを利用したwebアプリ(サーバーサイドJava技術を用いて作成したもの)…

オブジェクト指向の礎

おはようございます。まみです。 なんとか更新できた!出社前に記事更新!先週からスーパーエンジニアへのパスポート オブジェクト脳のつくり方オブジェクト脳のつくり方―Java・UML・EJBをマスターするための究極の基礎講座作者: 牛尾剛,長瀬嘉秀出版社/メー…

制限時間を設ける

あー昨日はブログ更新出来ずじまいでした>< 毎日更新することを目標に掲げているけどなかなか難しいなぁ。うぅ…今日のテーマは【制限時間を設ける】です。 分からないことはある程度悩んだら区切りをつけて質問しようということ。たとえば1問プログラミン…

復習で知識の定着を図る。

みなさんおはようございます。まみです(*・ω・*) 昨夜に引き続き今朝も復習ができ、理解度が深まり充実した日を送ることが出来ました。 昨日は仕事後に友達とご飯する約束をしていたのですが、仕事に熱中して時間を意識していなかったためにすっとぼかしてしま…

技術ブログはじめました。

c#

いろいろな人から触発され、プログラミングに関して学んだことを記録していくことにしました。 ブログを始めた目的 日々学んだことを整理して記述することで復習に役立てる コードレビューやアドバイスをいただける事を期待 井の中の蛙大海を知らず状態を避…