一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 - kojika17
数カ月前に@suzukisan__が投稿された「Illustrator Unlimited Appearance - suzuki | JAYPEG」は、Illustratorのアピアランスを駆使して、1つのオブジェクトからカメラのアイコンを作るという、面白い試みをされていました。 アピアランスの可能性を示す、インパクトのある内容であったため、記憶に残っている方もいることでしょう。 このアイコンが投稿されてから時間がたっていますが、HTMLとCSSに分解されるイメージが自然に湧いてきたので、少しばかりのHTMLとCSSでアイコンを模写してみました。 HTML と CSS で作ったカメラアイコン 模写したカメラアイコンは、Internet Explorer 10以上 や、最新のChrome, Firefoxなどであれば表示されるはずです。 こちらがHTMLとCSSで書いたものになります。 ソ
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
IBM Related Japanese technical documents - Code Patterns, Learning Path, Tutorials, etc. Please open new issue/pull requests in either English or Japanese if you would have any feedback or you would like to contribute this repo. We provide mainly "Japanese contents" by markdown text. IBM Developerの最新情報は https://developer.ibm.com/ にアクセスし、英語のコンテンツを参照してください。 このリポジトリは、IBM Developer Japan Webサイトで公開していた
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
CSS3のWebフォントを使ってみよう
CSS3のWebフォント機能は、サーバー上にあるフォントを利用するもので、ユーザーの閲覧環境に依存しません。使用したいフォントファイルをサーバーにアップロードし、CSSで読み込ませるだけで利用できるので、フォントの選択肢が広がります。 これまでテキストを画像化して表現していたWebのタイポグラフィも、Webフォントを使って自由に表現できるわけです。テキストなので、選択やコピー＆ペーストも可能、SEOにも有効です。もちろん、font-sizeやcolor、text-shadowなどのCSSプロパティも適用できます。 主要なブラウザは、既にWebフォントに対応しているので、少しの工夫ですぐに利用できます。ただし、フォント形式やライセンスなど、利用に際してはちょっとした注意が必要です。本稿では、これら注意点を踏まえてWebフォントの利用方法を紹介します。 Webフォントの利用方法 では早速Web
CSSの初期化ファイル | d-spica
CSSの初期化ファイル 2008-05-31 0 0 XHTML/CSS CSS 以前， CSSの初期化 というエントリを書きました。あれからいろいろと試行錯誤し，初期化ファイルがずいぶん変わってきましたので，改めて今ぼくが使っている最新のファイルを紹介したいと思います。 default.css 以下からご覧いただけます。 default.css このファイルは次のような目的で作っています。 各ブラウザが持つデフォルトのCSSをリセットして，レンダリングの違いを解消する。 サイトやページによって書き換えることがほとんどない，基本的な設定を行う。 コーディングが分かりやすくなる初期値を指定しておく。 このファイルをあらゆるサイトで使い回せるようにしておくわけです。 リセット /* Reset */ body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, d
スタイルシートを分けて管理する方法をまとめる - 2xup.org
to css 2006-10-17T21:15:00+09:00 スタイルシートを書く時のガイドラインでは、セットフォーマットルールや、プロパティの出現順序についてまとめました。そちらで用意したガイドラインだけでも、簡単な管理は可能なのですが、現在、2xup のリニューアルを進めていて、ちょうど各々用意した CSS の分割をどのように整えていこうかと考えていました。今回はそのリニューアル作業の一環として、サイトで管理する CSS ファイルをどのように分けるか、現状の考えをメモすることにしてみました。リニューアルをきっかけにまとめましたが、この方法はスタイルを適用する HTML がどんなものか。また、目的によってファイルの数は若干変化する可能性はありますが、この分け方や構成は様々なサイトで流用できるのではないかと考えています。 スタイルシートを分ける理由 スタイルシートを分けて管理する理由と
[CSS]実例から学ぶCSS3の効果的な使い方
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
