CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
コーダー白書2016 集計データを公開いたします ｜ コーディング専門プロダクション FLAT
CSS Nite LP47「Coder’s High 2016」で発表した 「コーダー白書2016」のアンケート結果を公開いたします。 コーダー白書2016 業務でHTMLコーディングをしている方を対象にしたアンケートを実施し、 CSS Nite参加者、ネットからの投票で401名の方にご協力いただきました。 コーダー白書 全結果 http://wd-flat.com/coder/enquete2016.pdf 更新履歴 2016/10/02 追加加筆 70〜77ページ 男性女性・職種・働き方・年代別の平均年収を追加しました。 コーダー白書アンケート項目 回答者属性 性別 / 業務 / 年齢 / コーディング歴 / 働き方 / メイン業務 / スマートフォン機種 技術 全体編 経験がある技術 / 使用している技術 / 使用したい技術 / バージョン管理 技術 コーディング編 メインエディタ
なぜ人は必死でjQueryを捨てようとしているのか
最近はやりのjQuery Hateの謎に迫る！ （というか、これであってるのか教えてほしいという発表）Read less
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ
新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ
![新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c81495bec5cb3ed860ace323c97fffb85ea3e62c/height=288;version=1;width=512/http%3A%2F%2Fhtml-coding.co.jp%2Fogp_img.jpg)
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年10月時点の調査。
clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix
米Yahoo!のフロントエンド エンジニア: Thierry Koblentz氏から、シンプルなスタイルシートで書かれたモダンブラウザ用のclearfix最新版を紹介します。 The very latest clearfix reloaded clearfixとは おさらい: micro clerafix(IE6+) モダンブラウザ用のclearfix最新版 clearfixとは 「clearfix」とはフロートした要素が親要素からはみ出してしまう、親要素の背景が表示されないなどを回避するもので、当サイトでもいくつか紹介してきました。 おさらい: micro clerafix(IE6+) まずは、おさらい。 micro clearfixは、normalize.cssのNicolas Gallagher氏によるもので、2011年にリリースされました。
【初心者向け】CSSを綺麗に書くために決めている基本ルール - Qiita
CSSは綺麗に書きたいですよね。 BEM、SMACCSS、CSS設計、詳細度。色々覚えたけどどうもCSSが汚くてなんとなく見にくいと思ってる人もいるかもしれません。 なので、今回は見やすいCSSを書くために僕が決めている基本ルールを書きます。 どんどんアップデートしていく予定です。 色々自分の中で決めているマイルールのようなものはたくさんあるのですが、まだ全て洗い出せていないのでひとまず公開。まとめて書くと一生公開できなさそうなので…。 随時更新していく予定です。 HTML/CSSのコーディング規約も書いていきたいです。(別の記事かもしれませんが・・) それではこれより下からスタートです。 プロパティはアルファベット順に書く プロパティは、下のようにアルファベットの順をバラバラに書くのではなく、
下方向にもCSS Transitionでスムーズにスクロール
少し前のCSS Transitionを使ったスムーズにスクロールしてトップに戻る機能という記事では、CSS Transitionを使ってスムーズにスクロールさせるためにbody要素のmargin-topプロパティーを負の値を設定した。これはとにかく上方向へのスクロールにしか使うことは出来ない。下方向にスムーズにスクロールさせるためにはまた別のアプローチが必要になるようだ。 何かしらのCSSプロパティーを使い、body要素を上方向にずらすということになる。つまりtransformプロパティーでtranslate()やtranslate3d()を使いY方向のマイナスへ動かすのが向いているようだ。あとはtransitionプロパティーを組み合わせるだけでスムーズにスクロール(しているように見せる)ことができる。 Demo: Scroll Down Smoothly with CSS Transi
CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能
前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 Demo: Scroll Smoothly with CSS Transition デモのページにはダミーテキストの各セクションの最後にそれぞれ⇑ Back to Topというリンクがある。それをクリックすると1秒かけてスムーズにスクロールしながらトップに戻る。トリガーとスクロール自体はJavaScriptで行っているが、スクロールのアニメーション自体はCSS Transitionで行っている。具体的には以下のような処理
Inline Layout
キンドリルはAWS 環境におけるビジネスアジリティ加速、セキュリティ統制を実現する開発者向けの新たなソリューション " Kyndryl Developer Services " の提供を開始しました。 このサービスはAWSクラウド環境の設計、構築、運用を包括的に支援するプラットフォームソリューションであり、AWS環境の自動構築を可能とする設計済のテンプレートを提供します。 金融リファレンスアーキテクチャを軸に、様々な業種で活用いただけるテンプレートを順次拡大し、開発者向けポータルを通してインフラ構築の負荷を軽減します。 本サービスは特に、開発現場で以下のようなお悩みをもたれているお客様におすすめです。 セキュリティ：クラウド環境特有のセキュリティやコンプライアンス維持を考慮した設定またアップデートへの対応 最新情報への対応：新サービスのリリース、セキュリティ対策や法規制の変更など、日々更新
Bootstrap と BEM を組み合わせた CSS 設計パターンについて考える | Recruit Tech Blog
前置き - CSS 設計が難しい件について 誤解を恐れずに言うならば、CSS は変数も関数も条件分岐もない、ある種ゆるふわな言語（仕様）といえます。そのためプログラミング言語のように記述ミス一つで全ての挙動が止まるなんてことはありませんし、いくら冗長に記述しようがブラウザ上での挙動に差異が生まれることも殆どありません。ちょっと嗜めばそれっぽいものが作れてしまうので、マークアップエンジニアのいない小規模体制の組織であれば、サーバーサイドエンジニアやデザイナーが片手間で習得して実装してしまうというのも珍しいことではないでしょう。それでも良かったのかもしれません。これまでは…。 片手間で学習した知識というのはなかなか体系化されないものです。CSS も御多分に漏れずプログラミングのテクノロジーは日進月歩なため、その時は最新だった技術が僅か一年も経たないうちに廃れてしまい、バッドノウハウ化してしまう
HTML の q タグが日本語のサイトではカギ括弧を出すようになってた
HTML に q という要素がありますね。 Quotation の Q ですか。 <q> について 文書内で引用をしたいとき、 ブロック要素を含むような場合には <blockquote> ですが 一言とか一行とかそれくらいのときには <q> を使うのがいいみたいです。 q 自体がデフォルトでインライン要素だしね。 こんなぐあい。 <q>ここは引用ですよー。</q> 多くのブラウザでは、この <q> で括った部分が ダブルクォーテーションで挟まれて表示されます。 上記の例だとこう。 “ここは引用ですよー。” カギ括弧になってた 「表示されます」って書いたんだけど、 本当は「と思ってました」でした。 こないだふと気づいたら、 日本語のページではこれがこうなってました。 「ここは引用ですよー。」 クォーテーションマークじゃなくてカギ括弧になってる。 知らんかった。いつの間に。 <q> を初めて使
runstant
Aboutrunstant とは, ログイン不要, サーバー通信不要で コーディング, 実行, 保存ができる世界一簡単にプログラミングを始められるツールです. 嘘です. いや世界一以外はホントです. 結構便利です♪ Usage右側にコードを書く`save` ボタン(Command+S) を押す左側に実行画面が表示されますURL にコード情報が保存されますOther右上の html/style/script でそれぞれ編集を切り替えることができます右上の setting でタイトルや詳細の設定ができます右上の share で短縮URLをコピーしたり, twitter や facebook でシェアしたりダウンロードできます.要望や不満, お気付きの点などありましたらこちら @phi_jp の方までご連絡ください. あっあと一応 tmlib.js 公式エディタなので tmlib.js のことも
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
select要素をlabel要素で囲みます。 今回はアイコンフォントをCDN（コンテンツデリバリネットワーク）のサービスから読み込ませています。「entypo-down-open-mini」というクラスは、アイコンフォントを表示するのに使っています。この部分はclass名を変更したりしてください。 アイコンフォントはコントロールの部品を表示するのに使います。コントロールの部品を表示できるのなら別にSVGでも背景画像でも、ご自由にカスタムするのがいいでしょう。 スケーラブルな表現のために、remを使って拡大縮小できるようにしています。 label要素のクラス「select-wrap」でスタイルを指定します。 select要素に「z-index:2;」、label要素のbefore擬似要素に「z-index:1;」を指定します。 select要素にはpadding以外は背景色、枠線などをすべて
Markup Cafe OSAKA Vol.1 開催レポート 〜 大阪でも考えた！HTML5マークアップの最適解 〜
Markup Cafe OSAKA Vol.1 開催レポート 〜 大阪でも考えた！HTML5マークアップの最適解 〜 村岡 正和（バスタイムフィッシュ） こんにちは！html5jマークアップ部 部長の村岡です。 この記事では2013年の12月20日に開催されたMarkup Cafe OSAKA Vol.1のイベントレポートをさせていただきます。 東京で2回の開催に続いて3回目であり、はじめての地方開催となるMarkup Cafe、大阪では20名以上の方々に参加いただき、大変盛り上がりました。たくさんの方々からさまざまな観点からのマークアップ案がたくさん出てきて、検討が白熱しました。 なお、Markup Cafe OSAKAの開催にあたっては準備や開催告知などで地元のマークアップ好きの方々にご協力いただき、開催が実現しました。この場を借りて改めて御礼申し上げます。ありがとうございました。 M
デザイナーです。社内のコーダーからなかなかデザイン通りに仕上がってきません。得に複雑なデザインではないのですが、アキやマージン、フォントの大きさなど細かいところがバラバラになってしまいます。コーダーへデザインを渡すときに気をつけていることや、こうするとよいというのがありましたら教...
デザイナーです。社内のコーダーからなかなかデザイン通りに仕上がってきません。得に複雑なデザインではないのですが、アキやマージン、フォントの大きさなど細かいところがバラバラになってしまいます。コーダーへデザインを渡すときに気をつけていることや、こうするとよいというのがありましたら教えてください。
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML・CSSでつくるおしゃれなボタンのデザイン35選
https://twitter.com/i/events/1306047447370665985
PHP コーディング規約 - WordPress Codex 日本語版