セマンティックWEB

Remind セマンティック 要素を、視覚的な見え方ではなく、その意味に基づいて用いる。SEOのためにも重要。 きちんとした構造化を意識してマークアップ リッチスニペット 参考サイト:リッチスニペット googleリッチスニペット 場所としては、googleなどで検索…

議事録のまとめかた

議事録のまとめかた 基本情報を入力する 会議の名称 開始日時 終了日時 開催場所 参加者 5W1Hで要件まとめ。 箇条書きでも問題ない! 各自の宿題みたいなものも書いておくとあれ、これすすんでないの? ってならなくて済むからよい。 事実のみを書く 結局、…

UI designPettern

UI designPettern サーバー側に関わると、できれば良いなーっておもうけど、やりたい! ってあんまりおもえなくて笑 結局皆に触ってもらえる見た目側作る方が個人的にいいなと。 ただ、とはいえ何か秀でた知識もなく凡人レベル。 なんとかしないとーって日々…

git 鍵

git 鍵 Git Labとの接続方法 PuTTYをInstall PuTTYDownload(PuTTYgenを!) 鍵の作成(プログレスバーが動いている間マウス動かす) 鍵を保存(C直下とか ex. sshフォルダを作成し、公開鍵と秘密鍵を保存) Git LabのSSHキー保存のところに保存する SoursTreeをDo…

@keyframes cssアニメーション

@keyframes * IE10以上しか使えない アニメーション作成時に使用する animationの細かい設定(拡大のパーセント、回転の角度とか)が設定できるみたい。 アニメーション中のキーフレームと呼ばれる任意の点ごとにCSSのプロパティ値を指定することで、Transitio…

excel の ヘッダー一括せっていをやってみた

excelを使う機会が頻繁にあったので。 ヘッダーをね、一気に消したい!みたいなのがあって。 wordだと、一つ直せば全部が簡単に治るんだけど、エクセルはシートが違ったりで。 こちらのサイトが参考になりました 一気にシートを選択、そしてページレイアウト…

ロゴつくってみたり?

Logoを作ってみようとおもって。 こんばんは。 何か作ったり、表現したりってことを全然してなくて。 ロゴでも作ってみよっかなとおもいました。 あ、でも作り方がわからなくて笑 Photoshopとかillustratorが使えないとかじゃなくて、とっかかりが分からない…

tooltip button とかプラグインとか使い方の つかえるサイト

Tooltip とか button とかの参考によさそうなまとめサイト まとめサイトの紹介、というか一応bookmarkはしたけどもし誰かのためにもなればみたいな。 私のgoogleはmuzliってやつ使ってるんだけど、 毎日きれいなサイト見てたらなんか感性磨かれそうかなみた…

<button></button> を詳しく

Buttonを作ってみた buttonに利用できそうなプロパティ(使ってたやつ) transition 時間的変化をまとめて指定する transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値の順 .sample { background-color:bl…

photoshop とデザインのべんきょう

Photoshop こんなのもしらなかった 恥。 こんばんは。 こんな何気ない、たいした事(私にとっては重要な内容なんだけど)書いてない記事を ちらちらでも見てくれてる人がいるってうれしいモノだね笑 同じような境遇の人にさ、何か刺されば良いなーとかおもって…

background  新?機能

backgroundについて新しく知ったこと まず、基本的なところでいくとbackground1つで、 * background-color * background-image * background-repeat * background-attachment * background-position これがまとめてかけちゃう! たとえば、こんな感じに。`ba…

Sassの詳しい部分

&:hover でhover時のスタイルが充てられる。 .body { background-color: pink; .arm { color: red; &:hover{ color: red; } } } こんな感じに。 もちろん、afterとかvisitedとかも使える。いちいち書かなくてもいいし、何より見やすい。 そして、計算もでき…

Sass をさわってみた。

メタ言語「それのみでは意味をなさない。言語を定義するための言語」 例: cssのメタ言語はsass=Sassという言語で記述したファイルをコンパイルして、CSSファイルを生成する Sass(現在の主流はsassのなかでもscssのほう)に関してのサイトは結構あったよ。 (昔…

JavaScript 配列Array indexOf join

JavaScriptの配列利用 今回使った背景、、、があれば伝わりやすいのかなとおもい。 ツールチップを使って、一行にはまりきらなかった内容を全て出すようにした。 文字数オーバーの時は...を表示して、そこをマウスオーバーすると、ツールチップが出るイメー…

jQueryの引数利用とページネーション

jQueryの引数利用とページネーション 引数ってって話。 この方のが分かりやすかった。引数 $(function(){ $(body).on("moutover",function(){ $(this).css("color","red"); }); }); 簡単に今日やったコード書いてみよっと。 ページネーションを作成していま…

Chromeの便利機能発見!!

Chromeの便利機能発見!! ついつい間隔が空いてしまう。。。 よさそうな、いや、便利なchromeの拡張機能があったので紹介。 実際にこれらは使ってます! Anywhere Translation 翻訳してくれるやつ。google翻訳とかいろいろ飛ばなくてもいいって、手間が省け…

もう一度、positionについて 【css】

CODEPEN こまごました部分をこれ使いながら作ってます。 JsFiddleこっちもあるんだけど、個人的にはRunとか幼くていいから前者推奨w そして、いつになってもpositionプロパティが覚えられなくて。 最初はmarginとpaddingに苦戦 See the Pen gbXLLK by megum…

【css】擬似要素 擬似クラス つかってみたら

擬似要素(クラス) 結構避けてきてた部分ではあったけど、調べてみると 使わずにはいれないなーと。 まずは、デモ 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…

css3の勉強によさげ サイトの紹介!

Codrops | Useful resources and inspiration for creative minds 英語のサイトですー!必要に応じてプロパティ覚えるのも良いんだけど、やっぱり自分の中でのストックは多い方が良い。どんなアニメーションができるとか、できないとか。1にデザイン、2にマ…

opacity css3の透過って?

透過(opacity)を知ったよ 透過ってなんだろうという部分から。 全然難しくなかった。ただ、要素を透明にしていくために使うみたい。 border、padding、background、img、テキスト、他のプロパティ この辺りに利用できるよ。 設定の方法 いくつかあるらしい。…

メディアクエリ とは

メディアクエリ 今更ながらメディアクエリとは何?っておもって。 単に業務系の管理画面しか作ってないと、使わないもん。 (言い訳w) という事で、なんか良さげなサイトから拝借使用とおもったのだけど。 まあ、そもそもメディアクエリを知るきっかけになっ…

0から1を作ることって、むずかしい。

こんばんは。 この2日間(ガッツリじゃない)で一応サイトという物を作ってみたの。 大層な物ではないけど、インプットばかりしても成長はしない気がして。 残念ながらサーバーには(まだ)あげてないので、キャプチャのみで。 ちょっと気になった部分とか、今後…

OPG とは?? ちょっと流行おくれかも。

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>

css の position に関して どう影響するか

static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されず、初期値に配置します。 absolute 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が…

コーダー、デザイナーとしての情報収集

今日は、何か記事を書きたいなとおもって。 休日だから仕事関連ではないけどグノシーでとんできた記事をまとめてみようかな。 あ、私の一日とか書いてみよう。 もしかしたら見てくれる人がいるかもしれない笑 出勤時はfeedly これで結構購読してるからぱぱっ…

JavaScript の基礎の基礎

JavaScript の基礎の基礎 なーんか忘れそうだったのでメモめも。 クラスの定義 function ClassName(){ this.e = 1; this.COUNT = 10; } メソッドを定義 ClassName.propaty.method1 = function () { } this とは何ぞ function className(){ this.a = 1; } Cla…

Java 文字列結合 と ソート順

Javaをやってみた まずはコードを。これだけだと再利用できるかは不明だけど。 型にとにかく手こずった。 今日の課題は、 ソート順をIDの昇順にすること 文字列(リスト配列)を,区切りで一列で出力 public class UserComparator implements Comparator<User>{ @Ove</user>…

Javascript 引数(ちょー基礎)

Javascript 関数(基礎) さて、自分で関数作ったり、変数として~みたいなことができなかったので ちょっと調べてみた。 関数の基礎 このサイトはよかった。とはいえ、検索して上のほうにヒットしたから見ただけ。 ほんとに簡単なことで、 ‘function aa( ){ a…

jQueryで文字列末尾省略 + ...表示

jQueryで文字列末尾省略 + ...表示 jQuery 例 このサイトにお世話になった。 書き方としては、これが簡単だった。 今回は、・・・の部分にカーソルを合わせると省略した部分が出るようにしたかった。 以前使った、tooltipsterこれを利用。 afterTxt…の部分を<span class="sss"></span>…

CSSの構造化 アーキテクチャ

css このサイトが結構面白かったので、まとめてみる。 css が肥大化する理由TOP5 float が多くなるのは、グリッドが存在しないか、効果的に機能していない。 margin が多くなる場合は、reset.css (または normalize.css) が必要。 padding が多くなるのは、…