2015-01-01から1年間の記事一覧
Logoを作ってみようとおもって。 こんばんは。 何か作ったり、表現したりってことを全然してなくて。 ロゴでも作ってみよっかなとおもいました。 あ、でも作り方がわからなくて笑 Photoshopとかillustratorが使えないとかじゃなくて、とっかかりが分からない…
Tooltip とか button とかの参考によさそうなまとめサイト まとめサイトの紹介、というか一応bookmarkはしたけどもし誰かのためにもなればみたいな。 私のgoogleはmuzliってやつ使ってるんだけど、 毎日きれいなサイト見てたらなんか感性磨かれそうかなみた…
Buttonを作ってみた buttonに利用できそうなプロパティ(使ってたやつ) transition 時間的変化をまとめて指定する transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値の順 .sample { background-color:bl…
Photoshop こんなのもしらなかった 恥。 こんばんは。 こんな何気ない、たいした事(私にとっては重要な内容なんだけど)書いてない記事を ちらちらでも見てくれてる人がいるってうれしいモノだね笑 同じような境遇の人にさ、何か刺されば良いなーとかおもって…
backgroundについて新しく知ったこと まず、基本的なところでいくとbackground1つで、 * background-color * background-image * background-repeat * background-attachment * background-position これがまとめてかけちゃう！ たとえば、こんな感じに。`ba…
&:hover でhover時のスタイルが充てられる。 .body { background-color: pink; .arm { color: red; &:hover{ color: red; } } } こんな感じに。 もちろん、afterとかvisitedとかも使える。いちいち書かなくてもいいし、何より見やすい。 そして、計算もでき…
メタ言語「それのみでは意味をなさない。言語を定義するための言語」 例: cssのメタ言語はsass=Sassという言語で記述したファイルをコンパイルして、CSSファイルを生成する Sass(現在の主流はsassのなかでもscssのほう)に関してのサイトは結構あったよ。 (昔…
JavaScriptの配列利用 今回使った背景、、、があれば伝わりやすいのかなとおもい。 ツールチップを使って、一行にはまりきらなかった内容を全て出すようにした。 文字数オーバーの時は...を表示して、そこをマウスオーバーすると、ツールチップが出るイメー…
jQueryの引数利用とページネーション 引数ってって話。 この方のが分かりやすかった。引数 $(function(){ $(body).on("moutover",function(){ $(this).css("color","red"); }); }); 簡単に今日やったコード書いてみよっと。 ページネーションを作成していま…
Chromeの便利機能発見！！ ついつい間隔が空いてしまう。。。 よさそうな、いや、便利なchromeの拡張機能があったので紹介。 実際にこれらは使ってます！ Anywhere Translation 翻訳してくれるやつ。google翻訳とかいろいろ飛ばなくてもいいって、手間が省け…
CODEPEN こまごました部分をこれ使いながら作ってます。 JsFiddleこっちもあるんだけど、個人的にはRunとか幼くていいから前者推奨ｗ そして、いつになってもpositionプロパティが覚えられなくて。 最初はmarginとpaddingに苦戦 See the Pen gbXLLK by megum…
擬似要素(クラス) 結構避けてきてた部分ではあったけど、調べてみると 使わずにはいれないなーと。 まずは、デモ HTML <ul> <li>Home</li> <li>About</li> <li>Music</li> </ul> CSS li { list-style: none; display: inline; } li + li:before { content: " →"; } そうすると、 Home→About→Music…
Codrops | Useful resources and inspiration for creative minds 英語のサイトですー！必要に応じてプロパティ覚えるのも良いんだけど、やっぱり自分の中でのストックは多い方が良い。どんなアニメーションができるとか、できないとか。1にデザイン、2にマ…
透過(opacity)を知ったよ 透過ってなんだろうという部分から。 全然難しくなかった。ただ、要素を透明にしていくために使うみたい。 border、padding、background、img、テキスト、他のプロパティ この辺りに利用できるよ。 設定の方法 いくつかあるらしい。…
メディアクエリ 今更ながらメディアクエリとは何？っておもって。 単に業務系の管理画面しか作ってないと、使わないもん。 (言い訳w) という事で、なんか良さげなサイトから拝借使用とおもったのだけど。 まあ、そもそもメディアクエリを知るきっかけになっ…
こんばんは。 この2日間(ガッツリじゃない)で一応サイトという物を作ってみたの。 大層な物ではないけど、インプットばかりしても成長はしない気がして。 残念ながらサーバーには(まだ)あげてないので、キャプチャのみで。 ちょっと気になった部分とか、今後…
OPG とは 結構昔からあったようだけど、今日初耳だったのでメモ。 いわゆるシェアボタンをクリックしたときに表示される部分みたい。 たとえば <html xmlns:og="http://ogp.me/ns#"> <head> <title>はてなダイアリー</title> <meta property="og:title" content="Iaaa"> <meta property="og:type" content="blog"> <meta property="og:description" content="aaa"> </meta></meta></meta></head></html>
static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されず、初期値に配置します。 absolute 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が…
今日は、何か記事を書きたいなとおもって。 休日だから仕事関連ではないけどグノシーでとんできた記事をまとめてみようかな。 あ、私の一日とか書いてみよう。 もしかしたら見てくれる人がいるかもしれない笑 出勤時はfeedly これで結構購読してるからぱぱっ…
JavaScript の基礎の基礎 なーんか忘れそうだったのでメモめも。 クラスの定義 function ClassName(){ this.e = 1; this.COUNT = 10; } メソッドを定義 ClassName.propaty.method1 = function () { } this とは何ぞ function className(){ this.a = 1; } Cla…
Javaをやってみた まずはコードを。これだけだと再利用できるかは不明だけど。 型にとにかく手こずった。 今日の課題は、 ソート順をIDの昇順にすること 文字列(リスト配列)を，区切りで一列で出力 public class UserComparator implements Comparator<User>{ @Ove</user>…
Javascript 関数(基礎) さて、自分で関数作ったり、変数として～みたいなことができなかったので ちょっと調べてみた。 関数の基礎 このサイトはよかった。とはいえ、検索して上のほうにヒットしたから見ただけ。 ほんとに簡単なことで、 ‘function aa( ){ a…
jQueryで文字列末尾省略 ＋ ...表示 jQuery 例 このサイトにお世話になった。 書き方としては、これが簡単だった。 今回は、・・・の部分にカーソルを合わせると省略した部分が出るようにしたかった。 以前使った、tooltipsterこれを利用。 afterTxt…の部分を<span class="sss"></span>…
css このサイトが結構面白かったので、まとめてみる。 css が肥大化する理由TOP5 float が多くなるのは、グリッドが存在しないか、効果的に機能していない。 margin が多くなる場合は、reset.css (または normalize.css) が必要。 padding が多くなるのは、…
OOCSS ocss 文書 構造と見た目の分離 コンテナとコンテンツを分離 例： cssの設計をするにあたって 設計 BEMも使ってみよう このサイトいいかも 文字でもまとめとく。 BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当…
今日悩んでたけど、 ぜんっぜん難しくない話 まずは、例を紹介。例ってほどのものでもないか。 <div class="a aa"></div> これに、スタイルを当てたい場合、 優先順位を考えると .a { width:100px; height: 50px; background-color: pink ; } div .aa{ background-color: red; } →.a…
jQueryでcookie保存 結構簡単にできるはず. どの部分に書くかが問題だったりするけど 保存するとき $.cookie("KEY", "VALUE", { expires: 7 }); expiresはcookieの保存期間の日数を入れる 値をとりだすとき $.cookie("キー"); cookieメソッドで利用できるパ…
不要な type 属性は含めないように HTML5 では、script 要素、style 要素に対する、type 属性は不要です。HTML5 においては、script 要素 の場合、type 属性のデフォルト値として 「text/javascript」 が、style 要素の場合は 「text/css」 がセットされます…
css３で覚えた新しいクラス pointer-events :none ドラッグを禁止 opacity:none 要素の透明度を指定 letter-spacing: 文字の間隔 三角形の作り方 <div class="a"></div> <style> .a { width: 0; border: 80px solid transparent; border-top: 80px solid pink; } </style>
MarkDownの書き方 テーブルの記述方法は|と– * :—で左寄せ:—:でセンター—:で右寄せになります。 Left align Right align Center align This This This column column column will will will be be be left right center aligned aligned aligned リンクで使…
