css3

CSSでカーニングが設定出来て楽しい

久々にCSSを使ったデザインをしていきました。時代が代わるとカーニングなんかも出来るンですね!ということに感動しました。
※注・インターネット老人会所属で、Webデザインの畑から10年以上離れている

実際に、このサイトを参考にして、

p {font-feature-settings: "palt";}

と書くだけでも、ブログ記事の文章が、おおおおおおー!と自動カーニング出来たことに感動しまし

もっとみる

カタコト・コーディングのすすめ。だけでは面白くないのでHTMLコーディングを物語りにしてみました。

もし皆さんが居酒屋の店長で、最近海外のお客さんが急に増えてきたので英語勉強したいって時にどうしますか。
まずは文法から・・・とはならないですよね。
とにかく、使えるフレーズを!
と、なりますよね。

ウェブ担当者さんにとってのHTMLも同じだと思います。
どれくらいサイト運営に時間を作れるかにもよりますが、基本、使えるフレーズだけ知っていれば十分なはずです。

というわけで、ウェブ担当者さんが使え

もっとみる
かたじけない!

#1 2020年8月のHTML/CSS/JSの小技やTipsまとめ

2020 年 8 月にツイートした Tips をまとめました。良いと思ったら、いいね・リツイート・フォローお願いします。

HTML

01. enterkeyhint属性

CSS

02. 指定しておくとよいプロパティ

03. 属性セレクタのフラグ

04. スキップリンク

05. Flexboxと文字の省略

06. 背景画像のちらつき

07. インライン要素のまま改行

08. 絵文

もっとみる

#CSS_0

index

-cssの基本
-cssの適用
-cssの優先順位

■css基本

・cssの拡張子は「.css」。ファイル名はhtmlと同じく半角英数字 & [ - ] , [ _ ] のみを利用。更に小文字で統一。

・文字コードの指定
 外部cssファイルの1行目には必ず下記を記述
 ⇒ @charset "utf-8"; /* 1行目に文字コードを記載*/
 
 2行目以降にスタイルを記述

もっとみる

CSSを学習中の方へ。レイアウトが崩れない書き方を知りたいと思いませんか?私もその1人です。では、説明します。

HTML/CSSを学習中で、noteでの学習や動画学習などをしていてこんな経験はないですか?

・「なんで、この要素を指定するんだろう?」
・「一応調べてみた」→が、なんとなくの理解で進む
・「某noteなどで学習していると、そのコードを打ち込んでいけばなんとなくサイトが出来上がってしまう」
・「意味わかってないけどできたからとりあえずOKとしよう」

これ非常に危険です。
何が危険かというと、一

もっとみる
Thank You‼︎
4

メルカリを作ってみよう⓪:開発環境に必要なツールをインストールしよう

このシリーズではメルカリと言う具体的なサービスを一から作っていきます。

何を作るにしても最初に準備しなければいけないものが道具ですよね?実際にWebサービスを作るときも同じです。今回は以下の二つを中心に開発を進めていきます。

1 テキストエディター

2 Githubのアカウント

ではそれぞれ一体何なのか?またなぜ必要になってくるのかを解説していきます

テキストエディター

コードを書くこ

もっとみる

CSSを使って縁取り文字を表現する方法

Original Article: Stroke Text CSS - The Definitive Guide

このチュートリアルでは、ストロークテキストのCSS効果を作成する方法を紹介します。

HTMLコードとCSSコードに進む前に、ストロークテキスト画像を作成するだけの場合は、このチュートリアルを確認してOutline Text In Photoshopを作成する方法を学んでください。

もっとみる

cssで作る4色のボーダーをあれこれ作ってみた。

cssでなんでも作れるようになってきたけど、
このデザインどうしたら作れるんだ?となるものを作ってみた。

↑サムネイル画像みたいなボーダーを画像ではなく作ろうとしたことを
きっかけに、4色で分かれたボーダーのサンプルです。

左上・右上・右下・左下で分かれたボーダーをつくる

HTML

<div class="rainbowBorder"> <p class="rainbowBorder__t

もっとみる

#44 写真が右端から左へループするアニメーション【ぴよぴよコーダーの開発日記】

まずはデモ

Swiper.js使おうかと迷ったけど、CSSでできるのでは?と思ったらCSSだけで作っているページがありました。

ループしたい画像を横に2枚ならべて、translateXで位置を、1枚目は右端である100%から0にずらす。2枚目は200%から0にずらす。その際に1枚目の移動開始時間を2枚目の半分にする。

HTMLは下記。

<div class="loop_wrap">

もっとみる
ありがとうございます。
3

CSSのmin()やmax()関数がSassでIncompatible unitsエラーになる

ここ数年の CSS の進化は目覚ましく、それにより新たな問題が起きるようになりました。Sass には与えられた引数のうち最小値を返す min() 関数と与えられた引数のうち最大値を返す max() 関数があります。

しかし、CSS にも標準で min() 関数と max() 関数が実装されたことにより、関数名の衝突が起きてしまいます。

色々なエラー

とはいっても、普通に使う分には問題ありませ

もっとみる