タグ

htmlとWebデザインに関するtanisukeのブックマーク (9)

  • CSSのみで実装するボタンデザインやホバーエフェクト 20+α - NxWorld

    実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ

    CSSのみで実装するボタンデザインやホバーエフェクト 20+α - NxWorld
  • これはウェブページです。

    たいしたページではありません。 あるのは言葉だけ。 それをあなたは読んでいます。 オシャレなデザインや、レスポンシブなレイアウト、魔法のようなスクリプトに私たちは魅了されてしまいました。 でも、ウェブで一番強力な道具は、今も昔も言葉です。 私が書いた言葉を、あなたが読んでいる。これこそ魔法です。 私はブリティッシュコロンビア州の小さな都市にいますが、あなたは別のどこかにいることでしょう。私は2013年6月20日の早朝にこれを書きましたが、あなたは違う日時にこれを読んでいることでしょう。私はノートパソコンでこれを書きましたが、あなたは携帯電話でこれを読んでいるかもしれないし、タブレット端末やデスクトップ端末で読んでいるかもしれません。 私とあなたがこうして繋がることができたのは、私が書いた言葉をあなたが読んでいるからです。ウェブとはそういうものです。場所や端末、タイムゾーンが違っても、このシ

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • 携帯サイト(html)の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α

    「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ

  • 角丸テーブル簡単作成ツール

    角の丸いテーブルの作成ツール。 画像あり、画像なしのパターンを選択でき、 角のデザインなども自由にカスタマイズできます。 [ 画像あり版 - 画像なし版 ]

  • HTMLのインデントをキレイにしてくれるWEBサービス「Ham Cutlet」

    HTMLを書いていて、心がけていても時間に追われているとだんだんと乱れてきて、インデントされていなかったり、ルールがバラバラなソースになってしまうなんてことも多いと思いますが、今日紹介するのはHTMLのインデントをキレイにしてくれるWEBサービス「Ham Cutlet」です。 利用方法は非常に簡単で、WEB上で、HTMLをコピペ、その後設置されている「COOK!ボタン」をクリック。これだけです。 詳しくは以下 このサービスにはHamlというHTML/XHTMLを生成するためのマークアップ言語が使われているみたいで、「HTML → 一旦hamlにする → HTMLに戻す」という流れでインデントの整頓を実現しているとのこと。hamlに興味のある方は「日Hamlの会」もどうぞ。 実際、インデントが無くても問題なく、動作しますし、整ったからと言ってオモテ面に影響があるわけでないのですが、メンテナ

    HTMLのインデントをキレイにしてくれるWEBサービス「Ham Cutlet」
  • CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集 - かちびと.net

    cssHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション webkit系でもmozでもIEでもcssのみでグラデーションを実装。 Cross-Browser CSS Gradient ハック、テーブルも使用しないドロップダウンメニュー シンプルなドロップダウンメ

  • Web Design Library(ウェブデザインライブラリー) ―ウェブクリエーター向けの情報サイト

    ラブコメプリンスのパクソジュンに釘付けの日々 韓国のイケメン人気俳優といえば、パク・ソジュン! 2020年に大ヒットした韓国ドラマ『梨泰院クラス』の主演で、更に人気は加速しましたよね。 私も『梨泰院クラス』視聴前から彼の作品は見ていたのですが、どんな役柄でもこなせてしまうなと 強く逞しく 不合理な世界に正面から立ち向かう 血気盛んな若者の反乱 なパク・セロイ(パク・ソジュン)を夢中になって見ていました。 『愛の不時着』と並び日でも多くの方が視聴されたと思います。 特に『梨泰院クラス』は『愛の不時着』と比べてロマンス色が薄く緻密なビジネスプランなども要素に盛り込まれていたので、男性からも人気の作品でした。 他にも彼の出る作品出る作品がヒットを飛ばしています。 2014年:魔女の恋愛 2015年:彼女はキレイだった 2016年: 花郎<ファラン> 2017年:サム、マイウェイ~恋の一発逆転!

    Web Design Library(ウェブデザインライブラリー) ―ウェブクリエーター向けの情報サイト
  • http://www.designwalker.com/2009/03/form-design-2.html

    http://www.designwalker.com/2009/03/form-design-2.html
  • 1