Hatena Blog Tags
はてなブログ トップ
CSS
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

CSS

(音楽)
【しーえすえす】

CANSEI DE SER SEXY。　カンセイ・ジ・セール・セクシー。ブラジルのサン・パウロ発のディスコ・パンク・バンド。

MEMBER

ラヴフォックス（Lovefoxxx） -　ヴォーカル
アドリアーノ・シントラ（Adriano Cintra）-　ドラム、ギター、ヴォーカル、作曲
カロリーナ・パラ（Carolina Parra）-　ギター、ドラム
アナ・レゼンデ（Ana Rezende）-　ギター、ハーモニカ
ルイザ・サア（Luiza Sa）-　ギター、ドラム、キーボード
イラチェマ・トレヴィサン（Iracema Trevisan）-　ベース

ALBUM

Cansei De Ser Sexy (Dig)

Cansei De Ser Sexy (Dig)

ドンキー

ドンキー

La Libercion

La Libercion

CSS

(ウェブ)
【しーえすえす】

クロスサイトスクリプティング（Cross Site Scripting）の略称。CSSやXSSと略される。
Cascading Style Sheetsと間違われやすいので、「XSS」と略すほうが推奨されている。

CSS

(コンピュータ)
【しーえすえす】

Content Scrambling System

データを暗号化して記録し、再生時に復号化するシステムでDVD-videoでプロテクトとして
採用されている。

CSS

(ウェブ)
【しーえすえす】

HTMLやXMLなどのマークアップ言語の表示（見栄えなど）を指示する、W3Cの勧告する仕様（群）。Cascading Style Sheets（カスケーディング・スタイル・シート）の頭文字。

論理構造を記述することを本来の目的とするHTMLに、見た目を指示するスタイルシートを用いることにより、文章の構造と表示を分離できる。

スタイル設定の方法（The Web KANZAKI -- Japan, music and computer）なども参考に。

CSSのバージョンは複数存在し、現在、CSS1、CSS2、CSS2.1が勧告されている。またCSS3が作成中である。

利点

妥当なHTML文章に基づいたCSSを記述することにより、サイトのメンテナンス性が向上する。
具体的には、複数のHTML文書からCSSファイルに関連付けることで、デザイン変更の際、CSSファイルに手を加えるだけで(そのCSSファイルを参照するすべての)HTML文書のスタイル変更に対応できる。
スタイルシートを利用しない場合、デザイン変更の際すべてのHTML文書の書き換えを要することもある。

はてなダイアリーではデザインをある程度自由にカスタマイズすることができる。はてなダイアリーのデザインを変更する場合には、はてなダイアリーガイド「CSSセレクタ - 日記１日分」を参照することで、どのようなセレクタがあるか分かる。

記述例

body {
 background-color: white; /* 背景の色 */
 background-image: url("xxx.png"); /* 背景画像 */
 font-size: medium; /* 文字サイズ */
}
このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
shu915’s blog•1日前

DBから取り出した文字列の改行を復元する

データベースから取り出して、フロントで改行が入っている文字列を並べようとすると、 改行がスペースになっていることありませんか？ これはCSSで簡単に復元できます。 改行されない 文字列を確認すると "aaaaaaa\r\nbbbbbbb" のように\r\nが入っているのがわかります 復元はCSSで簡単にできます p { white-space: pre-wrap; } これをいれると復元されます preは、空白などを再現する wrapは右隅まで行くと折れ曲がる という意味です 改行が復元された これで改行が復元されました

#HTML#CSS

ネットで話題

もっと見る
3621ブックマークWeb制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳e0166.blog.fc2.com
2879ブックマークCSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまと...webdesignrecipes.com
2872ブックマークJavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]roundup-inc.co.jp
2830ブックマークCSSセレクタ20個のおさらいweboook.blog22.fc2.com
2317ブックマークもう、class名やid名で悩まないんだからっ！！｜CSS HappyLifecss-happylife.com
2277ブックマークCSSの知識をもっと深める30+2の小技テクニック集｜Webparkweboook.blog22.fc2.com
2171ブックマークHTML5+CSS3 入門yoppa.org
2106ブックマーク死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINEgigazine.net
2103ブックマークCSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きましたWebデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても...webdesignrecipes.com

関連ブログ

shu915’s blog•8日前

横並びのアイテムの画像の高さを揃える

フロントやWEB制作をしているとき 横に同じようなアイテムを並べているのに 画像の高さが揃わないときありますよね そういうときに、どうやって画像の高さをきれいに揃えるかについて説明したいと思います 画像の高さが揃わない 結論 コーディングする前に、画像のアスペクト比率を揃えてカットする でもこれじゃ書くことがないので CSSできれいに揃える方法を説明します コードは以下のようになります <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic…

かもメモ•15日前

WordPress 管理画面の favicon と ツールバーのアイコンをロゴにしたい

⛳️ Goals WordPress で作ったサイトの管理画面にログインしてる時、とのサイトだっけ？ってならないように管理画面の favicon と ツールバーの home アイコンをロゴに変更したい (納品するサイトの場合、こういうちょっとした部分で評価高くなりますし) Versions WordPress 6.7 PHP 8 1. favicon の変更 ログイン画面の head に何かを出力できる login_head アクションと、管理画面の head に何かを出力できる admin_head アクションを使って、favicon の HTML を出力すれば OK function.ph…

#PHP#CSS
zaki work log•17日前

[html/css] 使用するCSSファイルをJavaScriptを使って動的に切り替える

WebアプリのスタイルをテーマごとにCSSファイルで定義し、設定画面のフォーム操作などで使用するCSSファイルを切り替えてスタイルを更新する、というのをできるか試してみたところDOM操作で普通にできたので、そのやり方について。 通常のCSSファイル指定 通常CSSファイルを指定する場合はこんな感じ。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> <link href="style1.css" rel="stylesheet" type="text/css" media="all" id="s…

#JavaScript#CSS
zeozeo日記•23日前

HTMLを活用したはてなブログ作成方法勉強

はてなブログに表を使いたかったが、標準オプションでは表作成ができないことを知った。 調べるとHTMLを使って表作成できることが分かったので、ちょうど最近勉強しているHTMLとCSSの実用もできてはてなブログ最高やな、 と思った。 今後、HTMLを駆使したはてなブログの投稿を極めていこう！

#はてなブログ#表作成#HTML#CSS
ゆずもとアファメーション実践ブログ•1ヶ月前

ほぼブログカスタマイズについて書いている日記

久しぶりの日記です! 100記事目をギリ日記カウントすると 10日ぶりくらいですね(^o^)↓100記事目の日記 yuzumotto.hatenablog.com ある程度内容がまとまったら投稿しよう…と思い 下書きにメモをためまくったものの まとめる余裕がなかったので 結局投稿できず( ;∀;)笑今後はもっと 小出しで投稿しようかなと思います。 (ずっと同じようなこと言ってる人)10日分あるのでざっくりと! の予定で昨日書き始めましたが 書き始めると文章がめちゃくちゃ長くなるタイプで とてもじゃないけど終わらないな… と察しましたので 分割して投稿します笑本日は主にブログ関連のことを書きます…

#ブログ運営#CSS
urakatahero“B”log•1ヶ月前

【デザイン】はてなブログのタイトルを消して新たにデザインしたタイトルを使う方法【自由でおしゃれに】

『タイトルを装飾する方法』

#雑談#ブログデザイン#CSS
urakatahero“B”log•1ヶ月前

【デザイン】アドセンスの位置をスクリプトで指定・CSSでスマホフレンドリーなボタンに変更するなどいろいろやった

『けっこう楽しい』

#雑談#ブログデザイン#CSS
Nurse_SEのブログ•1ヶ月前

SE道中日誌＿2

最近、夜中急激に寒くなりましたね ~ 少し窓開けておくだけで寒くて目が覚めるぐらい寒いです。。。 季節の変わり目 風邪ひかないようにしたいですね！ それではSEへの勉強頑張っていきましょう゜*。(*´Д`)。*° 今、プログラミング言語Rubyの勉強中ですが、課題でだされるWebページ作成でHTML・CSSのformの理解が浅いように感じたので、今回はformについてのアウトプットしていこうと思います。 【アウトプット】 まず、「form」とは何なのか。 formとは名前や住所を入力したり、アプリにあるようなお問い合わせなどの大きなテキスト入力欄、チェックボックスなどのことです。 では、どのよ…

#プログラミング#HTML#CSS#form#Ruby
ENGINEERING BLOG ドコモ開発者ブログ•5時間前

Google Analytics 4をStreamlitに導入してグロースできる環境を実現してみた

自己紹介 NTTドコモ データプラットフォーム部（以下DP部）藤平です。 システムやアプリケーションはリリースしたら終わりではなく、利用者の声や利用状況に合わせたUIの改善など日々成長させていく必要があります。 DP部が提供するデータアプリケーションプラットフォームではStreamlitで約100アプリを提供していますが、各々のアプリを成長させるために利用状況を分析できる環境が必要でした。 そこで、ドコモで10年以上Google Analytics/Google Tag Managerに携わっていただいている、協力会社の大畑さんに実装をお願いしました。 以下、大畑さんに本取り組みの内容をご紹介…

エキサイト TechBlog.•5時間前

Tailwind CSSで兄弟要素の状態を評価する方法

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の5日目を担当します。 qiita.com 今回は、Tailwind CSSで兄弟要素の状態を評価してスタイリングする方法をご紹介します。 兄弟要素の状態を評価したい場面 Tailwind CSSで兄弟要素の状態を評価する方法 完成形 さいごに 兄弟要素の状態を評価したい場面 冒頭、兄弟要素の状態を評価したい場面の例をお示しします。 よくある例として、ホバーすると出現するTooltip（ツールチップ）が挙げられます。 以下はマークアップの一例です。 <div>…

みかづきブログ・カスタム•6時間前

dnd-kitを使ってドラッグ&ドロップで並び替え可能なリストを実装する ✊

docs.dndkit.comNext.jsとdnd-kitを組み合わせてドラッグ＆ドロップで並び替え可能なリストを実装しました。 DEMO https://develop.kimizuka.org/dnd-kit-sortable/ ソースコード package.json { "name": "dnd-kit-sortable", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start" }, "de…

Engineer's Digest•7時間前

2024/12/05 #29 - 今日の技術情報ダイジェスト

Next.jsからSPAへの移行とパフォーマンス改善 Chrome DevToolsとLighthouseを用いたWebサイトパフォーマンス計測 マインクラフトにおけるAIエージェントによる社会シミュレーション テキストのコピペにおけるスタイルの挙動と制御 ダイヤモンドを用いた高密度データストレージ技術 ソニーにおけるステルスプロジェクトとイノベーション ChatGPT登場後の生成AI活用に関する課題と展望 Rust言語入門チュートリアル Amazon Aurora DSQLの発表と特徴 docker buildx bakeを用いた高速並列ビルド Windows 11におけるTPM 2.0の必…

インフラジスティックス・ジャパン株式会社Blog•13時間前

Ignite UI for Angular 18.2 リリースノート

インフラジスティックス・ジャパン株式会社、ローカライゼーションのルミです。Ignite UI for Angular 18.2 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。 Typedoc と Sass の API サイトで表示するバージョンを選択いただけますが、製品リリースから同バージョンの API ご提供までには通常数日いただいております。また前バージョンリリース以降に API の追加/変更がない場合、最新バージョンはドロップダウンに追加されない場合があることにご注意ください。

himanago•14時間前

GitHub の機能だけで LINE ミニアプリを作ってみる！

はじめに 本記事は LINEDC Advent Calendar 2024 の 4 日目の記事です。 ここだけあいてたので、急遽書きました…！ LINE ミニアプリとは LINE アプリ内で動作させることのできるミニアプリで、実体は LIFF（LINE Front-end Framework）を使って作られる Web アプリケーションです。 これまで審査・認証を経なければ公開できなかったのですが、機能制限はあるものの未認証で公開できるようになり、気軽に試したり個人開発して個人的に使ったりということがしやすくなりました。 GitHub の機能だけで作ってみよう ということで、できるだけ気軽に開発…

PLEX Product Team Blog•17時間前

【Next.js】Next/Imageの画像プレビューにて発生したメモリリークを追う

この記事は、 PLEX Advent Calendar 2024の4日目の記事です。 こんにちは 株式会社プレックスでWebアプリケーションの開発をしているtetty0217 です。 はじめに 画像データを取り扱うフォームにおいて、入力した画像をプレビューで表示する機能が付属していることは珍しくないでしょう。 今日はそんなプレビュー機能の画像描画をnext/imageで無秩序に実装すると発生するクラッシュについて、Safariブラウザを題材として「なぜメモリリークが原因だったのか」「ブラウザでは何が起きていたのか？」という点をブラウザのレイヤー（Safari Web Inspector）とネイ…

mikotohodo-三言ほど-•17時間前

Blogへの情熱はシンプルに向かう

すごく久しぶりに記事を書くを実行している訳ですが、HatenaBlogって面白いなと実感。前に使っていた時も面白かったけど、今回はまた別の意味。 何故久しぶりなのかと言うと、WordPressで運営しているBlogがあるから。 数年ぶりに設定の中身を覗き、今回はシンプルに運営をしていこうとCSSを全削除。と言うか、本当に全削除。 以前活動していた時に、コミュニケーションをとってくれた方には大変感謝しています。感謝しつつの全削除。 テーマも再設定。後はアナリティクスあたりのコードを入れ替えるくらい。 ここで早々と冒頭、HatenaBlogって面白いなに戻る。どうしてそう思ったかは「画像も消してな…

ベリーのメモ帳•19時間前

読者を惹きつける！ブログデザインと画像選びのポイント

読者にとって魅力的なブログを作るには、デザインと画像選びが重要なポイントです。ブログの見た目が洗練されていれば、訪問者は記事に対して興味を持ちやすくなり、滞在時間も自然と長くなります。また、適切な画像は記事内容の理解を助け、ブログ全体の印象を向上させる役割を果たします。 この記事では、読者を惹きつけるブログデザインと画像選びのコツを詳しく解説します。初心者でも実践しやすい具体例を交えながら、成功するブログ作りの秘訣を学びましょう。 rakuten_design="slide";rakuten_affiliateId="10bf2366.070baf34.10bf2367.f915499a";r…

二児ママのリスタート日記•1日前

EX_01_学習時間をどこで確保するか

こんにちは！今回は、模写コーディングやスキルアップに必要な「学習時間」をどうやって確保するかについて書いていきます。小さい子供がいると、まとまった時間を取るのが難しいのが現実。私も日々工夫をしながら取り組んでいますが、特に夜は英語学習の時間にあてているので、コーディングはそれ以外の隙間時間を活用しています。 1日のスケジュールを整理してみる まずは、私の1日のおおまかなスケジュールを円グラフで可視化してみました： 何も予定のない平日のスケジュール 6:30〜9:00 朝の時間起床後、朝食準備、子供たちの着替え、洗濯をします。特に朝食には時間がかかり、子供がなかなか着替えないため、この時間帯は忙…

はてなニュース•1日前

新規プロダクト開発では新しい技術をどう採用するのか？ カオナビでの運用経験をリスクヘッジに生かし挑戦を成功に導く！〔ヨジツティクス開発者インタビュー〕

株式会社カオナビでは、社員の個性や才能を発掘するタレントマネジメントシステム「カオナビ」を主力プロダクトとして、HR領域の機能開発に2012年から注力しています。 そして2024年4月、隣接する経営管理領域のSaaS「ヨジツティクス」を独自に開発してリリースしたことで、マルチプロダクト戦略にかじを切りました。 現在の開発組織で新規プロダクトの経験がない中、どのようなことに気を使いながら開発を進めたのでしょう。プロダクトオーナーを務める福田健（ふくだ・けん）さんと、フロントエンドでの技術選定などをリードした別城慎治（べっき・しんじ）さんに話を伺いました。 ※この記事は株式会社カオナビによるタイア…

コハム•1日前

【使うのが待ち遠しい！】attr()関数で style を自在に操る超絶テクニック

A more powerful CSS attr() function 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 attr()関数は、HTML属性の値を読み取り、それをCSSで使用できるようにする関数です。マークアップで定義された値をスタイルシート内で使用できます。attr()関数は最も一般的にdata-属性と共に使用されますが、任意のHTML属性にアクセスできます。現在、attr()関数の使用はcontentプロパティに限定されており、::before、::after、::markerで使用でき、文字列値のみに制限されています。 <u…

エス・エム・エス エンジニア テックブログ•1日前

保育士人材バンクの技術基盤改善 2024

この記事は株式会社エス・エム・エス Advent Calendar 2024の12月4日の記事です。 qiita.com 保育士人材バンク のサービスを担当しておりますエンジニアの田実と申します。 保育士人材バンクは保育業界で働く方と事業所のための就職・転職マッチングサービスです。 本記事では2024年の保育人材バンクの技術基盤改善の取り組みを振り返っていきます！ コンテナ化 今年一番大きかった基盤改善は何と言ってもコンテナ化です！コンテナ化前はEC2上にアプリケーションがホスティングされており、デプロイはrsync、ログはSSHでサーバーに入って直接ログファイルを確認、といった運用を行ってい…