Tag cssを表示しています。
2017.12.8 金
正直このアイコンがどこまで使えるかという問題があるはあるんですが、Font AwesomeはWebページで使われる典型的なアイコンを文字として扱うことができるサービスです。コーディングするときには、 <img src="icon.png"> と書く必要がなくなり、 <i class="fa fa-tasks fa-lg"></i> という感じでクラスの指定だけでいける。 CSSを読み込むだけで使えるのでとてもいいです。依存関係までちゃんと見ていないのですが、最新のブラウザーではそこそこ使えるんじゃないかというところです。$60で有償版も使うことができます。買ってみようかな。 設定と準備 CDNを使う場合は、 <link href="https://m...
2017.7.18 火
Bootstrap概要 http://getbootstrap.com/ http://bootstrap3.cyberlab.info/ 細かいことはあまたあるBootstrap解説しているサイトを見てみてください。ここではプラクティスだけにしてます。 Bootstrapをダウンロードして使うわけですがCDNもあるので開発途上ではそれを使った方が便利です。 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3....
2017.5.14 日
というとflexboxになるのかという話ですが、Github時代にこんな面倒くさいプロパティ使いたくない方にはこれ。 https://github.com/jh3y/driveway ZIPでダウンロードするかクローンしてくる。 ブロックをタイル状に並べてくれるやつです。 driveway demo ZIPを解凍したら問題がなければdist/driveway.min.cssを使えばOKかと思います。もしミニマライズされていないものを使いたいときは、driveway.cssを使います。 コンテナ 全体はこれで囲ってやる。dwクラス自体は幅100%です。 <div class="dw"></div> パネル パネルでいっぱい並べる。 <div class="dw"&...
2017.1.25 水
BEM METHODOLOGY DOCUMENTATION BEMによるフロントエンドの設計 お前の考えたルールなど穴だらけだ!というスローガンの元行われているわけではないのですが、自由度の高いHTML/CSSコーディングの中である一定のルールを作ってゆこうというプロジェクトというか啓蒙というか宗教というかそういうものになっています。システム側のいわゆるプログラミングではここ最近はいいフレームワークもあるしそこそこルールかが可能だったりするんですが、コーディングに至ってはカオス。
2017.1.4 水
ブロック要素にfloatをかけるとCSSでは高さが消滅します。試しにbackgroundに何らかの色をつけても効かないし、Developerツール辺りでそこらをわさわさしてもマーキングされません。なので基本的にはそのfloat要素と隣接する他の要素にも影響してmarginが効かなくなります。marginはある一定量の大きさに対してmarginを指定するので、高さのない要素にも効かないということになっているようです。 floatを解除する方法は、 – でclearする方法 – < div>の空要素にclearする方法 – floatしている親要素にclearfixする方法 があります。どれも一長一短ですが、は基本的には使わない方がいいです。はHTML5...
2017.1.4 水
難しい話はさておいて、cssでviewポートと呼ばれる解像度の出力ができるようになったことから、スマホやPCのデザインを一枚のCSSで書くことができるようになりました。現実問題として2012年現在では普通にスマホ用とPC用のHTMLをかき分けた方が開発としても安定しているし工数も節約できます。が、時代の流れかどうかはわかりませんがアホな人々はこういう派手なアクションを好むというのもあって仕方なくやっている感じです。今一度いいますが、特にこれが優れたかっちょいい技術でもなんでもないんですよ。皆さん。 まずはHTMLのmetaタグにこれを入れます。 <meta name="viewport" content="width=device-width,initial-scale=1"> ...
2016.11.17 木
sassとcompassでコンパイルしてきたのですが、面倒なインストールや準備をしてなくてもいい統合ソフトのpreprosがいいみたいです。Preprosを使うならRubyやcompassの別途インストールは不要。 https://prepros.io/downloads Mac、Windows、Linuxとだいたいの環境で使えるのでとてもいいですね。 基本的な使い方 preprosを開いて、左のメニューにxxx.scssをドラッグ&ドロップすればOKです。そのままxxx.scssをエディタで開いて編集し保存するタイミングで自動的にコンパイルされます。デフォルトでのコンパイル先は、xxx.scssと同じ階層です。同時にprepros.cfgというconfigファイルも自動的に生成されます。こ...
2016.7.25 月
タブレットで見たとき右側が切れたりするときに使うやつ。結構便利。 PCとスマホとタブレットと3つのデザインを作るのが非常に面倒なので、タブレットのデザインをそのままPCのデザインで代用できます。 <script> var ua = navigator.userAgent; if(ua.indexOf('iPad') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') < 0)) { // タブレット document.write('<meta name="viewport" content="width=[PCの幅],user-scalable=no">'); }else...
2016.6.20 月
tableのcssはいつもコピペですみません。 table { margin: 10px 5px; border-top:1px solid #c1c1c1; border-left:1px solid #c1c1c1; border-spacing:0; background-color:#ffffff; empty-cells:show; } th { border-right:1px solid #c1c1c1; border-bottom:1px solid #c1c1c1; color:#383125; font-weight: normal; background-color:#efefef; /*background-position:left top;*/ padding:0...
2016.4.1 金
sassのインストール # gem install sass Fetching: sass-3.4.22.gem (100%) Successfully installed sass-3.4.22 Parsing documentation for sass-3.4.22 Installing ri documentation for sass-3.4.22 1 gem installed バージョン確認 # sass -v Sass 3.4.22 (Selective Steve) compassのインストール # gem install compass Compass is charityware. If you love it, please donate on our behalf ...
2016.3.20 日
サーバーサイドでも直接sassが使えないと結構不便ということで、インストールしてみた。 まずはrubyのインストール yum install -y ruby rubygems ruby-devel libffi-devel gcc gem install sass gem install ffi gem install compass これでいいっぽい。くそみたいに時間がかかる。
2016.3.16 水
ボタン類 <input type="button"> <input type="submit"> などの角丸をクリアしたい場合、 input[type="button"],input[type="submit"] { border-radius: 0; -webkit-appearance: none; } そうすれば、ボタンのデフォルトcssが初期化されます。
2016.3.7 月
border-radius ブロック要素に対して角丸ができます。 (IE9以降、Firefox4以降、Chrome5以降、Safari5以降、Opera11.5以降のみ) border: 3px green solid; border-radius: 5px; 各箇所を個別に丸くする border-top-left-radius: 5px; /* 左上 */ border-top-right-radius: 5px; /* 右上 */ border-bottom-left-radius: 5px; /* 左下 */ border-bottom-right-radius: 5px; /* 右下 */
2016.3.7 月
Device width PC 769px iPad 641px – 768px iPhone 320px – 640px CSS1個でやるときにはこんな感じ。 @media screen and (min-width:769px) { .... } @media screen and (min-width:641px) and (max-width: 768px) { .... } @media screen and (min-width:320px) and (max-width: 640px) { .... } CSSをわけるのだったら、こういう感じ。 @import url("https://saba.omnioo.com/assets/css/base.cs...
2016.3.6 日
preタグは改行できない仕組みになっているのですが、改行できないと困ってしまうときがあります。 white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ 公式的なスタイルになっていないのか、各ブラウザーに対して個別に書かないとダメです。
2016.3.6 日
アクセス時のbody幅とWindowを動的に伸び縮みさせたときのbody幅を取得します。これ使うとレスポンシブ対応のWEBデザインに比較的柔軟に対応できます。 静的には$(window).width()でそのまま取得できるのですが、動的にはこのままではダメでsetTimeout()を使って幅を取得するってところが面倒なのです。 $(function(){ // Window width default var egwidth = $(window).width(); console.log(egwidth); if (egwidth <= 640) { alert("スマホで見ている。"); } else if (egwidth > 640) { alert("PCで見ている。"...