小ネタに関する記事一覧

早いもので入社して１ヶ月が経とうとしています。
ほぼほぼ初心者の自分が昔学んだことや先輩方から教えていただいたことを自分なりの解釈を交えて書いていきたいと思います。

今回は本体部分の記述を説明していきますが、前回の本体部分を書くまでに必要な記述を簡単におさらいして補足しながら解説していきます！

入社して間もないしんちゃんです！HTMLは大学で少しかじった程度なので、チームの皆様にご指導いただき日々精進している所存です。いち早く皆様のお役に立てるよう頑張りたいと思います！

HTMLを始めて最初に学び、最初に書くDOCTYPE宣言ですが、最初は暗号にしか見えずHTMLを学ぶ気力を無くす原因のひとつでした。
先生に「DOCTYPEってどういう意味ですか？」「この暗号はなんですか？」と聞いても「こういうもんだから」「宣言文だから。」「始まりの呪文みたいなもん。」と答えられていまいち納得できずうやむやに…。
そこで、しょっぱなから挫折した、勉強したいけど抵抗があるという人のためにも入り口を広げてあげようという内容です。

年始から始まったラインスタンプの作成。
1月末に申請を行い気づけば約3ヶ月経ち、まだかまだかと待っていましたがついに承認がおりました！
承認がおりれば後は販売です！今回は承認から販売までのお話になります。

はじめまして！今回初投稿のこてつです。WEB歴2年半の若輩者ですがこれからどんどん頑張っていきますのでよろしくお願いします！
今回は、デザインを考えるのが苦手。。配色を考えるのが苦手。。そんな人の為に簡単に美しい配色を決める方法をご紹介したいと思います。

【実録！マークアップブログの中の人々】シリーズ第三弾ということで、メンバーのスマホの中身をのぞいてみようと思います(｀・ω・´)
今回はメンバーのスマホのドックには一体どのアプリアイコンが設置されているのか？というテーマでお送りしてみたいと思います。
私の感覚だと「ドック＝良く使うアプリ」を設置しておき、その一段上にはドックには劣るけどよく使うアプリを設置するのが主流だと思っていたのですが、これがメンバーのスマホを覗いていると人によって使い方が違うことが発覚…！そもそもホーム画面の使い方が人によって異なるようです。ではでは参りましょう！

PhotoShopやFireworksで画像の書き出した際に、もう少しファイルサイズを減らせないものかと悩んだことはないでしょうか？
今回は、そんな方たちにおくる画像軽量化サービスを紹介します。

前回エンジニアでもできた！LINEスタンプ申請までの道(1)でスタンプになる絵を作成しました。今回は作成した絵の加工とLINE Creators Marketへの登録までのお話になります。

当ブログでも他のメンバーが正しいCSSの記述や詳しい解説をたくさん書いてくれていますが、中には「はて、これ何に使うんだろう？？？」というCSSのプロパティもあります。

私もCSSをつかってお仕事をするようになってから結構な年月が経ちますが、いまだに「こんなの見たことない」というものが結構あります。

恐らく普段の作業で使わないんだから、「使わなくても大丈夫」なものがほとんどなんでしょうけど、今回はそれらをちょいと掘り起こして、少しだけ外の光を当ててあげることにしましょう。

ということで、興味深いものを調べてみたですが、「音声スタイルシート」と呼ばれる音声読み上げに使用されるプロパティが意外とたくさんありました。 CSS2.1の段階で使われなくなったものがほとんどなのですが、なかなか興味深いです。

前回の『cssで鏡餅を描いてみる』の回で次回プチテクニックの解説を書くと予告しました。

何の役に立つかわかりませんが、cssで鏡餅を描くための解説をしていきたいと思います。
今回は長編になりそうなので、2回に分けてお送りいたします。

それでは第一部、はじまりはじまり～

何かと話題になっているLINEクリエイターズスタンプ。
TV番組にも取り上げられ、イラストレーター、芸能人、会社等の幅広い人達が参加し、各々のスタンプを販売しています。
そんな中に混じろうと思いこの度スタンプの作成をしてみましたので、前半（画像作成）と後半（画像の調整と登録）でお話をしたいと思います。

※今回の記事ですがスタンプの画像作成の一例として見て頂ければと思います。

どうもぴえーるです。
さて先日当マークアップブログの中の人々のデスクが紹介されましたが、今回はそこでちらっと出てきた検証用端末とその管理について少しご紹介しようと思います。

明けましておめでとうございます。
昨年マークアップブログを読んで頂いた皆様（初めて来たわーという皆様も）、ありがとうございます。

本年もしょーもない情報を含めて、地道にブログを更新してまいりますので、よろしくお願いいたします。

情報を伝えるためには、情報の中の関係性を見い出し人間の感覚、認知のしくみを考えていく必要もあります。
今回は、それらを踏まえ情報を伝える表現についてのお話です。

東京もだいぶ寒くなってきました。
風邪はひいてませんか？

さて、opacityを使ったボタンのhover時の動作でも紹介した様に opacityを使えば要素を半透明にすることができますが、要素全部が半透明になってしまいます。

違う違う、そうじゃ、そうじゃない！
テキストは半透明にしたくないんだ！
今回はそんな時に使える方法を書いてみます。

前回は情報の構造化の手順から関係性の話をしましたが、今回は情報を分類する5つの方法について話していきたいと思います。

以前の記事「brタグはdisplay:none;で消せる」でbrタグがdisplay:noneで消せるというのを実験してみましたが、イマイチ使いどころが…。
今日は実際に便利だったな～と感じた事例をもとに見ていきたいと思います。

情報デザインは相手に分かりやすく伝えることを念頭にしており、それはコミュニケーションも例外ではありません。
今回はそんなコミュニケーションについてのお話です。

displayプロパティを使用して要素の表示形式を変更することができますが、今回はタイトルの通りnoneを指定するとbr改行はなかったことに出来る…という事実を知ってしまった私のこの感動をお届けいたします（笑）

表現の背景には目的達成を行うための情報構造があります。そのためにわかりやすく表現できるための「表現力」が必要になってきます。
今回はこの表現力につながる情報の構造についてお話です。

均等な角丸じゃなくて崩れたものが作りたい！

デザイナーさんが作ってきたデザインが、角丸が引き伸ばされててどうやってかけば！？

そんなときに使える意外に知らない人が多い、水平・垂直方向のまるまりかたの違うborder-radiusの書き方があるんです。

前回情報過多による「情報デザイン」の必要性について少し触れました。
そこで今回は「情報デザイン」の考え方についてお話をしたいと思います。

横並びの要素を作りたいけど、何行になるかわからない！

floatを使えばできるけど、3つ目だけ余白を変えなきゃいけない… classを付ければ簡単だけど、システム屋さんにプログラムを組んでもらって吐き出さなきゃいけないし… 3（さぁ～ん♪ナベアツ風に）の倍数だけ、classを付けてくれなんて…言いづらい！

「3つ目のところだけ消して、後の奴詰めておいてー！」

そんな依頼あったりしませんか？今回はそんなお悩みを解決？できるプチテクニックを記載します

floatを初めて知ったあとしばらくついつい楽しくてfloatを乱用してしまう、 そんな状態の方を「フローター」と呼ぶ方が多いです。（すみません）

clearfixだらけになってる！
clearするのが大変！
あのブラウザで崩れちゃってる！

そんな問題をちょっぴり減らせるかもしれない記述を書いてみます。

インターネットの恩恵を受ける一方で、日々増加していく情報…。 そんな情報多過の時代いかに情報とうまく付き合っていくかを考えてみたいと思います。

メンバーを代表しまして、ご挨拶させていただきます。