https://www.ituore.com/entry/html-css-basic
Hail2u
Hail2uは、幅広い話題の記事や、おすすめのウェブページ、読んだ本などを公開している、ながしまきょう(hail2u)の個人ウェブサイトです。CSSや、HTML、ウェブ標準についての話題が多く、JavaScriptやサーバーサイドの話がそれに続きます。近年は特に話題を限定せずにいろいろ書いています。 最近の雑多な記録 古い記事は直感的に古いことがわかると良い。 涼しくなってきたので、寒くならないうちに墓参りに行く。 5000mAhだと災害時に足りないと思うようになり、20000mAhのモバイル・バッテリーに買い替える。 新宿の行ったことがない博物館を覗きに行く。 今回の定期リリースの目玉はcalc-size()関数やinterpolate-sizeプロパティーが定義され始めたValues and Units ModuleのLevel 5だ。 Surface Pro 6の充電に使っていたCI
画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
いろんなパンくずリストを画像を使わずに CSS で再現してみた。 - buena suerte!
CSS Triangle を使ったパンくずリストを見てて、この方法だと単色はともかく、グラデーションかけたい時、ボーダーで作った三角がネックでうまくいかないだろうなっておもった。 参考記事：Breadcrumb Navigation with CSS Triangles | CSS-Tricks 前回、 iPhone Buttons を再現した際に使った方法でグラデーションかけられそうなので試してみた。 オリジナルの詳しい解説は既にコリスさんにありますので割愛。 大分書き進めた後に気づいたけど、コメントにあった span を使う方法のがパッと見簡単やないかな……こっち使うほうがいいかもしれんね…… 動作確認 Chrome(7.0.517.41) で確認。もしかすると、ウィンドウ幅が小さいと崩れるかも。横幅 1024px で最大化して確認してます。 同じ webkit の Safari でも
Beautiful Forms - Design, Style, & make it work with PHP & Ajax | The Jotform Blog
Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms. Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the nee
Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス
2017年6月29日 Webサイト制作, Webデザイン 最近会社でFacebookページを作成する事があり、楽しくてすっかりハマってしまったManaです。そのノリでここWebクリエイターボックスのFacebookページも作ってみました。そこで、Facebookページ作成中に役にたったコードやプラグイン・サイトを紹介します。 ↑私が10年以上利用している会計ソフト！ ※これは2010年に書かれた古い記事です。更新記事「Facebookページの作り方 2012年1月版」をご覧ください。 Facebookページのカスタマイズ概要 Facebookページの基本的な作成手順についてはかちびと.netさんが詳しく解説しています。なので、ここではFacebookページをHTMLやCSSでカスタマイズできるFBMLというアプリケーションやその他のプラグインを使った、もう少し踏み込んだFacebookペー
ProCSSor - Advanced CSS Prettifier
First Place For The Best Virginia Events! When it comes to events there is no where better to get your updated info. You will see a list of the current and upcoming events below. From county fair to music festivals to petting zoos, there is an amazing list of events for all ages around Virginia.' Focusing on amazing fun for the entire family! The County Fair features great events and games for all
【レビュー】HTML5/CSS3対応のデザインテンプレート集「Free HTML5 Templates」 | エンタープライズ | マイコミジャーナル
170を越えるテンプレートからお気に入りを見つけて参考に - Free HTML5 Templates Free HTML5 Templatesにおいて、HTML5/CSS3を駆使したデザインテンプレートが数多く公開されている。このWebサイトは今年の2月11日(米国時間)に掲載されたテンプレートをはじめ、執筆時点で176のテンプレートが公開されている。掲載されている全テンプレートをサムネイルとして確認できる「Template Portfolio」はまさに圧巻だ。 Template Portfolioで登録されているデザインテンプレートを一望できる。画像クリックで拡大、more infoリンクをクリックしてテンプレート詳細画面に移動する これらのテンプレートはGoogle Chrome 5.0以上とFirefox 3.6以上に最適化されており、Creative Commons Attrib
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
ウェブデザイナーのための実用的なデザインとコーディングテクニック集
Five Useful Design Techniques and Coding Solutions For Web Designers [ad#ad-2] 下記は各ポイントを意訳したものです。 PHPはWordPressでのものとなっています。 1. 複数の項目がある棒グラフのエフェクト 2. ホバー時に追加情報を表示 3. カテゴリごとに異なるカラーを適用 4. ちょっと面白い画像のキャプション 5. ウェブのための印刷風デザイン おわりに -developersではなく、designers 1. 複数の項目がある棒グラフのエフェクト 下記のサイトで使用している棒グラフでは、上：タグの種類と数、下：コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。 こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することに
input fileをCSSでキレイにしたい
この記事は12年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。結構この壁にぶつかってる人はいると思います。 textとかsubmitをキレイにしたのに、fileの参照ボタンが…！という思いをした人は多いでしょう。 というか僕がぶつかったので記事を書いているわけですが。 というわけで早速調べてみました。 一番参考になったのはこちらのサイト。 CSS2/DOM – Styling an input type=”file” 英語です。 なので、大事なとこだけ簡単に要約します。 ＜CSS＞ １．<input type=”file” />を「position:relative」で配置した要素（divとか）の中に配置する。 ２．「position:relative」で配置した要素（divとか）の中に子要素（divとか）を配置して、そこに<input />と<img />（実際表示され
CSS2/DOM - Styling an input type="file"
Credits wholly go to Michael McGrady, who invented this technique. A browser must support opacity to support this technique. Therefore it doesn't work in Explorer 5.0 on Windows, Explorer 5 on Mac and Opera. A reader suggested adding a keyup event to the real input box so that you can copy the text the user types to the fake one. This page has been translated into Chinese and Italian. Of all form
クリエイティブなフォームをCSSで実現する為のTips「20+ Resources and Tutorials for Creative Forms using CSS」
クリエイティブなフォームをCSSで実現する為のTips「20+ Resources and Tutorials for Creative Forms using CSS」 お問い合わせやアンケートなどユーザーとの窓口に様々なWEBサイト、WEBサービスで利用されているフォーム。今日紹介する「20+ Resources and Tutorials for Creative Forms using CSS」はクリエイティブなフォームをCSSで実現する為のTipsをまとめたエントリーです。 20+ Resources and Tutorials for Creative Forms using CSS 今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Adding Style with CSS シンプルながら、チョットした所を気にしたフォームデザイン
かっこいいWordPressのログインフォームデザインいろいろ - かちびと.net
みんな大好きFlickrではグループ を作成出来るのですが、その中に WordPressのログイン画面の 入力フォームデザインのグループ があったのでご紹介します。 個人で使う分にはそのままでも良さそうですが、Web制作でWPをクライアントに渡すのにログイン画面がWordPressよりはクライアントのロゴなどでデザインされている方が喜ばれるのでは無いかと思います。言わないと分からないでしょうが＾＾；そんな訳でログイン画面の秀逸なデザインとログイン画面で使用されているｃｓｓファイルの場所を一番下に載せておきます。ソース見れば簡単に分かるんですけど一応。。 まずはギャラリーから。 Universidad San Andres 学校でWP使ってるようですね。敷地内の写真を利用したログイン画面で素敵です。 Universidad San Andres The NewReview › Log In
Sweet Design *Laboratory* - 【CSS】Clean and pure CSS FORM design
個人的にも仕事でも使う機会が多い「フォーム」。 私はdlタグを使ってマークアップすることが多いです。 CSSの勉強を始めたばかりの当時は、フォームだけはテーブルでマークアップしていましたが＾＾； tableタグもdlタグも使わないでフォームをマークアップする方法があるそうなので、試してみました。 【Clean and pure CSS FORM design】という方法です。 XHTML <div id="stylized" class="myform"> <form id="form" name="form" method="post" action="index.html"> <h1>Sign-up form</h1> <p>This is the basic look of my form without table</p> <label>Name <span class="smal
CSS HappyLife
もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！ これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう！好きな恐竜 なんで恐竜！？って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公
Flickr Photobar Gallery | Codrops
After we got a lot of great feedback for our image galleries we decided to follow some of the suggestions and create a gallery that uses the Flickr API. The […] After we got a lot of great feedback for our image galleries we decided to follow some of the suggestions and create a gallery that uses the Flickr API. The aim was to build a bottom photobar that one can easily integrate into a website. I
Zen-Codingで楽々コーディング! + コツ1つ
話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何？使い方は？という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。 たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは無いんですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.css-lecture.com/log/web-design/comment-form.html
3.5ping.org