2014-01-01から1年間の記事一覧
テストサーバーでいつものようにチェックしようとして、ファイルが見つけられず & フォルダーごと見つけられなくなりました。 HDには実際フォルダーもファイルもがあるのに。 .htaccess が保存されてないか疑ってみる Macではフォルダ内に存在しても、「.」…
Tiny PNG PNG 700×700の画像で500KBにもなる。 圧縮したら半分くらいに。JPG程の軽さでないにしろ、容量は現実的になると思う。 劣化は少なく感じました。
ドメインを考えています、で独自URLを作ったとき、 ドメインサービスや、同じサーバーってつくネームサーバーとレンタルサーバーやくわりはなにか？を、メモしました。 利用したドメインサービス:ムームードメイン 利用したネームサーバー:ムームードメイン …
参考 チュートリアルから： フィルターを使った方法 写真をイラスト風に加工する 調整レイヤーをつかった方法 Photoshopで写真をレトロに加工する
トップレベルドメインをえらぶ .comがわりと使われていて、ポピュラーなものを好む日本国内にはこれでOK。 一般的に使われるもの .com (一般的に使われる)※commercialが語源 .net (ネットワーク関係 会社や個人もOK) .org (非営利団体・一般的に使われる) .i…
画面サイズから、スタイルシートのふりわけする。 こちらがDEMO @media screen(){...} @media screen and (max-width: 1000px) {...} @media screen and (max-width: 760px) {...} @media screen and (max-width: 480px) {...} @media screen and (max-width…
画面サイズから、スタイルシートのふりわけする。 こちらがDEMO @media screen(){...} @media screen and (max-width: 1000px) {...} @media screen and (max-width: 760px) {...} @media screen and (max-width: 480px) {...} @media screen and (max-width…
index.htmlの、スタイルシートへのリンクを、 編集のために、bootstrap.min.cssから、bootstrap.cssへ DEMOはこちらコードは多くて煩雑だけれども、通常の方法で、CSSをカスタマイズできる。
コードの追加 追加とカスタマイズ コードの追加 前回のナビバーと、ナビを置き換えてみる。 <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> コードの入れ替えを行う 入れ替え結果 jumbotron 追加とカスタマイズ jumbotoronのデフォルトコード コードを追加 <div class="jumbotron"> <h1>He…</h1></div>
BootStrap ファイルのダウンロード index.html ファイルの作成 コードの追加 ファイルのダウンロード Bootstrap3.2.0 Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included. (LESSからコンパイルされたCSSファ…
heightに100%を指定しても反映されない widthの100%は、ウィンドウサイズ、または親要素のサイズによる。 heightの場合は？ heightも親要素による。 だけど、ウィンドウサイズの場合、htmlとbodyに100%を指定する。 body直下のブロック要素のとき <html> <body> <div></div> のばあ</body></html>…
ADD RUBYで一気にルビ作成 WORDでのルビ振り手作業を、外部サービスにおきかえます。 Add Ruby WORDでの修正 WORDにはりつけた結果です。ルビが入りました。 ここから、書体や読み間違いを修正していきます。 部分で修正する場合 書式→拡張書式→ルビを開きま…
google feed api のつかいかた。 Headの中にいれる。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> //Google Feed Api google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://d.hatena.ne.jp/hagiwarafarm/rss");//ブログのフィード fe…
埋め込むカレンダーの色を変えてサイトに合わせるには。 phpファイルを呼び出して色を変える方法 googleカレンダーの埋め込みコードを取得する 尚、カレンダーを作成した時点で、共有設定しておくのを忘れずに・・・ gcalendar-wrapper.phpをダウンロード、…
1.人々に焦点を当てろ――彼らの生活、彼らの仕事、彼らの夢に 2.すべてはミリセカンド単位で数えろ 3.シンプルにすると強力になる 4.初心者ユーザーを引き込み、上級者ユーザーを魅了しろ 5.革新に挑め 6.世界に通用するデザインを 7.今日と明日のビジネスの…
Photoshopの行送りとCSSのline-heightの変換 行送りとは 文字の大きさ+次の段までの間隔を足した値 段の始まりから、次の段までの長さ この例では、 行送り30px 文字サイズ18px 行間隔12px line-heightへ変換する 行送り÷文字サイズ = line-heightになる P{ …
設定ファイルを初期化する。 起動しない時もまずはこれで対処。 使ってるうちに、ゴミがたまってる。 もしくは共用してると、変更されてる機能もよくわからないので、初期化するといいです。起動時に、(Mac)Command + option + shift 初期化されるもの 一例…
letter-spacing 1文字の後の、次の文字までの間隔。 値 normal または数値+単位(emやpx) .normal{ letter-spacing: normal; } .hiroi{ letter-spacing: 2em; } //*マイナスも有効*// .semainasu1{ letter-spacing: -0.2em; } .semainasu2{ letter-spacing: -…
PC ノートPC 1366×768 1280 x 1024 1024 x 768 デスクトップ imac fullHD 1920×1080 まとめ PC "紙面"の幅はせいぜい1000pxが妥当なところと思います。 まとまりを感じられる、文章の段落、はせいぜい760px。 ディスプレイはハイビジョンで見れるくらいどん…
レイヤーマスクの役割 まわりを覆って 部分を強調する どの部分を使うか元の画像 白黒画像をレイヤーマスクにする レイヤーはX色の塗りつぶし X色で描画 今回は白。 画像を重ねる 上の白で描画した画像 スクリーンもしくはオーバーレイ 白が強調される。 今…
firefox検索プラグイン 自作ではないです。 Firefoxの検索枠から翻訳できるツールバーをインストールしました。 しおしおプログラマ～の日常 - ブラウザ 検索プラグイン 手順 上記ページをブラウザで開いて、リンクをクリックすると、検索ツールバーに翻訳機…
タブで開くメニューを作成しました DEMOはこちらです スクリプト部分 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script> <script> $(function(){ $("#tabMenu li a").on("click", function() { $("#tabBoxes div").hide(); $($(this).attr("href")).fadeToggle("slow"); //slowもしくはfast }); return f…
DEMOはこちらです スクリプト部分 slideToggle("fast")や、"slow" など。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script> <script> $(function(){ $("#acMenu dt").on("click", function() { $(this).next().slideToggle(); }); }); </script> html部分 dtをクリックすると、ddが開く。
htmlだけでは、ただのテキストファイル(文字だけのファイル) ほかのファイルを呼びこんで、ブラウザに表示させます。 HTMLでできること 作る人の基本はHTMLです。文書を意味付けします。 HTMLの機能のひとつに、リンクがあります。 →ページ間を飛ぶほか、プ…
見る人・作る人・置き場所 作りたい人がいれば、見る人もいます。 見る環境をユーザーエージェントとも言います。 見る環境は人も国も、デバイスも、いろいろです。 だれかがWEBサイトを見てる時 関係性が生まれます。 見る人→ ユーザー ファイルの置き場所→…
DEMOはこちらです Keyword % em pxxx-large172.8% 1.728em 27.6pxx-large 144.0%1.440em23.0px large 120% 1.200em19.2pxmedium 100% 1.0em 16.0pxsmall 80% 0.800em12.8px x-small 64% 0.640em 10.2pxxx-small 51.2% 0.512em8.2px
別にきまりなんかないそうです。 そろっている→ 整頓 バラバラ→ 開放 ページ物は、そろっている部分と、そろってない部分を持たせると、統一感&ページの差ができる。 有効につかう 空きによって印象が大幅に変わる。 ムダじゃない。 ただの空きじゃない。 今…
今回はデバイスのサイズを取得するviewport - 思い描いたものを表現するための みためやらプログラムのつづきです。 DEMOはこちら <meta name="viewport" content="width=device-width; " /> デバイスのサイズを取得させる スマートフォンの画面で、WEBページを表示する時 擬似的に縮小して表示されてしまうから→ちい</meta>…
PC、スマホ、タブレット。 見る環境で、スタイルを限定出来るのがメディアクエリ(CSS3)。 以前はCSS2のmedia="screen,print" さらに、拡張ができるようになった。DEMOはこちら @media タイプ and (限定条件){ /*スタイル*/ } htmlは基本構造で作成しました c…
好きな色をカラーピッカーで選び、 そこから背景色とアクセントを考えてみました。 面の占める割合 基本色25% （割と広い) アクセント5% 背景色70% (かなり広い) 基本色→好きな色 印象から選びました 明度は低めにする 基本色は"濃い色" 白文字が乗ると文字…
