[B! CSS] suquiya0のブックマーク

[プログラマの人向け(?)]私が考えたHTML/CSS コーディング規約 - Qiita

追記 2018/02/21 追記事項編集リクエストをしていただき、ありがとうございます！思ったよりご覧になられているようで恐縮です... 拙い記事で自分の理解不足によるところもありますので、もし「ここはおかしい！」という所がありましたら、どうぞご指摘お願いします(お手柔らかに)＿(:3」∠)＿ ※内容に関係しないところで、一部修正しました。はじめプログラム言語は一般的にコーディング規約というものが存在するのはご存知かと思いますが、HTMLとCSSにもコーディング規約が存在します。今回、他の方のHTML/CSSコーディング規約を下敷きにしつつ、自分が今まで経験してきたことを踏まえたMyコーディング規約を作りましたので、公開してみることにします。対象特に絞ってないですが、あえて言うと「システム開発の過程でコーディングもたまにするプログラマ」を想定して書いてます前提 HTML/C

suquiya0 2018/02/20

ふむ。

HTML
CSS

リンク

ごめんなさいね。 - Lopan.jp

Webデザインとかサイト制作について、知ってる事知らない事を展開するサイト。

suquiya0 2018/01/09

相変わらず流石のLopan.jpのわかりやすさよ…。

リンク

CSSで「余白」を制してデザイナーに好かれよう - Qiita

余白を制する者はデザインを制するらしい。いろいろとデザインの記事を読んでみても、やはり余白は大事と書かれています。「余白デザイン」でググってみても、記事がわんさか出てくるので、やはりデザインにおいて余白は大事みたいですね。 Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識こちらはLIGの記事です。これはデザイナー側が歩み寄ろうねという内容の話ですが、フロントエンド側も歩み寄ってもいいはずです。最近はデザイナーがSketchでデザインし、フロントエンドがZeplinを見ながら実装するというのが主流になりつつあると思いますが、それでも、デザインを学んできていないのにいきなり余白を気にしろと言われてもなかなか難しいですよね。印刷物でしたら、デザイナーが作ったものがそのまま印刷されて配布されたり掲示されたりするので良いのですが、Webやアプリだとなかなかそ

suquiya0 2018/01/08

ふむ。個人的には下に取ってしまうタイプだけれども、上で考えてみようか…？

リンク

CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法｜BLACKFLAG

情報量が多く縦に長いWebページではページ内をスクロール移動させるアンカーリンクを設置することはよくあります。その際、Webページ内のヘッダー要素を固定していると、アンカーリンクをクリックしてスクロール移動した位置と固定ヘッダー要素が被ってしまう、という事象に陥ることがあります。アンカーリンクで移動した位置に固定ヘッダーが被ってしまう動作サンプルこの固定ヘッダーを被らないようにするには、スクロールさせる位置の要素の上部に固定ヘッダーの高さ分の余白を付けておくなど、画面構成において余白の対策が必要になったりするのですが、そのような煩わしい調整をせずにCSSのbefore疑似要素を使って簡単に解消する方法があったのでご紹介してみます。「CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法」サンプルを別枠で表示冒頭で紹

suquiya0 2017/10/04

CSSトリック、てきなもの。

リンク

プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita

SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。なにそれ？ってかたは、コチラなどがわかりやすいのではないかと思います。 CSSのメタ言語Sass(SCSS)、LESSの完全入門でですね。ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！」「なんだよこの仕様設計したヤツって○○じゃねーの？」などとイラついたりしません。なので、あんな欠点だらけのクソ規格であるCSSにも、特に気にしたりしないらしいのです。ところがやはり、中には「CSSのそーゆーところって、やっぱ問題だよねー」って思う人々もいたらしく

suquiya0 2017/09/12

割と納得。個人的にmixinはサブルーチンかなって思ったり。

CSS
SCSS

リンク

高クオリティな写真を提供するUnsplashがWebクリエイター向けに提供しているAPIが便利！ | リノベーター（旧ザ・サイベース）

こんにちは。@tomicciです。仕事でかつかつな中、確定申告の締め切りが迫るという、今年も同じことをやってしまった。。「やよいの青色申告オンライン」も課金ユーザーになったことだし、来年は2月中には確定申告を終わらせることを目標にしよう。さて、先日紹介した高クオリティ&センスの良い写真が多くアップロードされている写真素材サイト「Unsplash」だけど、Web制作者向けにAPIを提供しているので使ってみたよ！ https://unsplash.com Unsplashとは Unsplashとは、クリエイティブコモンズCC0(Public Domain)ですごく雰囲気がいい写真が5万点以上集まっている写真素材サイト。雑誌の表紙などで使われそうなオシャレな感じの写真が多く、サイトで利用すればちょっとワンランク上のセンスをアピールできるはず。商用利用可能で、著作権表示の必要がない点も

suquiya0 2017/04/26

メモメモ。

リンク

cssで作るシェアボタンのデザインパターン36種類 - FOXISM

cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。）記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。）というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの

suquiya0 2017/04/24

もぐもぐ。

css

リンク

font-familyに指定する2017年春の決定版メモ - Qiita

Webサイトで表示するフォントは閲覧するユーザーの環境に依存しています。グラフィックデザインメインの方でWebサイトのデザインを行う場合などの Webサイト制作をしたことのない人だと知らない方が多いので前置き書いてます。例えば、『ヒラギノ』を指定していても、ユーザーの環境になければ別のフォントが表示されてしまいます。同じく、明朝体はもっと悲惨でWindowsではキレイに表示できるのがわりと最近です。（なので基本的に日本語のWebサイトってゴシック体が多いですよね。MS明朝は超汚いので過去に全てのテキストを明朝体でデザインされた時には投げたくなりました。）ゴシック体の指定はこれ！ body { font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese

suquiya0 2017/04/18

メモ。

リンク

WordPressの自作テーマ制作が10倍加速する空テンプレートとテストデータ | ほーくブログ

WordPressのテーマはカスタマイズしやすいように「自分が全部の構造を知っときたい」っていうマイテーマがあるので、テーマは自作するようにしている。この前作ったモバイルテーマで4つ目。しかし、いつも作り替えたいとは思うものの、作り始めがとっても面倒な気持ちでいっぱいになる。なぜなら昔作ったテーマをコピーして、いらないところを削ってからやっと自作テーマを作り始められるという本質的じゃない作業からはじめなければいけないからだ。 WordPressをいじる案件があったときにいろいろ調査していると、この面倒くさい作業をものすごく短縮できる空テンプレートを発見するというラッキーに見舞われた。 Underscoresという最強スターターテンプレートテーマ自作テーマを作る時の最強テンプレート、その名は「Underscores（_s）」。名前だけはなんとなく知っていたけど、「なんのためのもの」かを

suquiya0 2017/04/18

メモメモ。

リンク

Chromeでも読みやすい游ゴシックを指定する方法 - Qiita

Windows8.1から搭載された「游ゴシック」ですが、ChromeとOperaで薄く掠れて見難くなってしまいます。一般的にはbodyにfont-weight: 500;を与えて回避している方が多いですが、フレームワークなどを使用した場合、font-weight100～400を指定しているコンポーネントの数だけfont-weight: 500;と指定しなければならなく、あまり現実的ではありません。「游ゴシックについて」と「ベストなfont-family」がごちゃ混ぜになって記事が見難くなってしまいました。より詳細に書き込んだため記事を分割しました。ストックされているかたや、ブックマークされている方にはご迷惑おかけします。この記事はタイトルの通り游ゴシックのみを扱います。当記事を踏まえたゴシック体のfont-familyの指定は「2020年まで使えるはずだったfont-family

suquiya0 2017/04/14

助かる…。メモ。

リンク

そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita

帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。ライブリロードで、リアルタイムなスタイル調整バックエンドではなくフロントエンドで生成できる前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環

suquiya0 2017/04/12

あのなんとかCSSを思い出すな。keiyaku.cssだったっけ…？

html
css

リンク

[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる

CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅（vw）に対して自動で変化させるスタイルシートの記述を生成するオンラインツールを紹介します。例えば、768px以下はすべて1rem、1920px以上は2rem、その間はvwに対して変化する、という指定が簡単にできます。 Responsive font calculator ツールの使い方は、簡単です。 Units フォントのサイズ指定に使う単位を「px, rem, em」から選択。 Selector 「font-size」を適用するセレクタを記述（id, class など)。 Font-size フォントが拡大縮小する範囲を指定。 Viewport width フォントのサイズに対応するビューポート幅を指定。 Options コメントの有無、サイズの最大値を超えないように指定スタイルシートは

suquiya0 2017/04/04

おお、自動生成…。ちょっとまたデザイン見直すときに使おう。コリスさんの紹介記事はありがたいな…。

CSS

リンク

はてなブックマーク

タグ

関連タグで絞り込む (23)

CSSに関するsuquiya0のブックマーク (12)

お知らせ

今週のはてなブックマーク数ランキング（2024年8月第4週）

今週のはてなブックマーク数ランキング（2024年8月第3週）

今週のはてなブックマーク数ランキング（2024年8月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス