タグ

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

タグの絞り込みを解除

web制作とCSSに関するiwwのブックマーク (124)

  • word-break - CSS: カスケーディングスタイルシート | MDN

    CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

    word-break - CSS: カスケーディングスタイルシート | MDN
    iww
    iww 2024/01/23
    改行位置の話
    リンク

  • 【41】句読点などが行頭に来るかどうか決める line-break


    ︻41︼句読点などが行頭に来るかどうか決める line-break 最終更新日‥2018年09月25日 ︵初回投稿日‥2018年09月25日︶ line-breakプロパティは、改行ルール︵禁則処理︶の厳密さを指定するプロパティ。 ﹁line-break︵ライン　ブレイク︶﹂とは﹁改行﹂の意味です。 このプロパティは CJK︵中国語、日本語、ハングル︶のみが対象だそうです。 各ブラウザにはあらかじめデフォルトの改行ルールが設定されていて、自然改行した後の行頭に﹁句読点﹂﹁記号﹂などの約物が来ないようになっています。 日本語の場合は、撥音・拗音・促音︵ん ゃ ゅ ょ っ など︶も対象です。 自然改行とは、ボックスの端にテキストが達した時に自然に次の行に流れること。 <br>で強制改行した場合は、この改行ルールは適用されません。 この改行ルールを﹁ゆるい︵loose︶﹂から﹁厳密︵strict
    【41】句読点などが行頭に来るかどうか決める line-break
    iww
    iww 2024/01/23
    改行位置の話
    リンク

  • overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita


    overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していないHTMLCSS初心者 はじめに 今回解決したいのはこれです。 ﹁overflow-wrapかけたのに改行されないしテーブルwidthもなんか勝手に伸ばされちゃってる問題﹂です。 こんなんHTML / CSSの初歩中の初歩じゃんwwwという方は、どうぞごゆるりとブラウザバックしてやってくださいませ… ﹁それ地味に悩んでた！﹂という方がもしいらっしゃいましたら、少しでも助けになれれば嬉しいです。というか一緒に悩みましょう。 あ、でも、もしそんな方が本当にいたら、こんなことに悩むよりも、 ﹁全半角記号のブラウザテストだけ許容する﹂という呪文を唱えた方が5億倍早いです…というネタバレだけ先にしておきますね＞＜ もくじ 当記事は、以下の内容に関する
    overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していない - Qiita
    iww
    iww 2024/01/23
    改行位置の話
    リンク

  • HTML：textareaの拡大/縮小を禁止し、サイズを固定する方法 | WWWクリエイターズ


    HTMLにおいて、フォーム要素のテキストエリア︵textarea︶の領域の拡大、縮小などのリサイズを禁止したり、サイズ変更に関する振る舞いを制限する方法についてです。 textarea の拡大機能について HTMLフォームのテキストエリア︵textarea︶要素は、デフォルトで下記のような﹁つまみ﹂が存在し、ドラッグすることで拡大することが可能になっています。 ユーザの操作によって、エリアの大きさが勝手に変わってしまい、予期せぬレイアウト乱れが発生してしまったりします。このようなリサイズを禁止し、サイズを固定するように対策します。 拡大・縮小を禁止し、サイズを固定する 下記のように、CSSのリサイズを制御するプロパティ︵resize︶を使って禁止し、サイズを固定することができます。 resizeプロパティを﹁none﹂に指定する事により完全に大きさを固定できます。 textarea {r

  • ［html］親要素からはみ出すtextareaを簡単に修正


    親要素の中に入れた textarea 要素のwidthを100%にした場合、親要素からはみ出してしまいます。よく確認せずこの状態のまま本番環境にアップすると、そのサイトの評価を下げることになるかもしれません。 これを簡単に修正‥ textarea要素の box-sizing 属性の初期値は、padding と border の値を幅と高さに含めない content-box になっています。これを padding と border の値を幅と高さに含める border-box にすることで、きれいに収まります。 初期値のままのサンプル
    iww
    iww 2024/01/19
    box-sizing: border-box;
    リンク

  • CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon


    この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー︵スクロールバーが内容の前面に覆いかぶさるようなもの︶が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー︵スクロールバーが常に表示されるようなもの︶が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで
    iww
    iww 2022/12/09
    こんな便利なプロパティがあるのか。 スクロールバーの幅を求めたり足したり引いたりすげー苦労してるのがもうやらなくて済むのか
    リンク

  • 【CSS】tableの奇数行,偶数行・奇数列,偶数列の指定方法

    「表の奇数行と偶数行の色を変えたい！」 tableの奇数行・偶数行、奇数列・偶数列を指定する方法を紹介します。 結論 【偶数行】tr:nth-of-type(2n) td【奇数行】tr:nth-of-type(2n-1) td【偶数列】td:nth-of-type(2n)【奇数列】td:nth-of-type(2n-1) 下記より詳しく解説します。

  • Webページを印刷するときの余白をCSSで設定する | クロジカ

    ホーム / ハック / Webページを印刷するときの余白をCSSで設定する

    Webページを印刷するときの余白をCSSで設定する | クロジカ

  • グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法


    グラデーションを作成した時に、中央がグレーに濁ってしまうこと︵グレーデッドゾーン︶があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
    グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

  • CSSを非同期ロードする最も簡単な方法 - Qiita


    CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。 とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると本末転倒感に溢れます。 全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。 が、なんかすっごい簡単な対処法があったので紹介してみます。 以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日本語訳です。 ちなみにSco
    CSSを非同期ロードする最も簡単な方法 - Qiita
    iww
    iww 2021/06/15
    『onload属性を使って、ロードが完了したらメディアタイプをallに変更します。』 なるほど
    リンク

  • CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ！


    HTMLとかCSS ひよこちゃん向けシリーズ、︻float︼編です！CSSの︻float︼について本気出して説明してみた。left right ,clearってなに！？？ HTMLとかCSSとかこれから！な、ひよこちゃん向けシリーズ、︻float︼編です！ 2016/07/15 一番最後のほうにfloat clearfixの修正版追加しました。 float(フロート)とはなんぞや？ floatとは、要素︵<div>とか<p>とか︶を右に寄せたり、左に寄せたりするときに使います。 よくサイトで見られるサイドバーとかサイドメニューとかもfloatで配置することが多いですね。 まずは、プロパティをおさらいしておきましょう！ left ︻左に寄せる︼ right ︻右に寄せる︼ none ︻やっぱフロートやめる︼ inherit ︻継承させる︼←使うことあまりない プロパティは以上です。基本的にi
    CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ！

  • Webクリエイターボックス


    WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 続きを読む オンラインスクールでWebデザインを教えているのですが、よく担当している生徒から良い案件や求人情報の見分け方を質問されます。経験が増えると﹁これなんとなく胡散臭いなー﹂というのが見えてくるのですが、最初のうちは難しいですよね。ブラック案件やブラック企業にあたらないように、チェックしたいポイントをまとめました。 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報
    Webクリエイターボックス
    iww
    iww 2020/05/11
    X-Frame-Options ポリシーによりブロックされました
    リンク

  • 現代ビジネス [講談社]

    立教大学の助教授が「不倫相手の教え子」を殺害して一家心中…教え子が最期に残した「メッセージ」と遺体の発見場...

    現代ビジネス [講談社]
    iww
    iww 2020/05/10
    adblock対策のひとつとして、スクロールできなくしている。 body に overflow:hidden をかけてる
    リンク

  • CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス　まめわざ]

    HTMLのレイアウト方法で最も新しいフレキシブルボックスをまめわざでも利用しています。 手軽に並列レイアウトができるスタイルですが、他の並列レイアウトとの使い分けはどうすべきか、flexにしかできない表現はあるのかを、実例を挙げながら解説します。

    CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス　まめわざ]
    iww
    iww 2019/09/17
    このやり方はきちんと流行るんだろうか。 それともいつの間にかなかったことにされるのか、使用禁止になるのか
    リンク

  • 【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

    ※記事更新から1年以上が経っているため情報が古い可能性があります 当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。 投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。 そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。 当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。 デザイン完成図 使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢

    【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

  • vertical-align－スタイルシートリファレンス

    vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。 vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルです。ブロックレベル要素には適用できません。 ■値 baseline 適用した要素のベースラインを親要素のベースラインに揃える（初期値） top 上端揃え middle 中央揃え bottom 下端揃え text-top テキストの上端揃え（テーブルセルへの指定は無効） text-bottom テキストの下端揃え（テーブルセルへの指定は無効） super 上付き文字（テーブルセルへの指定は無効） sub 下付き文字（テーブルセルへの指定は無効） パーセント（%） その要素のline-heightプロパティの値に対する割合を%で指定（ベースラインが揃った状態を0として、正の値なら上、負の値なら

  • HTML Global title Attribute

  • font-family: monospace;だと文字が小さくなる - しらいとブログ


    ChromeやSafariなどWebkit系のブラウザでは可変幅フォントと等幅フォント︵monospace︶のデフォルトのフォントサイズが違います。インストール時の初期設定では可変幅フォントが16px、等幅フォントが13pxになっており、等幅フォントのサイズはユーザーが簡単には変えられないようになっています。そのためfont-sizeを%指定やem指定している場合、Webkit系のブラウザだけ等幅フォントが小さく表示されてしまいます。ちなみに、Firefox系では初期設定はどちらも16pxになっていますが、ユーザーが別々に変えることが出来るので同じとは限りません。 等幅フォントも可変幅フォントと同じサイズで表示したい時は次のように指定します。 font-family: monospace, serif; これはmonospaceフォントで表示できない文字はserifフォントで表示するという
    font-family: monospace;だと文字が小さくなる - しらいとブログ
    iww
    iww 2018/06/27
    覚えておこう
    リンク

  • jQueryで要素の表示・非表示を判定する方法


    jQueryの要素の表示・非表示を判定する方法を紹介します。1．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。2．css('display')で判定する show()はdisplayプロパティ﹁block﹂、hide()はdisplayプロパティを﹁none﹂にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
    iww
    iww 2018/06/10
    is(':visible')
    リンク

  • 「:hover」している要素以外にも「:hover」の効果を付けるCSSチュートリアル「Hover on “Everything But”」｜BLACKFLAG


    CSSの指定で要素にマウスオーバーした際に色を変えたり、背景色を変えたり、 何かアクションを付けることに使用する﹁:hover﹂要素。 本来この指定はマウスオーバーしている要素のみに効果を利かすものですが マウスオーバーした要素の兄弟要素に対しても﹁:hover﹂の効果を付けることを可能とするチュートリアル ﹁Hover on “Everything But”﹂が使えそうだったのでメモ書きしておきます。 ≫Hover on “Everything But” | CSS-Tricks ≫デモはこちら‥Hover on Everything But デモ画面ではマウスオーバーした際に それぞれ要素の透明度﹁opacity﹂の値を変化させています。 仕組みについては以下。 ◆HTML <section class="parent"> <div></div> <div></div> <div></
    「:hover」している要素以外にも「:hover」の効果を付けるCSSチュートリアル「Hover on “Everything But”」｜BLACKFLAG
    iww
    iww 2017/10/24
    頑張ればテーブルの列に色が付けられる？
    リンク
  • 1 2 3 4 5 6 7 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.